javascript php AJAX refresh part of a DIV

Question

I was trying to refresh the sidebar class "login" only when a user clicked on the button, however, I am not being able to access the login.php when the user makes the click. When I click on it it's doing nothing and it's refreshing the entire page too.

For what I could understand AJAX needs to be used to refresh only that DIV and the console.log is not being triggered. What I am doing wrong here?

<body>
<div id="main-container">
    <div class="sidebar" id="sidebar">
        <div class="login">

            <?php
            session_start();
            if ( !( isset( $_SESSION['user']) && $_SESSION['user'] != '')) {
                echo '<p>User is logged out</p>';
                echo '<form action="" method="post">';
                echo '<label for="username">Username</label>';
                echo '<input type="text" name="username" id="username_input" required/>';
                echo '<label for="password">Password</label>';
                echo '<input type="text" name="password" id="password_input" required/>';
                echo '<input type="submit" value="Login"  id="login_button">';
                echo '</form>';
                ?>
                <script language='javascript'>
                    $(".login").load( function(event) {
                        event.preventDefault();
                        $("#login_button").click("login.php", function() {
                            console.log("login_button clicked");
                        });
                    })
                </script>
            <?php
            }
            else {
            echo '<p>User is logged in</p>';
            echo '<form action="" method="post">';
            echo '<input type="submit" value="Logout" id="logout_button">';
            echo '</form>';
            ?>
                <script language='javascript'>
                    $(".login").load( function(event) {
                        event.preventDefault();
                        $("#logout_button").click("logout.php", function() {
                            console.log("logout_button clicked");
                        });
                    })
                </script>
            <?php
            }
            ?>

        </div>
        <div class="sideMakers" id="sideMakers">
            <p>Markers</p>
        </div>
    </div>
    <div id="map"></div>
</div>
<script src="map.js"></script>
</body>

Thanks in advance

Tushar Walzade · Accepted Answer · 2018-11-30 09:35:31Z

1

Your page is refreshing because of action="" on your form tags.

Also you don't need method="POST" on form tag if you are using AJAX to do so. Just remove it!
You may efficiently use ajax request in your scenario.

A suggestion: you could separate your js code out of the PHP code.

so your code will look like this -

<body>
<div id="main-container">
    <div class="sidebar" id="sidebar">
        <div class="login">
            <?php
                session_start();
                if ( !( isset( $_SESSION['user']) && $_SESSION['user'] != '')) {
                    echo '<p>User is logged out</p>';
                    echo '<form id="loginForm">';
                    echo '<label for="username">Username</label>';
                    echo '<input type="text" name="username" id="username_input" required/>';
                    echo '<label for="password">Password</label>';
                    echo '<input type="text" name="password" id="password_input" required/>';
                    echo '<input type="submit" value="Login"  id="login_button">';
                    echo '</form>';
                } else {
                    echo '<p>User is logged in</p>';
                    echo '<form>';
                    echo '<input type="submit" value="Logout" id="logout_button">';
                    echo '</form>';
                }
            ?>
        </div>
        <div class="sideMakers" id="sideMakers">
            <p>Markers</p>
        </div>
    </div>
    <div id="map"></div>
</div>
<script src="map.js"></script>
<script type="text/javascript">
    $("#login_button").click(function () {
        var data = $("#loginForm").serialize();
        $.ajax({
            type: "POST",
            url: 'login.php',
            data: data,
            success: function (data) {
                console.log(data);
            },
            error: function (error) {
                console.error(error);
            }
        });
        console.log("login_button clicked");
    });
    $("#logout_button").click(function () {
        $.ajax({
            type: "POST",
            url: 'logout.php',
            success: function (data) {
                console.log(data);
            },
            error: function (error) {
                console.error(error);
            }
        });
        console.log("logout_button clicked");
    });
</script>
</body>

edited Nov 30, 2018 at 9:35

answered Nov 30, 2018 at 9:04

Tushar Walzade

3,8274 gold badges38 silver badges60 bronze badges

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

4 Comments

Miguel Over a year ago

Hi, thanks for the reply, however not sure if it's intended but when i click on the login button the GET method enters in action. I mean on the URL it will add 2 properties on it the username and password ones. And the file login.php it's never read, it always trows the error "handler" (i think how people say it).

Miguel Over a year ago

ohh wait it's giving an error on the login.php... gong to check

Tushar Walzade Over a year ago

it's not the correct behaviour for post. Just try again with adding action & method on your forms. That is action="login.php" & method="POST"

Miguel Over a year ago

yehh that it was what i tough ... i add it after i noted that it was an error on the login.php file ... Thanks in advance

Collectives™ on Stack Overflow

javascript php AJAX refresh part of a DIV

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related