Firebug not showing the response from jquery form plugin post submit - javascript

I am usinh jquery form plugin with this code
$(".form1").live('submit', function(e){
$(".form1").ajaxSubmit(options);
});
Now i see that firebug console shows all ajax requests so that i can see the request and response.
But i have seen that when i use the above code then my ajax request is completed but i can't see any post request in console.
But if i use
$(".form1").live('submit', function(e){
var queryString = $('.form1').formSerialize();
$.post('/book/create/', queryString);
Then i can see the request response
i want to know why is that

Only ajax requests (XMLHttpRequest) are shown in the console. Use the net panel to debug all other requests.
But .ajaxSubmit() is indeed an ajax request as the docs say
ajaxSubmit
Immediately submits the form via AJAX.
In the most common use case this is
invoked in response to the user
clicking a submit button on the form.
ajaxSubmit takes zero or one argument.
The single argument can be either a
callback function or an Options
Object.
The problem may be that you're not preventing the actual form submission in your code .
$(".form1").live('submit', function(e){
$(".form1").ajaxSubmit(options);
return false; // this will prevent the actual form submission.
});

Related

Am having a problem with my JavaScript log out code

I am trying to logout a user using a JavaScript code but it keeps loading without logging out.What have I done wrong?
I have tried changing the function itself but it still wouldn't log out.The loader just keeps on running.
this is the code
logout.html(loader);
$.get("modules/"+role+"/"+role+".php",{
},function(pagedata){
logout.show().html(pagedata);
});
I'm expecting the code to logout and take me back to the login page.
The
$.get()
method requests data from the server with an HTTP GET request.
The required URL parameter specifies the URL you wish to request.
The optional callback parameter is the name of a function to be executed if the request succeeds.
$.get(URL,callback);
so change your code :
logout.html(loader);
$.get("modules/"+role+"/"+role+".php",function(pagedata){
logout.show().html(pagedata);
});

Ajax sending response back to php after ajax call

Suppose I have a page called form.php. I then clicked a button called "add button". This button triggers an event that got detected by a jquery function. The jquery function makes an ajax call to add.php.
Inside add.php, there is code that checks if a particular record exist in the database. If it does find that the record exists, I want to do the following.
Send a response string "exist" to ajax.
The ajax, inside the .done() function, will execute a prompt that says "This record already exist, do you wish to overright"?
If the user canceled the prompt, nothing more should happened and the ajax call should be done.
If the user clicks "ok", I would like the php script to be notified of this and execute an update statement using the data from form.php.
I suspect this is impossible because after receiving a response from php, AFAIK there is no way for ajax to respond back to the php script that is currently executing.
Am I correct or there is a way to do this?
You have to add a parameter to your ajax request, like override with true and false. By default/first request you set it to false. Then the add.php does it's default and returns exists.
The the user makes his decision. If he want to override, you send the ajax request again with the override parameter to true. Your add.php will notice the parameter and does whatever it has to do.
Wrap your ajax handler in an own function with a done callback. So you can reuse the request as often as you want. Pretty easy, no double code needed as well ...
The .done() function of your first ajax call executes when the ajax call has finished successfully, so when your php script has finished completely.
If you want to do something else, you would need to make a new ajax request. That could be to the same or another script, sending in different / new / additional parameters.
Note that you have to make sure that the second script cannot be called without the first one finishing, for example by setting and checking an expiring session variable.
you can do something like this.
$.post('add.php',$(this).serialize())
.done(function(result){
var r = confirm("This record already exist, do you wish to overright");
if(result == 'exist'){
if (r == true) {
$.post('update.php',$(this).serialize()).done(function(r){
console.log(r);
});
} else {
return false;
}
}else{
console.log(result)
}
});

Stop ajax request using javascript/jquery - JSF

I have following code
<rich:calendar enableManualInput="true" value="#{myBean.myDate}"
oninputblur="validateDate(this);">
<a4j:ajax event="change" listener="#{myController.method()}" render="myPanel"></a4j:ajax>
<a4j:ajax event="inputchange" listener="#{myController.method()}" render="myPanel"/>
</rich:calendar>
As you see oninputblur I am calling a javascript function. I donot want to send ajax request to server if validateDate return false. How can I handle this?
Use #onbeforesubmit (see the docs) on a4j:ajax. If it returns false the ajax request will be cancelled.
In your example the request fires before the validation (since the change event fires before blur - although that looks to be browser dependent)

Page redirect from external php file (in ajax call)

I have this Salesforce "Web-to-Lead" form that I'm working with (on an IIS server), and I got it validating properly in an Ajax call (using the roscripts.com ajax validation as a starting point... this uses the Mootools library to carry out its Ajax functions), as well as sending all of the validated data using cURL, however I want the form to redirect to a new page after validation succeeds. The Ajax call runs every time the Submit button is clicked and either displays errors on the page or runs whatever is included in the "else" section of the validation code.
The Ajax function:
window.addEvent('domready', function() {
$('registerForm').addEvent('submit', function(e) {
new Event(e).stop();
var log = $('log_res').empty().addClass('ajax-loading');
this.send({
update: log,
onComplete: function() {
log.removeClass('ajax-loading');
//adding a header redirect here works, but redirects every time ajax call runs, regardless if validation succeeds or not
}
});
});
});
The "action" php file function:
<?php
if (rule){ //validation errors }
else { //where all of the logic happens after validation succeeds
//cURL function
//redirect attempts:
header( 'Location: http://www.place.com'); // doesn 't work
echo '<meta http-equiv="refresh" content="2" ; url="http://www.place.com">'; //resets the form, but doesn't redirect to www.place.com
};
?>
I'm totally stumped here, I can't get this darn thing to redirect, no matter how hard I try. Any help would be greatly appreciated!
From what I can tell of MooTools AJAX, the onComplete handler will fire any time AJAX is finished -- even when there are errors. That may be fine for removing your loading message, but you'll probably want to use onSuccess for a successful handler and onFailure for a failed request. While your script doesn't appear to be using MooTools directly, this is how MooTools AJAX works.
See the "Ajax!" section on http://mootools.net/ for an example.

Wait asynchronous .ajaxComplete() before form submitting

I need to override form's submit method to wait until the ajax request will be completed. At the same time, ajax request should be asynchronous to display a progress indicator, also default form handler must be continued after response receiving.
I can't use event.preventDefault() and then manual call form.submit() for this, because form sending results should be opened in the new tab of the browser. If form.submit() will be called from the code, then some browsers (i.e. chrome) will block the new tab/window.
Pseudocode for clarity:
$('#form').submit(function(e) {
var result;
startIndicator();
asyncAjaxCheckResults(); // ajax complete handler changed 'result' var
stopIndicator(); // stopping indicator after async ajax will be completed
// continue with default submit behavior if we received desired result
// else prevent executing
if (result !== 'desired result') {
e.preventDefault();
}
});
Can anything be done in this case? Maybe $.deferred can help or infinity loop?
I think you need a sync ajax call, so the script will wait for the respons and then continue running.
$.ajax({
...
async:false,
...
});
http://api.jquery.com/jQuery.ajax/
another way is to add click event to the submit button instead submit event to the form,
send the ajax and use event.prevenrDefault, on ajax success callback fire the form submit - $('#form').submit().

Categories

Resources