Jump to content

div id are not working but in the end they are stated right

michael1991j

By michael1991j
in JavaScript

 Share

Recommended Posts

michael1991j Newbie

michael1991j

Posted
Posted

--------------------------------------------------------------------------------hi i am trying to build a ajax based flash funny movie viewerthe goal in making this viewer was to make it so the user would never need to refresh his or her page sorry it is hard to explain the problem without showing the code firsthere is the link to see it http://www.licut.com/movie/index.phphere is the ajax code 

Quote:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><script language="javascript"> var xmlHttp;function getlist(){ xmlHttp=GetXmlHttpObject();if (xmlHttp==null){alert ("Your browser does not support AJAX!");return;} var url="./list.php";url=url+"?sid="+Math.random();xmlHttp.onreadystatechange=stateChanged;xmlHttp.open("GET",url,true);xmlHttp.send(null);}function stateChanged() { if (xmlHttp.readyState==4){ document.getElementById("main").innerHTML=xmlHttp.responseText;}}function GetXmlHttpObject(){var xmlHttp=null;try{// Firefox, Opera 8.0+, SafarixmlHttp=new XMLHttpRequest();}catch (e){// Internet Explorertry{xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");}catch (e){xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");}}return xmlHttp;}// JavaScript Documentvar xmlHttp;function getheader(movieid, user){ xmlHttp=GetXmlHttpObject();if (xmlHttp==null){alert ("Your browser does not support AJAX!");return;} var url="./header.php";url=url+"?movieid="+ movieid;url=url+"&user="+ user;url=url+"&sid="+Math.random();xmlHttp.onreadystatechange=stateChanged;xmlHttp.open("GET",url,true);xmlHttp.send(null);}function stateChanged() { if (xmlHttp.readyState==4){ document.getElementById("topmenu").innerHTML=xmlHttp.responseText;}}function GetXmlHttpObject(){var xmlHttp=null;try{// Firefox, Opera 8.0+, SafarixmlHttp=new XMLHttpRequest();}catch (e){// Internet Explorertry{xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");}catch (e){xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");}}return xmlHttp;}</script><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><script language="javascript">function onload2(){getheader(1,"michael");getlist();}</script></head><body onload="onload2()"><div id="targetDiv">l</div><div id="topmenu">.loading...</div><div id="sidebar">loading..</div><div id="main">loading....</div> -</body></html><link href="/movie/movie.css" rel="stylesheet" type="text/css" />

now i can state at my problem if you look at the body it state an onload="" where it calls the function onload2 onload2 call the two ajax function the first one is a header that get the date from a php file same thing as getlist know in each of these ajax function after the data is retrieved it goes into these div here is the code that put the retrieved info into these div idsfor getheader()Quote:

document.getElementById("topmenu").innerHTML=xmlHttp.responseText;

for getlist()

document.getElementById("main").innerHTML=xmlHttp.responseText;

if you see these div id are stated correctly but if you look at the link example on top of the source code you would see that getlist() has loaded right in topmenu instead of div id mianthat is my problem i do not understand why this is occuring i am a newb to ajaxsorry for the spellingand i have tried to state my question the best as i can if you need any info just reply thank you in advance

Link to comment
Share on other sites
jesh Devoted Member

jesh

Posted
Posted

Your first AJAX call:

var url="./list.php";url=url+"?sid="+Math.random();xmlHttp.onreadystatechange=stateChanged;xmlHttp.open("GET",url,true);xmlHttp.send(null);

is returning an entire page - <html></html> tags and all. When you are setting this as the innerHTML for the div, you end up having multiple <html></html> elements on the page. That's one of the problems you'll have to fix.Your second AJAX call: (http://www.licut.com/movie/header.php?movieid=1&user=michael&sid=0.8234120877594866)

var url="./header.php";url=url+"?movieid="+ movieid;url=url+"&user="+ user;url=url+"&sid="+Math.random();xmlHttp.onreadystatechange=stateChanged;xmlHttp.open("GET",url,true);xmlHttp.send(null);

also returns an entire page - <html></html> tags and all. Additionally, in this AJAX response, there is the following:

<title>Untitled Document</title><script language="javascript"><script language="javascript">var xmlHttp
That extra <script> tag is causing some additional problems.Typically, when you are using AJAX, rather than returning an entire page worth of content, you'll only want to return specific text (or XML). Rather than return the entire page, you want, for example, to return only the links and images that you want to be inside that div.
Link to comment
Share on other sites
michael1991j Newbie

michael1991j

Posted
  • Author
Posted

thank you for the answer i fix all those problem i have thougholy check everything cleared all full page elements cleared all external javascript but i am sorry but the data is still not going in the stated divid what if it somthing to do with the functions i dont know i am stumped :):) i have just moded everything not move it around so feel free to look at my code to see if i did something wrong sorry and thank you have been a big help personaly i have nobody in my local city oxford alabama to help me find my bug , teach me , and i am to young to take a course on this but you have helped me somewhat in telling me these bugs i am almost positive that i have cleared them thank you michael roberts

Link to comment
Share on other sites
sridhar Newbie

sridhar

Posted
Posted
thank you for the answer i fix all those problem i have thougholy check everything cleared all full page elements cleared all external javascript but i am sorry but the data is still not going in the stated divid what if it somthing to do with the functions i dont know i am stumped :):) i have just moded everything not move it around so feel free to look at my code to see if i did something wrong sorry and thank you have been a big help personaly i have nobody in my local city oxford alabama to help me find my bug , teach me , and i am to young to take a course on this but you have helped me somewhat in telling me these bugs i am almost positive that i have cleared them thank you michael roberts
im not sure, just try this.use<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> tag instead of <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Thank you.
Link to comment
Share on other sites
jesh Devoted Member

jesh

Posted
Posted

It looks like your readystatechange event handler for the AJAX call in the getlist() function and the one for the AJAX call in the getheader() function are called the same - stateChanged. Further, it looks like you have declared stateChanged twice. This makes it so that when you call getlist() and when you call getheader(), both will execute the second stateChanged code:

function stateChanged(){if (xmlHttp.readyState==4){document.getElementById("topmenu").innerHTML=xmlHttp.responseText;}}

Try renaming your first stateChanged function to something like listStateChanged and the second one headerStateChanged. Then, in your getlist function change the code to look like this:

xmlHttp.onreadystatechange=listStateChanged;

And in your getheader function, change it to look like this:

xmlHttp.onreadystatechange=headerStateChanged;

I hope this helps. :)

Link to comment
Share on other sites
jesh Devoted Member

jesh

Posted
Posted

I think you pretty much have it. I've just made some minor changes:

var listRequest;var headerRequest;function getlist(){    var listRequest = GetXmlHttpObject();    if (!listRequest)    {        alert ("Your browser does not support AJAX!");        return;    }    var url="./list.php";    url=url+"?sid="+Math.random();    listRequest.onreadystatechange=listStateChanged;    listRequest.open("GET",url,true);    listRequest.send(null);}function listStateChanged(){    if (listRequest.readyState==4)    {        document.getElementById("main").innerHTML=listRequest.responseText;    }}function getheader(movieid, user){    var headerRequest = GetXmlHttpObject();    if (!headerRequest)    {        alert ("Your browser does not support AJAX!");        return;    }    var url="./header.php";    url=url+"?movieid="+ movieid;    url=url+"&user="+ user;    url=url+"&sid="+Math.random();    headerRequest.onreadystatechange=headerStateChanged;    headerRequest.open("GET",url,true);    headerRequest.send(null);}function headerStateChanged(){    if (headerRequest.readyState==4)    {        document.getElementById("topmenu").innerHTML=headerRequest.responseText;    }}function GetXmlHttpObject(){    var xmlHttp=null;    try    {        // Firefox, Opera 8.0+, Safari        xmlHttp=new XMLHttpRequest();    }    catch (e)    {        // Internet Explorer        try        {            xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");        }        catch (e)        {            xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");        }    }    return xmlHttp;}

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...