On click event causing page reload prior executing POST function

Question

When clicking the confirm button the button click function records the first two console.log entries. However, the page reloads when executing the post call function; which results in a undefined index k error, and the post function never executes.

If I remove the POST call within the on-click function, the page does not reload.

Can someone help me understand why my code is reloading the page rather than completing the post call?

I am running MAMP and PHP 7.

<?php

$IDN1 = 1;
$IDN2 = 2;

?>

<!DOCTYPE html>
<HTML>
<HEAD>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<TITLE>Test</TITLE>
<STYLE TYPE="TEXT/CSS">
    .clear { clear: both; }
    html {
        background: #e9e9e9;
        font-family: Lucida Grande,Lucida Sans,Arial,sans-serif;
        font-size: 1em;
        -webkit-text-size-adjust: 100%;
    }
    body { 
        margin: 0 auto; 
        padding: 0;
        max-width: 500px;
    }
    #header_wrapper {
        font-size:1.65em;
        max-width:500px;
        min-width:300px;
        padding-top: 10px;
        padding-bottom: 10px;
        text-align:center;
        color:black;
        border-top-left-radius:0px;
        border-top-right-radius:0px;
        border-bottom-left-radius:0px;
        border-bottom-right-radius:0px;
    }
    #groups_bg {
        max-width:490px;
        text-align:left;
        padding-top:10px;
        padding-left:25px;
        padding-right:25px;
        padding-bottom:25px;
        border-left:1px solid #cccccc;
        border-right:1px solid #cccccc;
        border-bottom:1px solid #cccccc;
        border-bottom-left-radius:0px;
        border-bottom-right-radius:0px;
        background-color:#ffffff;
    }
    #btn_area {
        padding-top:15px;
        padding-bottom:0px;
    }
    .ui-widget-header {
        border: 0px !important;
    }
    .ui-button {
        width:110px !important;
        height:30px !important;
        font-size: 16px;
        color:#4c4c4c;
    }
    a:link {
        text-decoration: none;
        color: #15c;
    }
    a:visited {
        text-decoration: none;
        color: #15c;
    }
    a:hover {
        text-decoration: underline;
    }
    a:active {
        text-decoration: underline;
    }

</STYLE>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<SCRIPT>

function doit(p1, p2) {
    console.log('function start');
    $.post('./test7p.php', {id1:p1, id2:p2}, function() {
        console.log('function post1');
    }, 'json');

    console.log('return from post2');
    return false;
}

$( document ).ready(function() {
    $('#header_wrapper').addClass('ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all');

    // process the confirm 
    $('#confirm1').on('click', function() {
        console.log('got here');

        // get the member and group ids into vars
        var IDN1 = "<?php echo $IDN1 ?>";
        var IDN2 = "<?php echo $IDN2 ?>";
        console.log(IDN1);
        console.log(IDN2);

        console.log('call function');

        a = doit(IDN1, IDN2);

        console.log('return from function');
    });
});

</SCRIPT>


<BODY>
    <div id="header_wrapper">
        Test
    </div>
    <div id="groups_bg">
        <div id="btn_area">
            <div style="text-align:center;">
                <input type="button" id="confirm1" name="confirm1" class='ui-button ui-widget ui-state-default ui-corner-all' value="Confirm">
            </div>
        </div>
    </div>
</BODY>
</HTML>

Here is the PHP code containing the post function:

<?php

if (isset($_POST['id1'])) {
    $ret_array['id1'] = $_POST['id1'];
}

if (isset($_POST['id2'])) {
    $ret_array['id2'] = $_POST['id2'];
}

$ret_array['status'] = TRUE;
exit(json_encode($ret_array));

Here is the output from the console log.

Remember, the JavaScript will keep going after the $.post(). So what’s happening is it prints idn1 and idn2, sends a post request, and prints “return”. ***Then***, if/when it gets a reply, it will print worked or failed. Oops, you have “return” as the message in the success function. Probably should change that so you don’t confuse with the later console log. Also, I don’t think parsejson is needed, but then again I always set the header to json in the php script that receives the input. Bottom line, it doesn’t appear that you’re getting a response. Check the network tab. — Tim Morton, Oct 28 '19 at 17:59
I did check the network tab and the function is being called. I think I found the issue. The php code at the top of js file, is looking for a parameter on the link. It is not there when the page reloads. However, I thought the page would not reload when JS post command was made. Is there a way to stop the reload from occuring? — Tim, Oct 28 '19 at 18:39
That’s ajax; it should not reload. You don’t have it in a form with a submit button, so you shouldn’t be getting an accidental manual submission. Not sure what’s awry here. I’ll look at it more — Tim Morton, Oct 28 '19 at 19:46
A couple of ideas: 1) refactor your code and pull the ajax out of the event handler into its own function. That will allow you to see if the problem is in the button click or in the ajax. 2) perhaps add `event.preventDefault();` to your onclick handler... Also see https://stackoverflow.com/questions/9824808/disable-form-auto-submit-on-button-click, although you've given it `type="button"` and no form so you should be good there. Beyond that, the only thing I question is jqueryUI might be doing something under the hood. — Tim Morton, Oct 28 '19 at 21:32
Taking your suggestions, console log shows click event is calling function. Function is performing the post command. Post command is not executing and no error are reported. It is as if the Post command is completely ignored. I have debug breakpoints setup in the php file that is called by the Post and no statements are stopped. I have also added the event.prevent Default(). I am completed stymied. Any other thoughts? P.S. my both files are in the same directory, so I believe the path on the post command is correct. — Tim, Oct 30 '19 at 16:41
I think I've got it. Try adding `header('Content-type: application/json');` to your receiving script. I think Jquery is seeing the response as html, not json. Another variation would be `$.post(url, data, function() { do this on success }, "json");`. see https://api.jquery.com/jQuery.post/#example-6 — Tim Morton, Oct 30 '19 at 19:10
Well I tried the following(code updated above as well): `function doit(p1, p2) { console.log('function start'); $.post('./test7p.php', {id1:p1, id2:p2}, function() { console.log('function post1'); }, 'json'); console.log('return from post2'); return false; }` same result. Wasn't sure if the html file or the php file was to get the header line I was thinking html), but decided to try the json. Any other ideas? — Tim, Oct 31 '19 at 17:25
Thanks Tim. I'll take a run at it tonight or tomorrow night. Appreciate all the help. — Tim, Oct 31 '19 at 20:19
Tim, thank you for all the help. After I returned from vacation, i decided rebuild the files from scratch and start by taking it down to the lowest level. I now have it working. I'm not sure exactly why it was not working, but your suggestions definitely helped. My code now has the e.preventDefault(); which seems to help. It may also have been something within my machine. I shut it down and rebooted upon return from vacation. In any case, I genuinely appreciate all the assistance. — Tim, Nov 20 '19 at 21:39

score 0 · Answer 1 · answered Oct 28 '19 at 17:43

0

i think if you simply add

return false;

to your callback it won't redirect anymore.

answered Oct 28 '19 at 17:43

nicopowa

459
3
11

Not sure I completely follow where you are advising I place the return false. Are you instructing to place the return false at the end of the on click function? If so, that did not solve the problem. The post function is still not being called. – Tim Oct 28 '19 at 17:49
Yes i got this problem a few times in the past which was fixed by returning false in the submit callback or preventDefault() as written in the comments. – nicopowa Oct 30 '19 at 08:00

On click event causing page reload prior executing POST function

1 Answers1