ajax request page redirecting

Question

I am loading a form named staff_view.php in main.php through ajax. It's loading fine but when I submit form to staff_post.php it's redirecting to it instead of showing in console, before I add the code for loading form using ajax it was posting fine but after it's redirecting.

Here is my code

$(document).ready(function() {            
    $('.content_load').load('staff_view.php');
    $('ul#nav li a').click(function() {
        var page = $(this).attr('href');
        $('.content_load').load(page);
        $('form.ajax').on('submit', function() {
            var that = $(this);
            url = that.attr('action'),     
                type = that.attr('method'), 
                data = {};

            that.find('[name]').each(function(index, value) {            
                var that = $(this),
                    name = that.attr('name'),
                    value = that.val();
                    data[name] = value;
            });

            $.ajax({
               url: url,
               type: type,
               data: data,
               success: function(response){
                   console.log(response);
               }
            });
        });
        clearAll();
        return false;
    });
});

function clearAll(){
    $("form :input").each(function(){
        $(this).val(""); 
    });
}

That's because you have to prevent the default behaviour (action) of the anchor (``) which, by **default**, redirects. in a nutshell, change `$('ul#nav li a').click(function() {` to `$('ul#nav li a').click(function(e) {` (note the e) and add, after that, `e.preventDefault();` . Similar case: http://stackoverflow.com/questions/11240897/how-to-stop-an-anchor-from-redirecting-using-jquery (**not** duplicate). Same story happens with the form (submit action), considering that both and
may redirect ( because its href may force a redirect, and because the submit redirects) — briosheje, Jun 12 '15 at 10:01

score 0 · Answer 1 · answered Jun 09 '15 at 23:02

Because it's a form, and because you wish to submit via AJAX instead of the usual "redirect-to-page" method that forms automatically use, you must suppress the default action.

Change this:

$('form.ajax').on('submit', function(){
    var that = $(this);
    etc.

to this:

$('form.ajax').on('submit', function(e){  // <=== note the (e)
    e.preventDefault();                   // <=== e used again here
    var that = $(this);
    etc.

score 0 · Answer 2 · answered Jun 09 '15 at 23:19

0

You need to prevent default action when you click anchor tag, and that is redirects you to the link in your href attribute

$('ul#nav li a').click(function(e){
    e.preventDefault(); 
    var page = $(this).attr('href');
    $('.content_load').load(page);
    // code...

This is what cause your redirection

answered Jun 09 '15 at 23:19

Branimir Đurek

632
5
13

dear i just try that it's still the same – mohsin Jun 09 '15 at 23:47
I saw the other answer, but in other answer e.preventDefault() is on submit event, not on anchor click... If you don't know what cause redirection, use in both cases: form submit, and achor click. If tag needs to hold any data user data-* attribute – Branimir Đurek Jun 09 '15 at 23:54
with the other answer the problem wasn't fixed, i have changed input to button but not fixed yet. Is my code alright? or may be i am loading html first using load method then using $.ajax again to submit data? i am not sure i am just guessing, – mohsin Jun 10 '15 at 00:06
One question. I know that you load page content on anchor tag click. But, why are you adding "onsubmit" event, on each anchor click? If you load some form that requires javascript code. Put that javascript code in a file that contains HTML code for that form, which you dynamically load with ajax. – Branimir Đurek Jun 10 '15 at 00:19
because later on i have more pages to load for example now i have staff_view.php then student_view.php and then campus_view.php – mohsin Jun 10 '15 at 00:31
I see... I can only guess what's bothering you. Last words, if you have troubles with redirecting if you click submit, or click anchor tag, use e.preventDefault(). This works 100% or if you are not sure about that, change submit button or anchor to div, span, anything and do what you got to do manually. – Branimir Đurek Jun 10 '15 at 00:41
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/80117/discussion-between-mohsin-and-branimir-durek). – mohsin Jun 10 '15 at 00:53

score 0 · Answer 3 · answered Jun 12 '15 at 12:38

I could be wrong, but it looks like you might have a race condition to load the page and attach the submit listener. The page might load after the $('form.ajax') bit is executed.

$('.content_load').load(page); // Race condition?
$('form.ajax').on('submit', function() {

One fix would be to move the following code into a completion callback:

$('.content_load').load(page, function() {
    $('form.ajax').on('submit', function(e) {
       e.preventDefault();
       // ...
});

Also, add the e.preventDefault(); to prevent the form from actually submitting.

ajax request page redirecting

3 Answers3