CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
Ahsan Ahmed
Ahsan Ahmed

Reputation: 367

How to make Ajax request from database periodic

I got this code from w3schools. I have edited it and it is connected to a php file which displays all messages whenever a person is selected. The problem is when i change add a new message to the database, it isnt shown unless i change the person, or select the same person again. I wanted to add a periodic function that automatically sends request to db.php after every second and displays all updated messages. But as i dont have much knowledge of AJAX, here i am. can anyone edit the code and do it. Thanks

<html>
<head>
<script>
function showUser(str) {
    if (str == "") {
        document.getElementById("txtHint").innerHTML = "";
        return;
    } else { 
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("txtHint").innerHTML = this.responseText;
            }
        };
        xmlhttp.open("GET","db.php?q="+str,true);
        xmlhttp.send();
    }
}
</script>
</head>
<body>

<form>
<select name="users" onchange="showUser(this.value)">
  <option value="">Select a person:</option>
  <option value="1">Peter Griffin</option>
  <option value="2">Lois Griffin</option>
  <option value="3">Joseph Swanson</option>
  <option value="4">Glenn Quagmire</option>
  </select>
</form>
<br>
<div id="txtHint"><b>Person info will be listed here...</b></div>

</body>
</html>

Upvotes: 0

Views: 73

Answers (3)

Ivan86
Ivan86

Reputation: 5708

I added a userChanged() function to handle the onchange event of the <select> element. In the function I check to see if the repeating interval has been set and if it is then clear it and set a new one. The interval is set to go off every 1 second, and it passes the variable str into the function showUser(str).

Here is the code:

<html>
<head>
<script>
var timer = false;

function userChanged(str)
{
    // if timer is not false it means it is set
    if(timer) 
    {
        clearInterval(timer);
        timer = false;
    }

    // When str is '' that means the user has selected 'Select a person:'
    if(str != '')
    {
       timer = setInterval(showUser, 1000, str);
    }
    else document.getElementById("txtHint").innerHTML = "";
}

function showUser(str)
{
    if (window.XMLHttpRequest)
    {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    }
    else
    {
        // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    
    xmlhttp.onreadystatechange = function()
    {
        if (this.readyState == 4 && this.status == 200)
        {
           document.getElementById("txtHint").innerHTML = this.responseText;
        }
    };
    xmlhttp.open("GET","db.php?q="+str,true);
    xmlhttp.send();
}
</script>
</head>
<body>

<form>
<select name="users" onchange="userChanged(this.value)">
  <option value="">Select a person:</option>
  <option value="1">Peter Griffin</option>
  <option value="2">Lois Griffin</option>
  <option value="3">Joseph Swanson</option>
  <option value="4">Glenn Quagmire</option>
  </select>
</form>

Upvotes: 0

ju_
ju_

Reputation: 566

What you want to achieve is called polling via AJAX - a better way to go would be Web-Realtime. Technologies in this context are WebSockets or Server-Sent-Events which got introduced in 2014 with HTML5.

A polling javascript module based on Jquery for your needs could look like:

var Polling = (function ($scope) {
    var doPoll;

    var _callback = function (res) {
        console.log(res);
    };

    var start = function start(url, params, cb, period) {

        period = period || 5000;
        doPoll = true;

        if (cb && typeof cb == 'function') {
            _callback = cb;
        }

        _poll(url, params, period);

    };

    var stop = function () {
        doPoll = false;
    };

    function _poll(url, params, period) {
        Object.assign(params, {polling: true});
        $.post(url, params)
            .done(function (res) {

                _callback(res);

                if (!doPoll) return;

                setTimeout(function () {
                    _poll(url, params, period)
                }, period);
            });
    }

    return {
        start: start,
        stop: stop
    }
})();

After including jquery and the above script to start polling behaviour (sending a post request every 5th second) simply do:

Polling.start("path-to-your-php-file.php",
    {"your": "param"},
    function (response) {
        // handle the response here
        console.log(response);
    }
);

To stop it do:

Polling.stop();

Try it out here:

Upvotes: 0

Rizwan Khan
Rizwan Khan

Reputation: 484

Add an id to the select element.

<select name="users" id="users" onchange="showUser(this.value)">

Add the following code just before the body closing tag:

<script>    
setInterval(function(){
    var e = document.getElementById("users");
    var selectedId = e.options[e.selectedIndex].value;
    showUser(selectedId);
}, 3000);
</script>

It will send the request after every 3 seconds and will update the content.

Upvotes: 1

Related Questions