A cannot refresh the page through jquery while sending ajax

Question

What below is my html code,I wondered if there is a difference between a and button;when I press the a, I can see it does post the request,but the page is still just there,nothing changed.But button does the request and refresh the page.Another strange thing is what I commented can work well.

  <html>
    <button onclick="nextPage()">test</button>
    <a onclick="nextPage()">test</a>
    <script>
        function nextPage() {
        $.ajax({
            type: 'post',
            url: $('#searchform').attr('action'),
            data: {lastRow: $("input[name='lastRow']").val()}
        });
        /*$("input[name='startRow']").val('');
        $('#searchform').submit();*/
        return false;
        }
    </script>
    </html>

So can anyone tell the tricks behind this? I appreciate your time.

it depend if your button have a type=submit. If it does, it will refresh the page — Guillaume Harari, Apr 18 '18 at 08:29

score 2 · Answer 1 · answered Apr 18 '18 at 08:30

2

A tags have a default function, while button does not. https://api.jquery.com/event.preventdefault/

Add e.PreventDefault()

 <script>
    function nextPage(e) {
    e.PreventDefault();
    $.ajax({
        type: 'post',
        url: $('#searchform').attr('action'),
        data: {lastRow: $("input[name='lastRow']").val()}
    });
    /*$("input[name='startRow']").val('');
    $('#searchform').submit();*/
    return false;
    }
</script>

answered Apr 18 '18 at 08:30

Rence

2,900
2
23
40

This would work if the `nextPage` event had been wired up via jquery `$("button,a").click(nextPage);` but it's on an `onclick=` so the `e` in `nextPage(e)` is not a jquery event. – freedomn-m Apr 18 '18 at 08:59

score 2 · Answer 2 · answered Apr 18 '18 at 08:38

The preventDefault() method cancels the event if it is cancelable, meaning that the default action that belongs to the event will not occur.

For example, this can be useful when:

Clicking on a "Submit" button, prevent it from submitting a form
Clicking on a link, prevent the link from following the URL

So you can rewrite your code as shown below.

<html>
    <button onclick="nextPage($event)">test</button>
    <a onclick="nextPage($event)">test</a>
    <script>
        function nextPage(event) {
        event.preventDefault();
        $.ajax({
            type: 'post',
            url: $('#searchform').attr('action'),
            data: {lastRow: $("input[name='lastRow']").val()}
        });
        /*$("input[name='startRow']").val('');
        $('#searchform').submit();*/
        return false;
        }
    </script>
    </html>

I guess default action is not relevant in this scenario,and btw I got error in console '$event is not defined' — JXmb, Apr 18 '18 at 08:45

score 1 · Accepted Answer · answered Apr 18 '18 at 08:34

The default type for a button is submit

What is the default button type?

So your button without a type:

<button onclick="nextPage()">test</button>

runs the nextPage() ajax function, but then also submits the form - giving you your "page refresh".

Specify the type as button to stop it from auto-submitting the form/page

<button type='button' onclick="nextPage()">test</button>

A cannot refresh the page through jquery while sending ajax

3 Answers3