JavaScript Development
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me
Go Back   Dev Shed ForumsWeb DesignJavaScript Development

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Dev Shed Forums Sponsor:
  #1  
Old May 19th, 2006, 08:31 AM
madhouse madhouse is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
 
Join Date: Oct 2003
Posts: 57 madhouse User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 3 h 16 m 49 sec
Reputation Power: 5
Dynamic Ajax Content

I found an example of dynamic Ajax content on Dynamic Drive:

http://www.dynamicdrive.com/dynamic...ajaxcontent.htm

Do you know if this example can be amended so that when a link is clicked the content in two DIV containers is changed?

Reply With Quote
  #2  
Old May 19th, 2006, 08:50 AM
elkehinze's Avatar
elkehinze elkehinze is offline
The Queen of Typos
Dev Shed Beginner (1000 - 1499 posts)
 
Join Date: Sep 2004
Location: Two Rivers, WI
Posts: 1,146 elkehinze User rank is Sergeant Major (2000 - 5000 Reputation Level)elkehinze User rank is Sergeant Major (2000 - 5000 Reputation Level)elkehinze User rank is Sergeant Major (2000 - 5000 Reputation Level)elkehinze User rank is Sergeant Major (2000 - 5000 Reputation Level)elkehinze User rank is Sergeant Major (2000 - 5000 Reputation Level)elkehinze User rank is Sergeant Major (2000 - 5000 Reputation Level) 
Time spent in forums: 1 Week 5 Days 13 h 35 m 36 sec
Reputation Power: 49
Send a message via ICQ to elkehinze Send a message via AIM to elkehinze Send a message via MSN to elkehinze Send a message via Yahoo to elkehinze
There is a tutorial at AJAX freaks that shows how to change multiple dynamic divs. Tutorial

I have also done it by taking the response and splitting it (when I had control over the reponse coming in, so I knew that I could do it this way).

Then I just set the innerHTML for the 2 divs to my split responses:

Code:
function handleResponse() {
   if(http.readyState == 4 && http.status == 200){

      // Text returned FROM the PHP script
      var response = http.responseText;
      var split_response;
      var loc_response = '';
      var app_response = '';

      if(response) {
        //split response so we can update the 2 divs
        split_response = response.split("*");
        loc_response = split_response[0];
        app_response = split_response[1];
        alert(app_response);
         // UPDATE ajaxTest content
         document.getElementById("location").innerHTML = loc_response;
         document.getElementById("applet").innerHTML = app_response;
      }
   }
}
__________________

Reply With Quote
  #3  
Old May 19th, 2006, 01:57 PM
madhouse madhouse is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
 
Join Date: Oct 2003
Posts: 57 madhouse User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 3 h 16 m 49 sec
Reputation Power: 5
elkehinze - thanks again for your reply. I kinda see what your doing by splitting the response....just not sure how I go about making the necessary changes in the example on Dynamic Drive to do this?? My plan is to run this on a normal HTML page and I have no idea of PHP!!

Reply With Quote
  #4  
Old May 19th, 2006, 02:15 PM
elkehinze's Avatar
elkehinze elkehinze is offline
The Queen of Typos
Dev Shed Beginner (1000 - 1499 posts)
 
Join Date: Sep 2004
Location: Two Rivers, WI
Posts: 1,146 elkehinze User rank is Sergeant Major (2000 - 5000 Reputation Level)elkehinze User rank is Sergeant Major (2000 - 5000 Reputation Level)elkehinze User rank is Sergeant Major (2000 - 5000 Reputation Level)elkehinze User rank is Sergeant Major (2000 - 5000 Reputation Level)elkehinze User rank is Sergeant Major (2000 - 5000 Reputation Level)elkehinze User rank is Sergeant Major (2000 - 5000 Reputation Level) 
Time spent in forums: 1 Week 5 Days 13 h 35 m 36 sec
Reputation Power: 49
Send a message via ICQ to elkehinze Send a message via AIM to elkehinze Send a message via MSN to elkehinze Send a message via Yahoo to elkehinze
Check out that AJAX tutorial I showed you, they have lots of info, and there's other tutorials there too. You don't have to use PHP you could use another web language such as asp or jsp, I just happen to prefer PHP.

What you have to do is set up the php page (or whichver you use) to receive your variables that are passed from the functions to process. Here is my whole AJAX script below.

I know it's hard to see what is coming in from location, but I was sending it a url from another page.

Code:
//AJAX Script to refresh site information
function createRequestObject() {
   var req;

   if(window.XMLHttpRequest){
      // Firefox, Safari, Opera...
      req = new XMLHttpRequest();
   } else if(window.ActiveXObject) {
      // Internet Explorer 5+
      req = new ActiveXObject("Microsoft.XMLHTTP");
   } else {
      // There is an error creating the object,
      // just as an old browser is being used.
      alert('Problem creating the XMLHttpRequest object');
   }
   return req;
}

// Make the XMLHttpRequest object
var http = createRequestObject();

function sendRequest(loc) {
   // Open PHP script for requests
   http.open('get', 'speed.php?loc='+loc);
   http.onreadystatechange = handleResponse;
   http.send(null);
}

function handleResponse() {
   if(http.readyState == 4 && http.status == 200){

      // Text returned FROM the PHP script
      var response = http.responseText;
      var split_response;
      var loc_response = '';
      var app_response = '';

      if(response) {
        //split response so we can update the 2 divs
        split_response = response.split("*");
        loc_response = split_response[0];
        app_response = split_response[1];
        alert(app_response);
         // UPDATE ajaxTest content
         document.getElementById("location").innerHTML = loc_response;
         document.getElementById("applet").innerHTML = app_response;
      }
   }
}

Reply With Quote
  #5  
Old May 19th, 2006, 02:33 PM
madhouse madhouse is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
 
Join Date: Oct 2003
Posts: 57 madhouse User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 3 h 16 m 49 sec
Reputation Power: 5
Ok, I might have to study this in more detail so that I understand what is going on. Just one question, in this section of the code.....

Quote:
// Text returned FROM the PHP script
var response = http.responseText;
var split_response;
var loc_response = '';
var app_response = '';

if(response) {
//split response so we can update the 2 divs
split_response = response.split("*");
loc_response = split_response[0];
app_response = split_response[1];
alert(app_response);


...I see how the response is split, but in what format are the variables coming in? Are the variables coming in a format like this - page.asp?var1=something&var2=somethingelse.

Reply With Quote
  #6  
Old May 19th, 2006, 03:16 PM
elkehinze's Avatar
elkehinze elkehinze is offline
The Queen of Typos
Dev Shed Beginner (1000 - 1499 posts)
 
Join Date: Sep 2004
Location: Two Rivers, WI
Posts: 1,146 elkehinze User rank is Sergeant Major (2000 - 5000 Reputation Level)elkehinze User rank is Sergeant Major (2000 - 5000 Reputation Level)elkehinze User rank is Sergeant Major (2000 - 5000 Reputation Level)elkehinze User rank is Sergeant Major (2000 - 5000 Reputation Level)elkehinze User rank is Sergeant Major (2000 - 5000 Reputation Level)elkehinze User rank is Sergeant Major (2000 - 5000 Reputation Level) 
Time spent in forums: 1 Week 5 Days 13 h 35 m 36 sec
Reputation Power: 49
Send a message via ICQ to elkehinze Send a message via AIM to elkehinze Send a message via MSN to elkehinze Send a message via Yahoo to elkehinze
If you look at the sendRequest function above, it is receiving a var called loc, it then sends that var to speed.php and then returns the ouput of the processing at speed.php to handleResponse, so that's where it comes from.

You're partly right though, they are passed in variables.

The loc var was submitted to the sendREquest function from a drop down combo box that called sendRequest onchange.

Reply With Quote
Reply

Viewing: Dev Shed ForumsWeb DesignJavaScript Development > Dynamic Ajax Content


Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump


Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 





© 2003-2008 by Developer Shed. All rights reserved. DS Cluster 4 hosted by Hostway