my ajax keeps refreshing the whole page instead of the div

Question

I have an ajax form and I want to reload the div instead of the whole page, but it isn't working.

This is my handling.js:

$(document).ready(function(){
    $('#guideForm').submit(function(){
        $.ajax({
            type: 'POST',
            url: '../includes/handling.php',
            data: $(this).serialize()
        })
        .done(function(data){
            $('#guide').load(document.URL + ' #guide');
        })
        return false;   
    }); 
});

this is my handling.php:

if ($_POST['guide']) {
    $settings->addGuide($_POST['guide']); 
}

EDIT: Formcodes:

<div class="col-md-4">
  <h2>test title</h2>
  <p class="guids">This is a test text.</p>
  <form method="post" id="guideForm">
     <input name="guide" value="1" style="positon:absolute; display:none;">
     <button class="btn btn-primary">Got it!</button>       
  </form>         
</div>

Can someone help me to figure out what I'm doing wrong?

Answer 1

You should try e.preventDefault()

$('#guideForm').submit(function(e){
        e.preventDefault(); // added this line and an argument 'e' to the function
        $.ajax({
            type: 'POST',
            url: '../includes/handling.php',
            data: $(this).serialize()
        })
        .done(function(data){
            $('#guide').load(document.URL + ' #guide');
        })
        return false;   
    }); 

Answer 2

To stop the page from submitting you need to prevent the default behavior of the event ie to submit the form.

Your page keeps reloading because after your request DOM submits the form. And, as default behavior, Your form submits itself on the same page as you haven't specified a action param.

So, there are multiple ways of doing this.

i). Stop the JS event from propagating by using the method preventDefault() of event object.

Like this:

$(document).ready(function(){
    $('#guideForm').submit(function(e){
        e.preventDefault(); //stop default behaviour
        $.ajax({
            type: 'POST',
            url: '../includes/handling.php',
            data: $(this).serialize()
        })
        .done(function(data){
            $('#guide').load(document.URL + ' #guide');
        })
        return false;   
    }); 
});

This is the most official way of doing this.

ii). You can change your submit button/input to a simple button and bind the ajax with onClick event.

Like this:

$(document).ready(function(){
$('#fakeSubmitButton').click(function(e){
    $.ajax({
        type: 'POST',
        url: '../includes/handling.php',
        data: $(this).serialize()
    })
    .done(function(data){
        $('#guide').load(document.URL + ' #guide');
    })
    return false;   
}); 
});

iii). You can define javascript:void(0) as your form's action attribute. This will automatically prevent form from submitting.

iv). By returning false from the event handler. Which you are currently doing. It is strange it is not working as jQuery doc itself says:

we can cancel the submit action by calling .preventDefault() on the event object or by returning false from our handler.

Maybe the following post can help you: jQuery - Form still submits with return false

Also check the answer of Chen-Tsu Lin in the above post. It is given a link for when you should not use return false .

Hope this helps.

Answer 3

Use e.preventDefault();

$(document).ready(function(){
    $('#guideForm').submit(function(e){
        e.preventDefault();
        $.ajax({
            type: 'POST',
            url: '../includes/handling.php',
            data: $(this).serialize()
        })
        .done(function(data){
            $('#guide').load(document.URL + ' #guide');
        })
        return false;   
    }); 
});

Answer 4

$('#guideForm').submit() 

The above jquery statement would by default submit the fold which would essentially reload the code. If you do not want this to happen,

add the following

event.preventDefault();

This would prevent the submit of the form and execute the code in the function

Answer 5

I think there's an error in your js that's why it doesn't execute as expected, have you checked if you get any error? Maybe it's because you don't have a termination on your $.ajax function.. try adding ";" terminator.

$(document).ready(function(){
    $('#guideForm').submit(function(){
        $.ajax({
            type: 'POST',
            url: '../includes/handling.php',
            data: $(this).serialize()
        })
        .done(function(data){
            $('#guide').load(document.URL + ' #guide');
        });

        return false;   
    }); 
});

Answer 6

Use e.preventDefault() ; to stop the default behavior of submit.

$(document).ready(function(){
    $('#guideForm').submit(function(e){
       e.preventDefault(); //stop default behaviour
       $.ajax({
           type: 'POST',
            url: '../includes/handling.php',
            data: $(this).serialize()
        })
        .done(function(data){
            $('#guide').load(document.URL + ' #guide');
        })
        return false;   
    }); 
});