json-php-mysql-jquery-ajax how can i update without refresh

Question

I have the following example.

userview.php

<script>
        $(document).on("ready", function(){
            loadData();
        }); 

        var loadData = function(){
            $.ajax({
                type:"POST",
                url:"Users.php"
            }).done(function(data){
                console.log(data);
                var users = JSON.parse(data);
                for(var i in users){
                    $("#content").append(users[ i ].usuario + " " + users[ i ].nombres + "<br>");
                }
            });
        }

    </script>

users.php

  <?php
    $bd = "test";
    $server ="localhost";
    $user = "root";
    $password = "";

    $conexion = @mysqli_connect($server, $user, $password, $bd);

    if( ! $conexion )   die( "Error de conexion ".mysqli_connect_error() );

    $sql = "SELECT usuario, nombres FROM usuario";
    $result = mysqli_query($conexion, $sql);
    $array_user = array();
    while($data = mysqli_fetch_assoc($result)){
        $array_user[] = $data;
    }

    echo json_encode($array_user);
?>

How can i reload the users (In case of update or delete) in userview.php without refreshing the page

Just empty the content of #content with $("#content").empty(); before appending again. I've added that to my answer. — Pedro Lobito
– Pedro Lobito, Commented Feb 6, 2016 at 19:19

Pedro Lobito · Accepted Answer · 2016-12-16 12:43:32Z

1

A solution would be making loadData() run, lets say, every 5 seconds, i.e.:

<script>
$(document).ready(function() {
    startLoop();
});

var frequency = 5000; // 5 seconds in miliseconds
var interval = 0;
// STARTS and Resets the loop
function startLoop() {
    if (interval > 0) clearInterval(interval); // stop
    interval = setInterval("loadData()", frequency); // run
}

function loadData() {
    $.ajax({
        type: "POST",
        url: "Users.php"
    }).done(function(data) {
        console.log(data);
        var users = JSON.parse(data);
        $("#content").empty();
        for (var i in users) {
            $("#content").append(users[i].usuario + " " + users[i].nombres + "<br>");
        }
    });
}
</script>

edited Dec 16, 2016 at 12:43

answered Feb 6, 2016 at 19:11

Pedro Lobito

99.8k36 gold badges274 silver badges278 bronze badges

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

Collectives™ on Stack Overflow

json-php-mysql-jquery-ajax how can i update without refresh

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related