AJAX – .InnerHTML ok, but how to set Javascript variable on HTML page instead?

@Deborah805Feb 20.2008

I have a Javascript on my .html page (can’t be asp). From that Javascript I am calling a function in a .js page. The function I’m calling uses AJAX to get a value from an .asp page. This all works fine. I can dynamically replace DIV text on my .html page. So I think this is all working the way it was intended. Now my problem. Instead of replacing the DIV text, I need to set a variable in my Javascript on my .html page. Question 1: Is there a way to set my Javascript variable to my dynamically changed DIV text OR Question2: Is there a way to return the resulting text to set a Javascript variable instead of simply setting the DIV text using .innerHTML when my ready state has changed to 4?

to post a comment

JavaScript

18 Comments(s) _↴

@mrhooFeb 20.2008 — #var txt=xmlHTTPRequestObject.responseText;

@Deborah805authorFeb 20.2008 — #The txt variable is located in the html document, where it's already been defined, not in the function called, located in a .js page, with the AJAX statements and other functions. In other words, my variable on my .html page would need to be set to the same value as the txt variable that you've defined and set in your solution. Any ideas?

@KorFeb 20.2008 — #I have a Javascript on my .html page (can't be asp). From that Javascript I am calling a function in a .js page. The function I'm calling uses AJAX to get a value from an .asp page. This all works fine. I can dynamically replace DIV text on my .html page. So I think this is all working the way it was intended. Now my problem. Instead of replacing the DIV text, I need to set a variable in my Javascript on my .html page. Question 1: Is there a way to set my Javascript variable to my dynamically changed DIV text OR Question2: Is there a way to return the resulting text to set a Javascript variable instead of simply setting the DIV text using .innerHTML when my ready state has changed to 4?[/QUOTE]
AJAX responses are of to types, responseText (the response is a string) and responseXML (the response is an XML object)

Now, if I understood well your problem, you want to transform the response into a javascript structural object. Now there are several methods to do that, according to the nature of your response (XML structured, JSON structured, HTML structured, delimited string, simple string...). What kind of response do you have?

@Deborah805authorFeb 20.2008 — #The result I'm wanting to pass back is a text string.

I'm not sure you have a clear understanding of the problem - let me provide some more detail:

The function I call from my .html page is in a .js file. The function get's the data I need using AJAX, via an .asp page, and on result state 4 calls another function in the same .js file that performs some actions. One of those actions can be setting the text of a DIV tag in my calling .html page using .innerHTML, which works. However, what I can't figure out how to do is set a javascript variable in the javascript right below where the function was called from on the .html page with the resulting text.

If I use .innerHTML and change text in a DIV tag, which as I've said works, and then set my variable to the value (text) of that id, I get the original text - not the text I changed it to using AJAX. I think if I could make this work it might be the answer.

Another possible answer would be if I could return from the called function at the right time, sending back my text (return xmlHttp.response...). But I can't seem to figure out where I can do that, since the state has to be 4 to peform my actions and once it's 4 I'm not actually able to 'return' from the function I called.

Any additional help or suggestions would be appreciated - Thanks!!

@ScriptageFeb 20.2008 — #As I understand it you have problems transfering variables from one scope to another. Take this example:

<html>

<head>

<title>Setting JS variable</title>

<script>

var txt = "Hello this is some txt";

</script>

</head>

<body>

<script src="functions.js"></script>

<script>

alert(get_value());

set_value("This text is different");

alert(get_value());

</script>

</body>

</html>

---------- functions.js ----------

function get_value(){

return txt;

}

function set_value(t){

var txt = t;

}

---------------------------------

The result is

"Hello this is some text"

"Hello this is some text"

This is because [B]var[/B] declares a local variable, ie, the variable is only accessible in it's current scope (function, block etc).

Change the set_value function to:

function set_value(t){

[B]txt = t;[/B]

}

and you will see:

"Hello this is some text"

"This text is different"

Regards

Carl

@Deborah805authorFeb 20.2008 — #Scriptage - Thank you for the reply - However, my issue seems to be related to the fact that I'm needing to use AJAX methodology to get the data I need for the javascript on my .html page. Please read my prior post (I was typing it in response to someone else while you were sending yours I think). If you're familiar with AJAX and how the most basic example of that works (all over the web), then maybe you can help me with my problem. If not, thank you for your input in any case.

@ScriptageFeb 20.2008 — #I'm sure I can help, I'm at work at the moment, I will be back on the boards in about 2 hours all being well then I will be able to dedicate a little more time.

Regards

Carl

@ScriptageFeb 20.2008 — #Could you post your html and your .js file please? Could you also indicate which variable you would like to update please.

Regards

Carl

@KorFeb 20.2008 — #So: you receive a simple text string, you change the innerHTML of a DIV with that text but later, when you try to find that text using javascript reference you get the old text?

@Deborah805authorFeb 20.2008 — #Kor - Yes and it happens right away. I can create the DIV tag either in an existing table on the page or right in the same Javascript itself (on the HTML page) using document.write and either way I can see the text displayed on the page change. However, when I get the value of the DIV id to set my javascript variable it's the old value.

@Deborah805authorFeb 20.2008 — #Coding Sample of my problem:

HTML Page:

In Head tags - src .js page:

<script language="JavaScript" src="http://www.dev.lynda.com/htmlOmnitureTracking.js"></script>

In Body:

<script language="JavaScript">

OmnitureTracking();

document.write ('<div id="test_pagename">'+pagename+'</div>');

s.pageName=pagename

Description of Body code above: In Javascript tags, a function in the .js page is called, The function called uses AJAX to change the pagename in the DIV. This works fine.

Problem: Instead of, or in addition to, changing the text in the DIV, I need to set the value of the variable s.pageName.

I think the reason for my problem is that it's not actually 'returning' from the function, so the variable won't get set to pagename.

If I set the variable to the value of the id of the DIV tag I get the original pagename, not what it was changed to using AJAX. If I could set it to the current DIV text I think my problem would be solved.

Also, I can set to return a hard coded result from the function (pagename=OmnitureTracking()) and the variable does get set. However, I need to pull the pagename from a SQL table (reason for using AJAX), so this can't be hard coded. Because this change occurs when the change state is set to 4 (AJAX), the value returned (Return pagename) from the OmnitureTracking function doesn't get set. If there's a way to get this resulting text (when state change = 4) and Return from the OmnitureTracking function then this would solve my problem too.

Please help if you can!!

@ScriptageFeb 21.2008 — #Please can you post your entire code, or at least the part in your AJAX code where you change the div's contents and attempt to alter the variable.

We need to be able to see exactly what you are trying to acheive; for example:

[CODE]
 
 OmnitureTracking();  // Are you trying to alter the properties of a div that has not been created yet?
 document.write ('<div id="test_pagename">'+pagename+'</div>'); // Created after the call to OmnitureTracking();
 s.pageName=pagename // what is the object "s"?
 
 [/CODE]

A better way might be to use DOM to create your elements instead of document.write.

It seems to me like the logic of the code goes like this:

- OmnitureTracking();

- Retrieve data using Ajax

- Set the innerHTML of test_pageName to Ajax result

- Set s.pagename to Ajax result

- Create div test_pageName

- Set s.pageName to value of pageName (possibly overriding OmnitureTracking's attempt at setting the variable)

However, this should have thrown errors. It really does look like illogical code.

Please can you post an example with correct logic.

Regards

Carl

@Deborah805authorFeb 22.2008 — #Creating the DIV in the javascript after the call to the function isn't a problem - the resulting text replaces pagename, so that's fine. So the function I'm calling is doing what is intended. However, the variable s.pageName is what needs to get set. I've tried using .innerHTML to set it to the new value of the DIV id, which is what I thought might work, but it sets it to the original value. I've tried 'returning' from the function in several different places, but once the change state is set to 4 the DIV text is changed, an Alert message can be displayed, but how do I get the resulting text back to the script in my .html page and set the s.pageName variable with it? That's the problem. I think the person who solves this will probably have special AJAX knowledge and know how I can return a value from my function when the change state is 4 or will be someone who's .html is less rusty than mine and knows how I can get the value dynamically into a field on my .html page and then pull it to store in my variable.

@ScriptageFeb 22.2008 — #You have two options:

1) Post your [B]entire[/B] code and we can help you. Trust me this isn't as big a problem as you think it is.

2) Don't post anything more and be stuck.

Using your "example code" I get errors when I try and create anything like what you are trying to acheive in the way you are trying to do it.

Post your code and it will probably take about 5 minutes to sort out.

Regards

Carl

@ScriptageFeb 22.2008 — #

<i>
 </i>&lt;html&gt;&lt;body&gt;
 &lt;script type="text/javascript"&gt;
 pagename = "This is some text";
 function ajax(){
 var xmlHttp;
 
 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); 
 
 xmlHttp.onreadystatechange=function()
 {
 if(xmlHttp.readyState==4)
 {
 
 <i>	</i>pagename = xmlHttp.responseText;
 <i>    </i>  }
 <i>    </i>}
 xmlHttp.open("GET","pagename.txt",true);
 xmlHttp.send(null);  }
 
 &lt;/script&gt;
 &lt;script&gt;
 ajax();
 document.write ('&lt;div id="test_pagename"&gt;'+pagename+'&lt;/div&gt;');
 s.pagename = pagename;
 
 alert(s.pagename);
 &lt;/script&gt;
 &lt;/body&gt;
 &lt;/html&gt;

------- pagename.txt -----------

This text is different

--------------------------------

Try that. Is that what you are trying to do?

If not then post your code as we need to know what you are doing wrong to be able to rectify your mistakes.

Regards

Carl

@KorFeb 22.2008 — #[B]Scriptage[/B], that is IE only. And: your document needs a DOCTYPE and a HEAD. The code should be better neste in the HEAD, not in the BODY. Moreover, IE needs several arguments, according to the age of browser and nature of possible ActiveX objects:

'Microsoft.XMLHTTP', 'MSXML2.XMLHTTP.5.0',

'MSXML2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP'

@ScriptageFeb 22.2008 — #I know! This is an example only. There is no point writing out all the cross browser compatible stuff, doctype etc when we are just trying to establish where the problem lies in her coding.

Regards

Carl

@yehellMar 28.2008 — #Dear Deborah805,now i have a same problem with you.

Firstly,I write a template page made of some <div>.then i use ajax to request other pages to write back to this template page.(like this:document.getElementById(div_content_id).innerHTML=xmlHttp.responseText?

but in the template page,the <div> couldn't use itself's javasript .

Could you help me? I will waiting for your reply. thank you !!!

Also in #JavaScript _↴

Changing sides of a shape (polygon)could somebody help me out?Open and close tab for frame???

Success!

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

Tweet This

AJAX – .InnerHTML ok, but how to set Javascript variable on HTML page instead?

18 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

AJAX – .InnerHTML ok, but how to set Javascript variable on HTML page instead?

18 Comments(s) ↴

Also in #JavaScript ↴

Success!

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

Social

Version

18 Comments(s) _↴

Also in #JavaScript _↴