I am able to get jqGrid display my data. When I do multi-select and submit the form (jqGrid is obviously inside the form) then I am not able to get the selected rows in Spring mvc controller.
Here is my onClick event
$("#GetDataDetailsLink").click( function() {
var selectedRows;
selectedRows = jQuery("#DataList").jqGrid('getGridParam','selarrrow');
var dataToSend = JSON.stringify(selectedRows);
alert("dataToSend is =" + dataToSend);
alert("selectedRows is =" + selectedRows);
//non-ajax submit
var url = "/underwriting-ui-web/taskDetail" + "?selectedTasks="+selectedRows;
$("#DataGridForm").attr("action", url);
$("#DataGridForm").attr("method", "get");
alert("action url is = " + $("#taskGridForm").attr("action"));
$('#DataGridForm').submit();
//ajax way of submiting
/*
$.ajax({
url:'/dataDetail',
type: 'POST',
contentType: 'application/json; charset=utf-8',
data: dataToSend,
dataType: 'json',
success: function (result) {
alert('success: ' + result.result);
}
});
return true;
*/
});
Some how jqGrid is overwriting my url and writing it's own url something like this
http://localhost:8080/myProject-ui-web/DataDetail?jqg_taskList_8=on&jqg_taskList_9=on
Instead of
http://localhost:8080/myProject-ui-web/DataDetail?selectedTasks=8,9
In ajax submit it is working. But I wanted it in non-ajax submit.
Any idea why this is not working in non-ajax submit?
Related
I have a problem with getting items in cart, after I add an item into the cart, Ajax works perfect, then when i try to remove it from the list, first time it wont work with Ajax, if I reload the page it will work.
Ajax generate response like this:
1x ItemTitle X (remove)
When remove has /delete-from-cart/id/place_id
It only works when I reload the page, and also I have a button for coupons that is also managed to work with Ajax, but it only works after refresh.
$('.deletefromcart a').each(function(){
$('#'+this.id).on('click',function(e) {
e.preventDefault();
var id = $(this).attr('data-del');
var url = $(this).attr('href');
var place = $(this).attr('data-place');
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
url: '/delete-from-cart/'+id+'/'+place+'',
method: 'get',
data: $(this).serialize(),
success: function(data){
toastr.warning('Uspešno ste obrisali iz korpe!', 'Korpa');
$(".korpa").load(location.href + " #cartAll");
},
error: function(data){
console.log(data);
}
});
});
});
It seems like this function cant find any object to run it from ajax after I add to cart, after refresh it finds.
If you need live preview, i can make you an account.
You should bind the click event handler on each 'delete' element as,
$('body').on('click', '.deletefromcart a', function (e) {
e.preventDefault();
var id = $(this).attr('data-del');
var url = $(this).attr('href');
var place = $(this).attr('data-place');
$.ajax({
url: '/delete-from-cart/' + id + '/' + place + '',
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
method: 'get',
data: $(this).serialize(),
success: function (data) {
toastr.warning('Uspešno ste obrisali iz korpe!', 'Korpa');
$(".korpa").load(location.href + " #cartAll");
},
error: function (data) {
console.log(data);
}
});
});
Note 1: Your method of binding will attach the event handler to all .deletefromcart a elements. But the one I suggested will bind the event handler to only one element, body. This will also work on dynamically added .deletefromcart a elements.
Note 2: You can include the header values as above too.
Currently, need to click two times on the button ".radioButton" to load the two pages in the ajax success function. How can I change my code to have just one click to load the two pages?
$('.select-address').on('click', '.radioButton', function() {
var form = $('#shippingAddress');
var action = form.attr('action'),
method = form.attr('method'),
data = form.serialize();
data += '&' + form.find('button[name$=save]:first')[0].name + '=' + form.find('button[name$=save]:first').val();
$.ajax({
url: action,
type: method,
data: data,
success: function(data) {
$(".mini-billing-address").load(app.urls.miniBillingAddressURL).delay(2000);
$(".billing").load(app.urls.paymentMethodURL).delay(2000);
}
});
});
I've a bootstrap Modal with users list, inside which I'm displaying another modal for adding a new user. The Add new User Modal is fetched using Ajax. When I add a new user using Ajax, I want to update the div with Ajax response message(.alert-success or .alert-danger in bootstrap).
Right Now the user is loaded but I can't show the message as the modal itself is loaded using Ajax.
$('body').on("click", "#createGroupUserModual .submit", function (e) {
var alertContainer = $(document).find('#groupUserFormCreate').find("#alerts");
$.ajax({
url: $('#groupUserFormCreate').attr('action'),
type: 'POST',
dataType: "json",
cache: false,
data: $('#groupUserFormCreate').serialize(),
success: function(response) {
console.log("success " + response.message);
var returnMessage = "<div class='alert alert-success'>"+response.message+"</div>";
//this below line is not updating the contents with the message.
alertContainer.html(returnMessage);
},
error: function(response) {
console.log("failure is here " + response.message);
var returnMessage = "<div class='alert alert-danger'>"+response.message+"</div>";
alertContainer.html(returnMessage);
}
});
});
I see that not same code for redraw de alertContent, it only exists when response is success but not in errro, under $.ajax query
So:
error: function(response) {
console.log("failure is here " + response.message);
var returnMessage = "<div class='alert alert-danger'>"+response.message+"</div>";
alertContainer.html(returnMessage);
}
Try this code, added the redraw html in error.
Expect will be.
I'm creating embedded file uploading form with file validation in Symfony 2. For file uploading I used this example http://symfony.com/doc/current/cookbook/doctrine/file_uploads.html and for embedded forms this http://symfony.com/doc/current/cookbook/form/form_collections.html. It's work perfect, but I must submit a form using ajax, how can I do it?
Below is a example how I submit form using ajax.
$("#submit_form").click(function() {
var $form = $(this).parents('form:first');
var $that = $(this);
$.ajax({
type: 'POST',
dataType: 'json',
cache: false,
data: $form.serialize(),
success: function($data) {
if ($data.status == 'ok') {
$that.parents('#lightbox').html($data.template);
}
},
url: $form.attr('action')
});
return false;
});
So the problem is I can't pass files with ajax.
Use this plugin http://malsup.com/jquery/form/ . Works like a charm!
This can submit the form and also upload files. All you need to do is call ajaxSubmit and then implement the method that handles the response.
$('#myForm2').submit(function() {
$(this).ajaxSubmit({success: showResponse});
});
function showResponse(responseText, statusText, xhr, $form) {
alert('status: ' + statusText + '\n\nresponseText: \n' + responseText +
'\n\nThe output div should have already been updated with the responseText.');
}
I load a vieschs views_embed_vesch using Ajax.
This views included Ajax PAGER. It does not work.
Drupal.attachBehaviors does not work too.
I think in Drupal.settings need added data from views.
(function($){
Drupal.behaviors.ajax_views = {
attach: function (context, settings) {
//alert('dddd');
$('a.views-link').click(function(){
// alert('sfsdfsd')
var relArr = $(this).attr('rel').split(' ');
$.ajax({
type: "POST",
url: Drupal.settings.basePath + 'ajax-views/'+relArr[0]+'/'+relArr[1],
dataType: 'json',
success: function (datad){
alert(datad.seet.views);
// Drupal.settings.views = datad.seet.views ;
$('div#block-system-main > div.content').append(datad.view);
},
});
return false;
});
}
};
})(jQuery);
Try this module to load content via ajax. It will automatically attach behaviour with the ajax loaded content.
https://drupal.org/project/ajax_links_api