How do I pass this element as a parameter?

@jroehlAug 20.2007

On the last line of this code an element DIV1 is being evaluated by getElementById(). How can I pass this as a variable parameter?

Statechanged() errors if you try to pass a parameter with it.

Thanks
Jeff Roehl

[code]var xmlHttp

function showCustomer(str) { xmlHttp=GetXmlHttpObject(); if (xmlHttp==null) { alert (“Your browser does not support AJAX!”); return; } var url=”http://onionsalad.com/search.fwx”; url=url+”?”+str; url=url+”&sid=”+Math.random(); xmlHttp.onreadystatechange=stateChanged; xmlHttp.open(“GET”,url,true); xmlHttp.send(null); }

function stateChanged() { if (xmlHttp.readyState==4) { document.getElementById(“DIV1”).innerHTML=xmlHttp.responseText; } }

to post a comment

JavaScript

7 Comments(s) _↴

@mrhooAug 20.2007 — #You have to pass innerHTML a string deconstructed from the object into its html representation. Easiest way is to append it to an empty div and pass the div's innerHTML back for the response text.

@jroehlauthorAug 20.2007 — #>> append it to an empty div and pass the div's innerHTML

Thanks for your answer, I am sure it is spot on.

That sounds more complicated than the original question.

I wouldn't even know where to begin implementing your answer.

>> append it to an empty div

How do I do this?

>> pass the div's innerHTML back for the response text

Stumped again.

Does getElementById() take a variable as a parameter?

Thanks

Jeff Roehl

@toicontienAug 20.2007 — #Change this line:
xmlHttp.onreadystatechange=stateChanged;
To this code:
xmlHttp.onreadystatechange=getStateChanged('DIV1');
Change this block of code from:

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

To this:

function getStateChanged(el)
 {
 if (typeof(el) === 'string')
 {
 el = document.getElementById(el);
 }
 return function() {
 if (xmlHttp.readyState==4)
 {
 el.innerHTML = xmlHttp.responseText;
 }
 };
 }

This utilizes what's called a function closure. The getStateChanged function returns a function object, which is called by the XML HTTP request object. Any data you pass to the getStateChanged function becomes available to the function object returned by getStateChanged. This is handy when the scope in which a function executes gets changed, like in the onreadystatechange function of an XML HTTP request.

The getStateChanged function can take either an HTML tag Id or a node reference to an HTML tag. These two bits of code do the same thing:
xmlHttp.onreadystatechange=getStateChanged('DIV1');

var updateDiv = document.getElementById('DIV1');
 xmlHttp.onreadystatechange=getStateChanged(updateDiv);

@jroehlauthorAug 20.2007 — #WooHooo!

I am going to try this. If I can pass the URL parameter(s) and the name of the <div> both as variables then I can just start tossing stuff from the servers database into the html just about anywhere at will.

I changed a couple of things, do you think the following will work?

First I pass showcustomer() 2 variables, adding str2. Then I pass getStateChanged the str2. Do you think this will work?

I am trying to make the whole function <div> name and URL passed parameters neutral so that I can just start tossing server data into uniquely named <div>'s. Does this make any sense?

If this works, email me your address so I can send you a check!

You rock!

Thanks

Jeff

var xmlHttp

function showCustomer(str,str2)

{

xmlHttp=GetXmlHttpObject();

if (xmlHttp==null)

{

alert ("Your browser does not support AJAX!");

return;

}

var url="http://onionsalad.com/search.fwx";

url=url+"?"+str;

url=url+"&sid="+Math.random();

xmlHttp.onreadystatechange=getStateChanged(str2);

xmlHttp.open("GET",url,true);

xmlHttp.send(null);

}

function getStateChanged(el)

{

if (typeof(el) === 'string')

{

el = document.getElementById(el);

}

return function() {

if (xmlHttp.readyState==4)

{

el.innerHTML = xmlHttp.responseText;

}

};

}

@toicontienAug 21.2007 — #Try this bit of code out then:

var xmlHttp
 
 
 /**
 * @class     window
 *
 * @function  showCustomer
 *    Creates an AJAX request and fails silently if the browser doesn't
 *    support the necessary technology.
 *
 * @param   str (string, required)
 *    The value to the sent over the network.
 *
 * @param   el (variable, required)
 *    HTML tag Id, or node reference to the HTML tag whose innerHTML should
 *    be updated when the AJAX call is successful.
 *
 * @return  boolean
 *    True is returned if the browser supports AJAX and the request was sent
 *    successfully, and false is returned if AJAX is not supported.
 */
 function showCustomer(str, el) {
 xmlHttp = GetXmlHttpObject();
 if (xmlHttp == null) {
 return false;
 }
 var url="http://onionsalad.com/search.fwx";
 url = url+"?"+str;
 url = url+"&amp;sid="+Math.random();
 xmlHttp.onreadystatechange = getStateChanged(el);
 xmlHttp.open("GET", url, true);
 xmlHttp.send(null);
 return true;
 }
 
 
 /**
 * @class     window
 *
 * @function  getStateChanged
 *    Returns the function object executed by the XMLHttpRequest object's
 *    onreadystatechange event.
 *
 * @param   el (variable, required)
 *    Id or node reference to the HTML tag whose innerHTML should be updated.
 *
 * @return  function
 *    The function object to be executed when the XMLHttpRequest object's
 *    ready state has changed.
 */
 function getStateChanged(el) {
 if (typeof(el) === 'string')   {
 el = document.getElementById(el);
 }
 return function() {
 if (xmlHttp.readyState==4)
 {
 el.innerHTML = xmlHttp.responseText;
 }
 };
 }

@jroehlauthorAug 21.2007 — #Send your snailmail address to jroehl2 at yahoo.com and I will send you a check.

@toicontienAug 21.2007 — #No need to. ? I haven't created anything unique. Enjoy and keep learning!

Also in #JavaScript _↴

SELECT properties question Hide Images - HELP Quiz, user must not switch to another window

Success!

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

Tweet This

How do I pass this element as a parameter?

7 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

How do I pass this element as a parameter?

7 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

7 Comments(s) _↴

Also in #JavaScript _↴