I have an action to set a Travel enabled , it works good but now I'd like to make it with ajax so I have installed FOSJsRoutingBundle but the problem is that I don't know how to write the ajax code.
Route
travel_enable:
path: /travel/enable/{id}
defaults: { _controller: "AppBundle:Travel:enable" }
options:
expose: true
Action
public function enableAction(Travel $travel)
{
$em = $this->getDoctrine()->getManager();
$travel->setEnabled(true);
$em->flush();
$referer = $this->getRequest()->headers->get('referer');
return $this->redirect($referer);
}
twig
Enable
javascript
<script type="javascript">
// what to put here else
Routing.generate('travel_enable', { id: '...' });
</script>
Is there a any other reason behind using FOSJsRoutingBundle than because of ajax capability?
If no, you could remove it and pre-generate all URLs needed. Something like this
Twig:
Enable
JS:
$('a.dyn-link').on('click', function(){
var URL = $(this).attr('href');
$.post(URL, {
// Your post data here, if any
}).done(function(response){
alert("Suceess!");
}).error(function(){
alert("Error!");
});
});
Now, the diffrent approach is needed when you dynamically generate your <a> tags, in which case you will need FOSJsRoutingBundle:
Twig:
<a data-entity-id="YOUR-ENTITY-ID-GOES-HERE" class="btn btn-xs btn-success dyn-link" title="Enable"> Enable </a>
JS:
// You have to use event delegate
$(body).on('click', 'a.dyn-link', function(){
var entityId = $(this).attr('data-entity-id');
var URL = Routing.generate('travel_enable', { id: entityId });
$.post(URL, {
// Your post data here, if any
}).done(function(response){
alert("Suceess!");
}).error(function(){
alert("Error!");
});
});
Hope this helps...
Related
I have trying to load a page using simple get request
<script>
$(document).ready(function(){
$("li").click(function(e){
e.preventDefault();
var href = $("a",this).attr('href');
$.ajax({
async: true,
type: "GET",
url: href,
success: function (response) {
$('#main-content').html(response);
}
})
});
});
</script>
In response I am getting content with full layout. But Here I am trying to get only content without layout. In controller I have written code like below
public function index()
{
if ($request->ajax())
{
$this->layout = null; //but same result
}
$tags = Tag::orderBy('id', 'desc')->paginate(10);
return view('admin.tags.index')->with('tags',$tags);
}
But I am getting same result with layout, how can I make layout false ? Or can change layout in controller ?
you can use the renderSections
return view('admin.tags.index')->renderSections()['content'];
https://laravel-tricks.com/tricks/render-view-without-layout
Well, you are still returning a view. Why not do:
return response()->json(["data"=>"some data"]);
after your Ajax check? This will return a JSON response to your frontend.
I integrate google login api and It works fine but there is an error in logout.The sign out process is not working.The logged user will not sign out after click the sign out link function.
This is my code:
<meta name="google-signin-client_id" content="here my api .apps.googleusercontent.com">
<script src="https://apis.google.com/js/platform.js" async defer></script>
<div class="g-signin2" data-onsuccess="onSignIn"></div>
Sign Out
<script>
function onSignIn(googleUser) {
var profile = googleUser.getBasicProfile();
if(profile.getEmail()!="") {
var myKeyVals = { token : googleUser.getAuthResponse().id_token }
$.ajax({
type: "POST",
url: "validate.php",
data: myKeyVals,
dataType: "text",
success : function(data) {
window.location = "page";
}
});
}
}
function signOut() {
var auth2 = gapi.auth2.getAuthInstance();
auth2.signOut().then(function () {
});
}
</script>
Here signOut js function is not working and the page will auto reload and go to adminpage.
This is my document.
Thanks in advance.
this works for me instead of http://localhost/application-name/logoutUser you can add your domain name
document.location.href = "https://www.google.com/accounts/Logout?continue=https://appengine.google.com/_ah/logout?continue=http://localhost/application-name/logoutUser";
This works for me,
Simply modify the signout function as follows,Here carefully note that reload() method is used to reload the current document soon after signout.
<button onclick="myFunction()">Sign Out</button>
<script>
function myFunction() {
gapi.auth2.getAuthInstance().signOut().then(function () {
console.log('User signed out.');
location.reload();
});
}
</script>
May be this will help.
const onGoogleSignOut = () => {
// using google logout redirect
//location.href = 'document.location.href = "https://www.google.com/accounts/Logout?continue=https://appengine.google.com/_ah/logout?continue=' + window.location.href;
var auth2 = gapi.auth2.getAuthInstance();
auth2.signOut()
.then(function () {
auth2.disconnect();
console.log('User signed out.');
//location.reload();
});
}
This worked for me. Full JS function code.
The asterisks are just an example of how to define the URL you want to redirect to after the logout is performed.
<button onclick="myFunction()">Sign Out</button>
<script>
function myFunction() {
location.href = 'https://accounts.google.com/Logout?&continue=http://******.com/';
}
</script>
Save this in a HTML file and access it from the browser where you are logged into the account you want to log out of. Can also be placed in a PHP file ETC. AS long as you dont place it in a manner that breaks the existing script.
I am trying to use ko.mapping to transform data to a viewmodel. The result come from an async call to a web service.
Simple view:
<div data-bind="with: myData">
<div data-bind="text: mapWidth"></div>
<div data-bind="text: mapHeight"></div>
<div data-bind="foreach: priceRanges">
<div data-bind="text: title"></div>
</div>
AND the view model is as follows:
var ViewModel = function() {
var self = this;
self.myData = null;
var data = {
action: 'GetPricePoints',
type: 'who cares'
};
$.ajax({
url: 'http://cdt.lotamore.com/api/imap',
data: { "": JSON.stringify(data) },
//async: false, // works!
async: true, // doesn't work!!!!!
type: 'post'
})
.done(function (data) {
self.myData = ko.mapping.fromJS(data);
})
.error(function (data) {
alertError(data);
})
.always(function () {
});
};
When I run this synchronously is works fine. However, when I run it asynchronously it doesn't update the myData within my view model.
I have created a fiddle here:
http://jsfiddle.net/jgergen/jF9pm/20/
I really don't want to make ajax calls that block the UI thread!
What am I doing wrong here?
Thanks,
Jim
Here is the solution:
I have changed the line:
self.myData = null;
to:
self.myData = ko.observable();
This is not all, I tried this before without favorable results. In addition to making myData observable, I had to change the way it is updated. Here is the new .done method:
.done(function (d) {
self.myData(ko.mapping.fromJS(d));
})
So, what I needed to do is treat this field as I would any other observable.
You can see it here at this new fiddle: http://jsfiddle.net/jgergen/jF9pm/47/
I hope that this helps more than me. I searched for a solution to this problem all over the web without any results. So here it is.
Thanks,
Jim
I have built a model from GET request and display the content that I need into a form, mainly dropdown options. User then completes the form and 'POST' back to the api. The API that I am using isn't formatted in a way that I can use for ember-data so I have opted to render my model with Ember.Object
var Prequalification = Ember.Object.extend();
Prequalification.reopenClass({
template: function(){
return Ember.$.ajax({
url: "/prequalification",
dataType: 'json'
}).then(function(response){
var template = response.collection.template.data;
return template;
});
}
});
export default Prequalification;
My controller decorates the view:
var IndexController = Ember.ArrayController.extend({
businessType: function(){
var content = this.get('content');
console.log(this);
return content.get(10);
}.property('content'),
loanType: function(){
var content = this.get('content');
return content.get(5);
}.property('content')
});
export default IndexController;
So on form submit, what are my options for Posting back to the API?
Thanks!
Use an action and associate it with a button.
actions: {
save: function(){
alert('ajax save here');
}
}
http://emberjs.jsbin.com/jositowa/1/edit
I have a <a href> hyperlink. I used JQuery so clicking the link will load contents into a div in the current page (i.e. stay in the same page), and it works now.
However I also want that, if the request fails, the link act normally and go to the href url.
I tried e.preventDefault(); and return false; in the success: callback function, but they are not in the correct scope. If I place e.preventDefault() in the calling function, I can't reverse that effect later.
Here is my code:
$('a.more-link').click(function(e){
var postId=$(this).closest('div.post').attr("id").replace(/^post-(.*)$/,'$1');
var postContent=$(this).parent();
$.ajax({
url:"?action=ajax_load_post&id="+postId,
success:function(data){
postContent.html(data);
// Can't access e.preventDefault, nor return false;
},
error:function(data){
}
});
e.preventDefault();
});
Don't worry about the preventDefault(), just redirect the user in the error function like this:
$('a.more-link').click(function(e){
var postId=$(this).closest('div.post').attr("id").replace(/^post-(.*)$/,'$1');
var postContent=$(this).parent();
var _this = $(this);
$.ajax({
url:"?action=ajax_load_post&id="+postId,
success:function(data){
postContent.html(data);
},
error:function(data){
window.location = _this.attr('href');
return false;
}
});
});