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

XML, Perl, Python, and other languages can be discussed here, even if it isn't PHP (We might forgive you).

Moderator: General Moderators

Post Reply
crazytopu
Forum Contributor
Posts: 259
Joined: Fri Nov 07, 2003 12:43 pm
Location: London, UK
Contact:

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

Post 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?
User avatar
califdon
Jack of Zircons
Posts: 4484
Joined: Thu Nov 09, 2006 8:30 pm
Location: California, USA

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

Post 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.
crazytopu
Forum Contributor
Posts: 259
Joined: Fri Nov 07, 2003 12:43 pm
Location: London, UK
Contact:

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

Post 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?
User avatar
Eran
DevNet Master
Posts: 3549
Joined: Fri Jan 18, 2008 12:36 am
Location: Israel, ME

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

Post by Eran »

JSON is a much more comfortable format to return structured data to Javascript. PHP supports it natively - http://www.php.net/json
User avatar
califdon
Jack of Zircons
Posts: 4484
Joined: Thu Nov 09, 2006 8:30 pm
Location: California, USA

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

Post 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.
timsewell
Forum Newbie
Posts: 21
Joined: Tue Feb 26, 2008 5:43 am
Location: Hove, England

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

Post 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!
Post Reply