Page 1 of 1

Ajax - Can you load data into two divs same time?

Posted: Fri Jun 13, 2008 6:07 pm
by crazytopu
news.php:

Code: Select all

 
echo "<a class=textLink href=# onclick=processNewsLink(".$id.");>*".$title."</a><br/>";
 
js file:

Code: Select all

 
function processNewsLink(name)
{
  
 //var name = name;
  
  //alert(name);
  
  // proceed only if the xmlHttp object isn't busy
  if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0)
  {
    // retrieve the name typed by the user on the form
    //name = encodeURIComponent(document.getElementById("myName").value);
    // execute the quickstart.php page from the server
    xmlHttp.open("GET", "newsLinkAjax.php?name=" + name, true);  
    // define the method to handle server responses
    xmlHttp.onreadystatechange = handle;
    // make the server request
    xmlHttp.send(null);
  }
  else
    // if the connection is busy, try again after one second  
    setTimeout('processNewsLink()', 1000);
}
 
// executed automatically when a message is received from the server
function handle() 
{
  // move forward only if the transaction has completed
  if (xmlHttp.readyState == 4) 
  {
    // status of 200 indicates the transaction completed successfully
    if (xmlHttp.status == 200) 
    {
      // update the client display using the data received from the server
      document.getElementById("newsDes").innerHTML=xmlHttp.responseText 
      
      // restart sequence
      //setTimeout('process(name)', 1000);
    } 
    // a HTTP status different than 200 signals an error
    else 
    {
      alert("There was a problem accessing the server: " + xmlHttp.statusText);
    }
  }
}
 
newsLinkAjax.php file process the data and prints the news description in "newsDes" Div. Just wondering how would you load two sets of data in two different divs when the user click on the news title link.

I want the comments made on that particular news to appear in another div and for that i have to retain the newsid. Also there is a submit form for new comments to make. Finding it difficult to solve. Any help?

Re: Ajax - Can you load data into two divs same time?

Posted: Fri Jun 13, 2008 7:37 pm
by califdon
The short answer is Yes, you can do whatever you want to do in the handle() function. Of course, you have to have the data to be able to do that, so you will also have to modify the newsLinkAjax.php script (which you didn't show us). The only question is how to structure the data returned by that script, so you know which is which. You could do it with XML (in which case, your handle() function would refer to xmlHttp.ResponseXml) or in the case of just 2 pieces of data, you could separate them with a special character (that wouldn't otherwise appear in the text) and separate the news from the comments in your handle() function.

Re: Ajax - Can you load data into two divs same time?

Posted: Fri Jun 13, 2008 8:04 pm
by crazytopu
Okay i got partial answer to my question. Basically, when clicked I am sending the newsId. The newsLinkAjax.php file takes the id and run a sql query, find the news details that matches the id supplied.

so, I understand I have to run two sql commands in my newsLinkAjax.php file. something like

Code: Select all

 
$id = $_GET['name'];
$sql1 = "SELECT description FROM news WHERE newsID = ".$id." ";
$sql2 = "SELECT comment, date, userName FROM newsComment WHERE newsID = ".$id." ";
 
and then return the result to be displayed in the div(lets name it description div) as speficied in the js file. This way I can dispaly the comments on the same description div that can go underneath the news description. If I want to prit the comment data (which could be a few rows of data) in a div(comment div lets say) next to the descripion div how would I be able to distinguish what part of the returned data goes into description div and what data goes into comment div? THe data returned from newsLinkAjax.php is a bundle of data and thats not just two pieces of data to be separated using explode. You mentioned about xml file but can you give a little example how to process that xml? the biggest problem is I not only have to seperatethe comment from description but also keep track of newsid (for users to submit more comment using the coment box). So that when user clicks the "add comment" button [ <input type= submit name = submit value= add comment onclick="submitComment($id)"> ] it can process the comment accordingly and update the comment div without refreshing the entire page. Is there a lot of work involved here?

Re: Ajax - Can you load data into two divs same time?

Posted: Fri Jun 13, 2008 8:16 pm
by Eran
JSON is a much more comfortable format to return structured data to Javascript. PHP supports it natively - http://www.php.net/json

Re: Ajax - Can you load data into two divs same time?

Posted: Fri Jun 13, 2008 8:26 pm
by califdon
I agree with pytrin, as to using JSON. My experience is limited to ResponseText, so I can't help with XML or JSON. But you're on the right track. All you have to do is use one of the techniques to separate the parts of your data so that you can recognize it in the response from your database lookup script.

Re: Ajax - Can you load data into two divs same time?

Posted: Thu Jun 26, 2008 8:29 am
by timsewell
I'm just starting to experiment with AJAX and I've got to say I'm loving JSON - it takes all the grief out!