Send data from cakephp form embeded in a Jquery dialog using a dialog button
I have a problem that for the life of me I cannot figure out. I have the 'add' function's view embedded into a jquery modal dialog which has 2 buttons, send and cancel. I load the view through ajax into a div and when the view is completed I launch the dialog. until now everything works ok. my problem is how do I send the form d开发者_如何学JAVAata when the jquery dialog submit button is pushed?
$('#addUser').dialog({
autoOpen: false,
modal: true,
title: "Add new user",
resizable: false,
width: 370,
height: 350,
buttons: {
"Add user": function() {
//$("#addUser").html("Updating data...");
//$.ajax({
// async:true,
// type: 'post',
// url:'/users/add',
// data: $(this).parents('form:first').serialize(),
// success: function (response){
// $('#addUser').empty().html(response);
// }
// })
//this part triggers a hidden submit button
$('#Submit').trigger('click');
$(this).dialog("close");
},
"Close": function() {
$(this).dialog("close");
}
}
});
$('#Submit').trigger('click');
Part triggers a hidden submit button which sends the data to the controller successfully but it also redirects me to another page as soon as the data is saved. I know that this is not "the proper" way to achieve this but I am pressed for time and this is the only solution I could find.
Can someone help me with another idea at least?
Update:
Thank you Ish Kumar for the quick reply. I have tried that scenario, if you noticed the commented .ajax{} part, but I do not get any data in the controller and also the success part is never executed. The trigger(click) is the only way, as far as I figured things out :D, to get the data to the controller, but the issue here is that instead of modifying the div on the main page that opens the dialog ui, it redirects me to the action's view, in my case 'index'..I am just learning cakephp and I am sure that there is something that I am missing...do you know of any tutorials that might point me into the right direction, or can you provide me with the code in the controller that could achieve this? I would be very grateful.
What I am trying to achieve is this: in the home page I have a list of all the users, at the bottom of the list there is a link to add a new user. The form for the new user I want to open it into a jquery dialog. On the dialog I also have two buttons, submit and cancel.The buttons are jquery dialog buttons like in the form example on the jquery page. When submit is clicked I want to send the data from the form to the controller in the add action. When the add action has completed the save i want to update my list of users on the main page without reloading the page.
thank you in advance, denis
You must return false
after click to avoid form submitted twice. Try overriding form's submit event like below
$('#MyForm').submit(function () {
$.ajax({ // <-- this is your casual ajax request
url: '/echo/jsonp',
data : $('#MyForm').serialize(),
success : function(data) {
alert(data);
}
});
return false; // <-- this should stop redirection
});
Demo: http://jsfiddle.net/hMTKv/
So every time you trigger submit, an ajax request is initiated without redirecting.
精彩评论