AJAX Issue

[whreed]

I am using AJAX XMLhttprequest to request another page on form submit
and I am loading that page into a span tag. My issue is that I have
more js in the called page that loads a calendar on click of a text
box. This calendar never loads in my page but if I call the page by
itself in a new window javascript works fine, any ideas? See Below
when you call index and click the button the page does not show the
alert, when you call getcall straight the alert shows fine.


index.asp
<form name="new" method="Post"
action="javascript:get(document.getElementById('new'),'new');">
<input type="Submit" name="Submit" value="Enter New Call"><br>
</form>
<span name="call_results" id="call_results"></span>

getcall.asp
<SCRIPT type="text/javascript">
alert("here");
</SCRIPT>

js.
/* AJAX on form submit */
var http_request = false;
function makePOSTRequest(url, parameters) {
http_request = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType('text/xml');
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) {
alert('Cannot create XMLHTTP instance');
return false;
}

http_request.onreadystatechange = alertContents;
http_request.open('POST', url, true);
http_request.setRequestHeader("Content-type",
"application/x-www-form-urlencoded");
http_request.setRequestHeader("Content-length", parameters.length);
http_request.setRequestHeader("Connection", "close");
http_request.send(parameters);
toggleT('call_mainscreen','h')
}

function alertContents() {
//if (http_request.readyState == 4) {
//if (http_request.status == 200) {
//alert(http_request.responseText);
// result = http_request.responseText;
// document.getElementById('call_results').innerHTML = result;

//} else {
// alert('There was a problem with the request.');
//}
//}
if (http_request.readyState == 4) {
strResponse = http_request.responseText;
switch (http_request.status) {
// Page-not-found error
case 404:
alert('Error: Not Found. The requested URL ' +
strURL + ' could not be found.');
break;
// Display results in a full window for server-side errors
case 500:
handleErrFullPage(strResponse);
break;
default:
// Call JS alert for custom error or debug messages
if (strResponse.indexOf('Error:') > -1 ||
strResponse.indexOf('Debug:') > -1) {
alert(strResponse);
}
// Call the desired result function
else {
result = http_request.responseText;
document.getElementById('call_results').innerHTML = result;
}
break;
}
}
}
function handleErrFullPage(strIn) {

var errorWin;

// Create new window and display error
try {
errorWin = window.open('', 'errorWin');
errorWin.document.body.innerHTML = strIn;
}
// If pop-up gets blocked, inform user
catch(e) {
alert('An error occurred, but the error message cannot
be' +
' displayed because of your browser\'s pop-up
blocker.\n' +
'Please allow pop-ups from this Web site.');
}
}
function get(obj,itype) {
var poststr = "type=" + itype + "&value=test";
makePOSTRequest('getcall.asp', poststr);
}

 

[Randy Webb]

(e-mail address removed) said the following on 6/26/2006 2:43 PM:

I am using AJAX XMLhttprequest to request another page on form submit
and I am loading that page into a span tag. My issue is that I have
more js in the called page that loads a calendar on click of a text
box. This calendar never loads in my page but if I call the page by
itself in a new window javascript works fine, any ideas? See Below
when you call index and click the button the page does not show the
alert, when you call getcall straight the alert shows fine.

Inserting script code via innerHMTL won't execute it (only in NS6 did
that work). If you want to execute script code, you are going to have to
load it separately, use createElement to create a script block, then
appendChild to append that script block to a node for it to execute in
any modern browser.

 

[wreed]

Inserting script code via innerHMTL won't execute it (only in NS6 did
that work). If you want to execute script code, you are going to have to
load it separately, use createElement to create a script block, then
appendChild to append that script block to a node for it to execute in
any modern browser.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Temporarily at: http://members.aol.com/_ht_a/hikksnotathome/cljfaq/
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

Randy, is there a way I can do it with the innerHTML that I am passing
instead of using the create element? I create a calendar object in the
calling page and this is not behaving at all....I was trying to do this
but it was not working...

When I populate the span I am using....

result = http_request.responseText;
result = execJS(result);
document.getElementById('call_results').innerHTML = result;

exec function...
function execJS(node) {
var st = node.getElementsByTagName('SCRIPT');
var strExec;
for(var i=0;i<st.length; i++) {
strExec = st.text;
try {
eval(strExec);
} catch(e) {
alert(e);
}
}
}

It hiccups on the getElementsByTagName I know why but what else can I
use, when i alert node string it has all of the page that I am using to
populate the page but I cannot get this final piece to work, I have
been reading that I can use the eval function in this case here -
http://microformats.org/wiki/rest/ahah#Executing_Javascript

Any ideas?

 

[wreed]

right after I wrote the above I had a major breakthrough....

result = http_request.responseText;
document.getElementById('call_results').innerHTML = result;
var d=call_results.getElementsByTagName("script");
for(var x=0;x<d.length;x++) {
with(window) {
eval(d[x].text);
}
}

Works like a charm.

 

[wreed]

For now. I can just about guarantee that you will eventually encounter
problems because of using eval()

Any particular reason you don't want to do it the way Randy suggested,
which is the BEST way to handle it?

This is the js I have
<SCRIPT type="text/javascript" id="calendar_creation">
Calendar.setup({
inputField : "callback",
ifFormat : "%m/%d/%Y %I:%M %p",
showsTime : true,
weekNumbers : false,
timeFormat :"12"
});
</SCRIPT>

My js skills are lacking and I tried to create the element and append
the child element but it seemed to not work....thats why I did not
implement his.

 

[wreed]

var d = call_results.getElementsByTagName("script")
for (var x=0;x<d.length;x++){
var newScript = document.createElement('script');
newScript.type = "text/javascript";
newScript.text = d[x].text;
document.getElementById('call_results').appendChild(newScript);
}
--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Temporarily at: http://members.aol.com/_ht_a/hikksnotathome/cljfaq/
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

I tried your code but it hangs my browser, I tried stepping through it
with interdev and I was able to but not sure why it hung up....

Can I ask what problems eval will cause me?

 

[Richard Cornford]

wreed wrote:

Can I ask what problems eval will cause me?

As - eval - can do anything and everything that javascript can do it is
capable of causing all possible problems, with the additional problem
that errors originating with - eval - may be pinpointed to the - eval -
call responsible but they will not be explicit about the actual
error-producing code.

Richard.

 

[wreed]

var d = call_results.getElementsByTagName("script")
for (var x=0;x<d.length;x++){
var newScript = document.createElement('script');
newScript.type = "text/javascript";
newScript.text = d[x].text;
document.getElementById('call_results').appendChild(newScript);
}
--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Temporarily at: http://members.aol.com/_ht_a/hikksnotathome/cljfaq/
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

Randy I ended up having to add an x = x + 1 to the for loop as it was
getting suck in an endless loop, not sure why x++ was not working in
the for syntax...but now I am using appendChild, curious in this case
its ok, but how do I deal with an onclick?

 

[Lasse Reichstein Nielsen]

Randy Webb wrote:

Randy I ended up having to add an x = x + 1 to the for loop as it was
getting suck in an endless loop, not sure why x++ was not working in
the for syntax...

The collection stored in the variable "d" is a live collection of
all script elements inside the "call_results" element. The loop
increments "x" until it reaches "d.length", but each loop also adds
another script element inside "call_results", so "d.length" is also
incremented, and the loop never ends.

By incrementing "x" twice, you do make the loop end, but you also
skip every other script element. Instead you could fix the end
point before starting the loop:

for(var x=0,n=d.length; x < n; x++) {

/L

 

[Randy Webb]

wreed said the following on 7/6/2006 4:01 PM:

var d = call_results.getElementsByTagName("script")
for (var x=0;x<d.length;x++){
var newScript = document.createElement('script');
newScript.type = "text/javascript";
newScript.text = d[x].text;
document.getElementById('call_results').appendChild(newScript);
}

Randy I ended up having to add an x = x + 1 to the for loop as it was
getting suck in an endless loop, not sure why x++ was not working in
the for syntax...but now I am using appendChild, curious in this case
its ok, but how do I deal with an onclick?

One of two ways:

Method 1:
Define all your onclicks in a script block:

<script type="text/javascript">
document.getElementById('someElement').onclick = function(){....}
</script>

So that appendChild will execute it.

That would be the most reliable way to do it.

Method 2:

Try to parse the HTML string and dig out the on* event handlers and then
apply them yourself. That would get extremely messy before you ever got
started.