Similar to this question, I'm wanting to run a function when an ajax form is successfully submitted, but I don't have direct access to the initial ajax code that loads the form.
How would I check that the form was successful given that I can't add code to the initial ajax success call?
$('#registration-form').submit( function() {
alert('registered successfully');
});
try binding .ajaxSuccess() to your element http://api.jquery.com/ajaxSuccess/
$('#registration-form').ajaxSuccess(function() {
alert('registered successfully');
});
Whenever an Ajax request completes successfully, jQuery triggers the ajaxSuccess event. Any and all handlers that have been registered with the .ajaxSuccess() method are executed at this time.
You could try to use the ajaxSucess() global ajax event handler:
$(document).ajaxSuccess(function() {
alert('registered successfully');
});
Related
i am working on a html form where i am using a jquery ajax function that is called in the tag with onSubmit but the problem is that when user presses submit button or enter, the form gets submitted and page gets refreshed and the ajax function is not executed resulting in an output that is undesired.
How can i stop the normal submission and make the form submission only using ajax function and why the ajax function is not getting executed..i even tried .submit attribute of jquery but nithing happened.
please suggest some hacks/methods to deal with it. thanks
You can prevent the default behaviour of the submit event by using
$( "#target" ).submit(function( event ) {
event.preventDefault();
});
This could be find in the JQuery documentation https://api.jquery.com/submit/
To disable form submission change your code to following:
<form action="/" method="POST" onSubmit="return comment();">
...
</form>
function comment() {
...
return false;
}
Working sample is here https://jsfiddle.net/gevorgha/5dyc2ye9/ , try changing return false; to return true; and you will see submission.
i am calling the form from ajax and after submitting the form, validation error message not showing, ajax call on load.
my ajax code
$.ajax({
type:"POST",
url:"/application/workpermit",
data:dataString,
success:function(data){
$('#tabs-12 .workpermit').html(data);
//alert(data); return false;
}
});
Success return the workpermit view with form
The controller part, after submitting
if ($validator->fails()) {
return redirect("application/".$employer_maid_id."/edit?tab=tab11")
->withErrors($validator)
->withInput();
}
Please any one suggest me, how to show the validation message
if you are not refreshing the page you need to add(append) the message with js/jQuery
if you are redirecting from the page you can you Laravel's built in feature "Flash". Basically it's a one time Session laravel docs
I am trying to use jQuery for the first time, and my POST function using .ajax is giving me grief.
The POST is successful; my PHP page runs the MySQL query correctly and the newly created user ID is returned. The only problem is that instead of running the 'success' function; it simply loads the PHP page that I called, which simply echoes the user ID.
Here's the jQuery function:
function register() {
$.ajax({
type: "POST",
url: 'sendRegistration.php',
data: dataString,
datatype: 'html',
success: function(response){alert(response);},
complete: function(response,textStatus){console.log(textStatus);},
error: function(response){alert(response);}
});
}
... and the PHP return stuff:
// Create a new send & recieve object to store and retrieve the data
$sender = new sendRecieve();
$custId = $sender->submitUser($userVars);
if ($custId != 0) {
echo $custId;
} else {
echo "Database connection problems...";
}
The database object is created, and then the php page from the 'url' parameter loads, displaying the id that the $sender->submitUser() function returns.
Ideally, I would like it to never display the 'sendRegistration.php' page, but run another js function.
I'm sure there's a simple solution, but I've not been able to find it after hours of searching.
Thanks for your help.
You are likely handling this from a form. If you don't prevent the default form submittal process of the browser, the page will redirect to the action url of the form. If there is no action in form, the current page will reload, which is most likely what is happening in your case.
To prevent this use either of the following methods
$('form').submit(function(event){
/* this method before AJAX code*/
event.preventDefault()
/* OR*/
/* this method after all other code in handler*/
return false;
})
The same methods apply if you are sending the AJAX from a click handler on the form submit button
how are you calling the register() function? It could be the form is being submitted traditionally, you might need to prevent the default action(standard form submit).
I have a form in Magento that I build in code, and that works with ajax, which I need to validate.
I would like to be able to use Magento's built-in validation functionality, but I don't know how I would trigger it since the form is not submitted. The data is retrieved via ajax and outputted in a list below the form.
Is there someone who can point me in the right direction?
Thanks in advance.
Edit:
This is the javascript code used to hande the ajax request. Its called by the onclick event of the button.
function advancedtranslateSearch(url){
new Ajax.Request(url, {
method: 'get',
parameters: $('search_form').serialize(),
onSuccess: function(transport) {
json = transport.responseText.evalJSON();
$('result').update('<div class="hor-scroll">'+json.records+'</div>');
}
});
}
You should use form's onsubmit event.
To prevent page from reloading you must return false value from your function.
I'm using the Jquery Validation Plugin to forms loaded via Ajax (dynamic forms). I know that as of Jquery 1.4, live events on submit is now possible. Now the problem is I want to show a confirm message after the dynamic form has been validated. My code looks like this:
$('.dynamicForm').live('submit',function(){
$(this).validate();
if($(this).valid()){
if(!confirm('Are you sure?'))
e.preventDefault();
}
});
It's not working as expected. Somehow confirmation shows first, then at the second time I submit the form, that's the time the validation happens. Any ideas?
Somehow this seems to work:
$('.dynamicForm').live('mouseover',function(){
$(this).validate({
submitHandler:function(form){
if(confirm("Are you sure?")){
form.submit();
}
}
});
});
Use the submitHandler function available in the validate options:
$(".dynamicForm").validate({
submitHandler: function(form) { //Only runs when valid
if(confirm('Are you sure?'))
form.submit();
}
})
From the docs - submitHandler:
Callback for handling the actual submit when the form is valid. Gets the form as the only argument. Replaces the default submit. The right place to submit a form via Ajax after it validated.