CODEWITHSUNDEEP
ajaxlaravel
Fayakon
Fayakon

Reputation: 1523

Ajax page is reloading after storing data

i am triyng to save data but my page is reloading with json message on next page, how can i stop reloading page.

Ajax Code:

jQuery(document).ready(function($)  {
    $("#add-data").submit(function (event)  {
event.preventDefault();
        $.ajax({
            type: "POST",
            url: "teachers",
            dataType: 'json',
            headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
            data:  $(this).serialize(),
                success: function (data) {
                    alert("Added");


            },
        });
    });
});

Submit Button:

<button type="submit"  class="btn btn-secondary btn-lg shadow-lg rounded" value="ADD" id="add-data"> <span class=" fa fa-plus"> </span> ADD</button>

Store Controller:

after saving which is working fine:

return response()->json([
            'status' => 'success',
            'msg' => 'New esecond has been saved'
        ]);

Upvotes: 2

Views: 169

Answers (4)

boolfalse
boolfalse

Reputation: 2101

Add "return false;" in the end of your submit callback..

As "add-data" is ID of your button, for your example it couldn't retrieve a submit event. That's because it submitted and didn't prevented.

So you can write something like this:

$("form").submit(function (event)  {
    event.preventDefault();
    $.ajax({ ... });

    return false; // <<< THE THING
});

Or just do that with binding an click event on button (not for submit event on button)

$("#add-data").click(function (event)  {
    event.preventDefault();
    $.ajax({ ... });
});

With this you can leave button type, and don't need to change that to type="button".

Upvotes: 0

Dilip Hirapara
Dilip Hirapara

Reputation: 15296

Remove dataType: 'json' as you're already returning JSON otherwise your button seems perfect.

Try this

jQuery(document).ready(function($)  {
    $("#add-data").submit(function(e){
        e.preventDefault();
        $.ajax({
            type: "POST",
            url: "teachers",
            headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
            data:  $(this).serialize(),
                success: function (data) {
                    alert("Added");


            },
        });
    });
});

Upvotes: 0

Pasan Bhanu Guruge
Pasan Bhanu Guruge

Reputation: 286

You can try this instead of prevent default. The reload happen, because you use form submit event.

$('#add-data').submit(false);

If you want to use prevent default, then use click event of the submit button to perform the action.

$("#add-data").click(function (event)  {
    event.preventDefault();
    $.ajax({
        type: "POST",
        url: "teachers",
        dataType: 'json',
        headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
        data:  $(this).serialize(),
            success: function (data) {
                alert("Added");
        },
    });
}

Upvotes: 0

farooq
farooq

Reputation: 1673

It is because of you are trying to post the data to form . If you use button type = "submit" it will redirect you to somewhere . You should avoid using type = "submit" . Instead use the type = "button"

<button type = "button" class="btn btn-secondary btn-lg shadow-lg rounded" value="ADD" id="add-data"> <span class=" fa fa-plus"> </span> ADD</button>

And achieve it by using click event of the button .

then get it in jquery .

$("#add-data").click(function (event)  {
    //Your code here 
}

Upvotes: 1

Related Questions