Usgin Ajax xmlHTTP request to retrieve HTML content into DIV

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
mbaroz
Forum Commoner
Posts: 29
Joined: Sun Feb 05, 2006 10:10 am

Usgin Ajax xmlHTTP request to retrieve HTML content into DIV

Post by mbaroz »

feyd | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]


Hi There
I cant resolve this issue ..HELP!!
When i run the following code . after click the button i get "undefined" a second click retrieves the actual HTML content
Whats is wrong ?
[syntax="html"]<html>
<head>
<script language="javascript">
var xmlHttp;
var results;
function getXMLHTTP(){
  var A = null;
  try{
    A = new ActiveXObject("Msxml2.XMLHTTP");
  }catch(e){
    try{
      A = new ActiveXObject("Microsoft.XMLHTTP");
    } catch(oc){
      A = null;
    }
  }
  
  if(!A && typeof XMLHttpRequest != "undefined") {
    A = new XMLHttpRequest();
  }
  
  return A;
}

function getUrl(lookupURL){

  if(xmlHttp && xmlHttp.readyState != 0) {
    xmlHttp.abort()
  }
  
  xmlHttp=getXMLHTTP();
  if(xmlHttp){
    xmlHttp.open("GET", lookupURL, true);
     xmlHttp.onreadystatechange = function() {
      if (xmlHttp.readyState == 4 && xmlHttp.responseText) {
		results=xmlHttp.responseText;
		
        
      }
    }
   
    xmlHttp.send(null);
  }
  return results;
 } //end function doRemoteQuery

 

</script>
</head>
<body>
<script language="javascript">
function ShowDiv() {
	document.getElementById("urlContent").innerHTML=getUrl('GetMiniProfile.php');

	
}
</script>
<div id="urlContent"></div>
<br />

<button onclick="ShowDiv()">Click me</button>
</body>

</html>

Thanks a lot
Moshe.b


feyd | Please use[/syntax]

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]
User avatar
anjanesh
DevNet Resident
Posts: 1679
Joined: Sat Dec 06, 2003 9:52 pm
Location: Mumbai, India

Post by anjanesh »

In function getUrl, shouldn't xmlHttp=getXMLHTTP(); come before

Code: Select all

if(xmlHttp && xmlHttp.readyState != 0) {
    xmlHttp.abort()
  }
mbaroz
Forum Commoner
Posts: 29
Joined: Sun Feb 05, 2006 10:10 am

xmlhttp

Post by mbaroz »

Hi
Thanks for reply
i moved

Code: Select all

xmlHttp=getXMLHTTP();
after

Code: Select all

if(xmlHttp && xmlHttp.readyState != 0) {
    xmlHttp.abort()
  }
but still not working
User avatar
anjanesh
DevNet Resident
Posts: 1679
Joined: Sat Dec 06, 2003 9:52 pm
Location: Mumbai, India

Post by anjanesh »

After ? Before.

Code: Select all

function getUrl(lookupURL){
  xmlHttp=getXMLHTTP();

  if(xmlHttp && xmlHttp.readyState != 0) {
    xmlHttp.abort()
  }
 
  if(xmlHttp){
    xmlHttp.open("GET", lookupURL, true);
     xmlHttp.onreadystatechange = function() {
      if (xmlHttp.readyState == 4 && xmlHttp.responseText) {
                results=xmlHttp.responseText;
               
       
      }
    }
   
    xmlHttp.send(null);
  }
  return results;
 } //end function doRemoteQuery
User avatar
SpecialK
Forum Commoner
Posts: 96
Joined: Mon Sep 18, 2006 3:49 pm

Post by SpecialK »

I was playing with this code as it's something I want to do with AJAX and found what I think is a solution.

When returning the results at some point the results variable is cleared. As for when, I am still trying to figure that out for my own common knowledge. The resulting code is working for me from the portion of code posted.

Code: Select all

function getUrl(lookupURL){

  if(xmlHttp && xmlHttp.readyState != 0) {
    xmlHttp.abort()
  }
 
  xmlHttp=getXMLHTTP();
  if(xmlHttp){
    xmlHttp.open("GET", lookupURL, true);
     xmlHttp.onreadystatechange = function() {
      if (xmlHttp.readyState == 4 && xmlHttp.responseText) {
        document.getElementById("urlContent").innerHTML=xmlHttp.responseText;
               
       
      }
    }
   
    xmlHttp.send(null);
  }
  
 } //end function doRemoteQuery
and then altered the showDiv as follows

Code: Select all

function ShowDiv() {
   getUrl('GetMiniProfile.php');

       
}
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

if you used jQuery, it would just be:

Code: Select all

$('#urlContent').load('GetMiniProfile.php')
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Post by Christopher »

You might want to look here http://ajax.phpmagazine.net/, particularly in the AHAH section.
(#10850)
Post Reply