/    Sign up×
Community /Pin to ProfileBookmark

Ajax ! help me plz

I”m stucked now

i”m building a web application that i want to implement ajax to improve the performence. Now problem is i actived the javascript to ask the server side script (in php) response me html code then i use .innerHTML to insert its inside a div tag which the id chosen … it worked well.

But now i want to active java scripts again with another function to connect to server side to get another html response code to insert in the previous html reponse code … and prob show up here is the document.getElementById(id) can”t find the assign div tag by id because some reason ( i guess because the previous return html code generate by server side and java script which should not appear in the html code so the document.getElementById can”t find out that div becuase that div tag actually not existed in the html code orginal (view by view source) ).

So in general my question is … is there a way to let us working with the responseText from server side and we can connect to server side to get new response and implement its on previous response base on ajax idea …

here is my buggy java scrips hope you can get more clear picture about what i”m asking right now

[CODE]
var xmlHttp;
var globalObj;
createXMLHttpRequest();
function createXMLHttpRequest()
{
if (window.ActiveXObject)
{
xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”);
}
else if (window.XMLHttpRequest)
{
xmlHttp = new XMLHttpRequest();
}
}
/*
function createXML()
{

var options = document.getElementById(“catID”).childNodes;
var option = null;
var theValue;
for(var i=0; i<options.length; i++)
{
option = options[i];
if(option.selected)
{
theValue = option.value;
}
}

return theValue;
}
*/
function show_cat_list()
{
//createXMLHttpRequest();

//var catID = createXML();

xmlHttp.open(“GET”,’do.php?act=show’, true);
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”);
xmlHttp.send(null);
}
function show_cat(catID)
{
//createXMLHttpRequest();

//var catID = createXML();

xmlHttp.open(“GET”,’do.php?act=show&catID=’+catID, true);
xmlHttp.onreadystatechange = handle;
xmlHttp.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”);
xmlHttp.send(null);
}

function handleStateChange()
{
if(xmlHttp.readyState == 4)
{
if(xmlHttp.status == 200)
{
//parseResults();
//editResponse ();
globalObj = xmlHttp.responseText;
html_response();
}
}
}
function handle()
{
if(xmlHttp.readyState == 4)
{
if(xmlHttp.status == 200)
{
//parseResults();
//editResponse ();
html_response1();
}
}
}
function parseResults()
{
var responseDiv = document.getElementById(“returnBody”);
if(responseDiv.hasChildNodes())
{
responseDiv.removeChild(responseDiv.childNodes[0]);
}
var responseText = document.createTextNode(xmlHttp.responseText);
responseDiv.appendChild(responseText);

//alert(xmlHttp.responseXML);
//alert(responseText);
}
function editResponse ()
{
var response = xmlHttp.responseText;

if (response.indexOf(“ERRNO”) >= 0
|| response.indexOf(“error:”) >= 0
|| response.length == 0)
throw(response.length == 0 ? “Server error.” : response);

responseXml = xmlHttp.responseXML;
xmlDoc = responseXml.documentElement;
title = xmlDoc.getElementsByTagName(“title”)[0].firstChild.data;
//alert(title);

var responseDiv = document.getElementById(“serverResponse”);
if(responseDiv.hasChildNodes())
{
responseDiv.removeChild(responseDiv.childNodes[0]);
}

var responseText = document.createTextNode(title);
responseDiv.appendChild(responseText);
//responseDiv.appendChild(“<p>”+title+”</p>”);
}
function html_response ()
{
var obj = document.getElementById(“returnBody”);
obj.innerHTML = xmlHttp.responseText;
//obj.innerHTML = “hello world”;
}
function html_response1 (catID)
{

//globalObj = globalObj.documentElement;
alert(globalObj);
if (globalObj.getElementById(“catID_”+catID))
{
alert(“cool”);
}
else
{
alert(“****”);
}

var obj = document.getElementById(“catID_”+catID);
//obj.innerHTML = xmlHttp.responseText;
obj.innerHTML = “hello world”;
}
[/CODE]

to post a comment
JavaScript

6 Comments(s)

Copy linkTweet thisAlerts:
@KorOct 26.2006 — The problem is othewise. [B]innerHTML[/B] is not a standard DOM method (even it is now crossbrowser), thus it is not really append an element onto the general DOM tree structure. You should use DOM methods to create that div and populate it :createElement(), createTextNode(), appendChild(), setAttribute()... and so on.
Copy linkTweet thisAlerts:
@Infernal_AngelauthorOct 26.2006 — so you mean when i use the server side to return the value should not return html code but XML instead and generate the html structure from client side with javascript ...

because the site have this structure example like this

catergory root

---sub cat

------sub cat

------sub cat

---------sub cat

------------Items

---sub cat

------sub cat

that mean when i click con root all the second layer sub cat will show click on random sub cat all his child will show up as third layer. Ofcourse i don't want to load the whole tree structure because i had about >1000 items on database. so i tho of ajax as a solution to load a small piece of data without reload the whole stuff and its can keep the tree structure look clear and cool. I will give your suggest a try but still scare about the whole code i had to write because the complicated of the tree structure. So there no way around ?
Copy linkTweet thisAlerts:
@KorOct 26.2006 — not really. One solution could be

Send the AJAX request to a server-side application (say php). This application will interogate DB, grab the desired data and return the response as a string, with data separated by separators, say | or # ... Now javascript will get that string, split it upon separator and build this way an array. Javascript also will create new elements (divs, cells, whichever...) and pupulate those elements with data from that array.

You can also simple request for the whole XML object (despite the 1000 items, XML is an easy object to be received) and use DOM methods to get data, build the HTML elements and populate them with those data.
Copy linkTweet thisAlerts:
@Infernal_AngelauthorOct 26.2006 — thanks the whole picture much more clear to me as you say innerHTML not a standard DOM that also explain why i can't recive that tag by id cuz the element not append to structure
Copy linkTweet thisAlerts:
@KorOct 26.2006 — I though you have already known that you can receive data in 2 main ways, as a string when you ask for [B]responseText[/B], or as an XML DOM structured object when you ask for [B]responseXML[/B]
Copy linkTweet thisAlerts:
@KorOct 26.2006 — well, there is a possibility to let XML itself sending the selected data (the method is called RICO, if I remeber well) but that means you must return the name of the javascript function to call to handle the response within the XML response itself, which might be a dangerous method, i reckon...

Still, if you are interesed, see also:

http://www.xml.com/pub/a/2005/02/09/xml-http-request.html
×

Success!

Help @Infernal_Angel spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.5,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...