Using jQuery/AJAX to run a php script on user click event

Question

I've got a php script that I need to run using jQuery/AJAX when a user clicks a button. I have a jQuery script that is supposed to fire when the user clicks the button. However, the event isn't actually firing. Can anyone assist me?

instructor.php

<div id="instructor">
    <?php
        echo "<img id=instructor_image src=" .$_SESSION["image"] .">";
        echo "<h1>" .$_SESSION["user"] ."</h1>";
        echo "<span><p>" .$_SESSION["program"] ."</p> - <h2>" .$_SESSION["role"] ."</h2></span>";
        echo "<a href=mailto:" .$_SESSION["email"] .">" .$_SESSION["email"] ."</a>";
    ?>
    <button class="button" name="logout" id="logout">Logout</button>
</div>

script.js

$(document).ready(function(){
    $("#logout").on("click", function(){
        ajax = new XMLHttpRequest();
        ajax.open("../php/logout.php", "POST", true);
        ajax.send();
    })
})

logout.php

<?php
    require("../includes/header.php");

    $loggedout = "UPDATE `$user_table` SET `logged_in`=0 WHERE `user_id`='$user_id'";
    mysqli_query($connect, $loggedout);
    session_unset();
    session_destroy();
    mysqli_close($connect);
    header("Location: ../pages/logged_out.php");
?>

The session is started in the header and yes, the header is called on every page. I am also getting the following error on the ajax.open() line. NS_ERROR_ILLEGAL_VALUE:

It is wrapped in a dom ready function, this event is part of a much larger js file and I didn't feel that it would be a good idea to include the entire script, but I'll wrap it in the function on here to avoid confusion. — user3542456
– user3542456, Commented Oct 15, 2014 at 12:53
The code looks fine without opening it myself and running it, just check the above 'ready' and also open up dev tools, and just check that the ajax is actually getting a successful load of '../php/logout.php' by looking at the requests your page is making — Stacker-flow
– Stacker-flow, Commented Oct 15, 2014 at 12:54

Michał Fraś · Accepted Answer · 2014-10-15 13:11:08Z

1

there is something that is weird - header("Location: ../pages/logged_out.php"); do you want to do redirect after user click? if so you should do it in your js.

i would change

$(document).ready(function(){
    $("#logout").on("click", function(){
        $.post("../php/logout.php",{},function(response){
            if(response.success == "1"){
                location.replace("../pages/logged_out.php");
            } else {
                //handle error
            }
        },'json');
    })
})

and php:

<?php
    ob_start();
    require("../includes/header.php");
    ob_clean();
    $loggedout = "UPDATE `$user_table` SET `logged_in`=0 WHERE `user_id`='$user_id'";
    mysqli_query($connect, $loggedout);
    session_unset();
    session_destroy();
    mysqli_close($connect);
    echo json_encode(array('success'=>1));
?>

answered Oct 15, 2014 at 13:11

Michał Fraś

4078 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user3542456 Over a year ago

Yes, I'm running the script and then redirecting when the user clicks the button. I'm unfamiliar with the ob functions.

Michał Fraś Over a year ago

Ob functions capture the output and either can store it in variable or echo it or discard. It is necessary to remove anything echo'ed to return proper json string. php.net/manual/en/book.outcontrol.php - more about output control functions

epascarello · Accepted Answer · 2014-10-15 13:14:03Z

0

Because

ajax.open("../php/logout.php", "POST", true);

is wrong. It is .open(method, url, async).

void open(
   DOMString method,
   DOMString url,
   optional boolean async,
   optional DOMString user,
   optional DOMString password
);

So change the code to

$("#logout").on("click", function(){
    ajax = new XMLHttpRequest();
    ajax.open("POST", "../php/logout.php", true);
    ajax.onreadystatechange = function () {
        if (xmlhttp.readyState==4) console.log("done");
    }
    ajax.send();
});

and since you are using jQuery, you can just do

$("#logout").on("click", function(){
    $.post("../php/logout.php", function() { console.log("done") } );
});

edited Oct 15, 2014 at 13:14

answered Oct 15, 2014 at 12:54

epascarello

208k20 gold badges206 silver badges246 bronze badges

2 Comments

user3542456 Over a year ago

So, instead of doing ajax.send(), I need to do the $.post statement?

epascarello Over a year ago

You either replace the open line or you can just get rid of all the ajax code you have and replace it with one line.

Collectives™ on Stack Overflow

Using jQuery/AJAX to run a php script on user click event

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related