Jump to content

[SOLVED] updating contents with ajax on time interval


prakash

Recommended Posts

The easiest way would be for you to choose a tool set to work with that does your AJAX request handling for you. Then, all you have to do is write a callback function to handle the response. I personally like to use the Ext JS Library or the base [uil=http://developer.yahoo.com/yui/]Yahoo! User Interface Library (YUI)[/url]. Here is an example of how you might run a 5 second update for a div with an ID of "my-ajax-div":

 

HTML:

<div id="my-ajax-div"></div>

 

Javascript (using the ExtJS library for the actual request):

var con = new Ext.data.Connection();

function updateContent()
{
  con.request({
    url: 'my_ajax_page.php',
    params: 'id=2&cat=15', // This is where you pass your arguments to your AJAX page
    success: function(r, o) // Callback function for successful request
    {
      Ext.get('my-ajax-div').update(r.responseText); // Update content of the div using Ext
    }
  });
}

window.onload = function() // Start your timer when the window has loaded
{
  setTimeOut("updateContent();", 5000); // Using milliseconds, define your five second interval
}

 

Obviously, there are tons of variations you can do, but this at least gives you the principles. Hope this helps some!

Link to comment
Share on other sites

hi isn't there any easy ajax solution.

as I went through the site extjs.com and downloaded the library. But I am quite confused what to include and how to start with your given code.

 

Thanks,

 

Well, rather than going into a full AJAX tutorial here, I'll recommend you google the solution for an actual request, but here's the principles to do it manually:

 

// Run your AJAX request, and assume myText variable contains your response
var mydiv = document.getElementById('my-ajax-div');

function updateContent()
{
  // Run your AJAX request here to get your response
  mydiv.innerHTML = myText;
}

window.onload = function() 
{
  setTimeOut("updateContent();", 5000); // Using milliseconds, define your five second interval
}

Link to comment
Share on other sites

actually I am totally new to Ajax.

I used the ajaxrequest.js and used the following code

 

<html>
<head>
<script type="text/javascript" language="javascript" src="ajaxrequest.js"></script>
<title>Test</title>
</head>
<body onload="MyAjaxRequest('divDataContainer','process.php');">
<div id="divDataContainer"></div>
</body>
</html>

 

now how can I implement your updateContent() and setTimeOut() idea with my code.

Link to comment
Share on other sites

now how can I implement your updateContent() and setTimeOut() idea with my code.

 

Basically, here is what you want. It's not much different than what you already have:

<html>
<head>
<script type="text/javascript" language="javascript" src="ajaxrequest.js"></script>
<script type="text/javascript">
window.onload = function()
{
  setInterval("MyAjaxRequest('divDataContainer','process.php');", 5000);
}
</script>
<title>Test</title>
</head>
<body>
<div id="divDataContainer"></div>
</body>
</html>

 

You, see, you are literally calling the exact same code, but you want to call it within an interval so that it is called every 5 seconds rather than just once at page load.

 

Good luck!

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.