Javascript problem in Ajax

Question

manofspider 0 Newbie Poster

15 Years Ago

var xmlhttp;
var parameters="";

function showHint(url) {
	
	var myform = document.forms[0];
	if (myform != undefined) {
		parameters = getRequestBody(myform);
	}
	
	if (url.length == 0) {
		document.getElementById("txtHint").innerHTML = "";
		return;
	}
	xmlhttp = GetXmlHttpObject();
	if (xmlhttp == null) {
		alert("Your browser does not support XMLHTTP!");
		return;
	}

	xmlhttp.onreadystatechange = stateChanged;
	xmlhttp.open("POST", url, true);

	xmlhttp.send(parameters);

}

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

function GetXmlHttpObject() {
	if (window.XMLHttpRequest) {
		// code for IE7+, Firefox, Chrome, Opera, Safari
		return new XMLHttpRequest();
	}
	if (window.ActiveXObject) {
		// code for IE6, IE5
		return new ActiveXObject("Microsoft.XMLHTTP");
	}
	return null;
}

function getRequestBody(oForm) {
    var aParams = new Array();

    for (var i=0 ; i < oForm.elements.length; i++) {
        var sParam = encodeURIComponent(oForm.elements[i].name);
        sParam += "=";
        sParam += encodeURIComponent(oForm.elements[i].value);
        aParams.push(sParam);
    }

    return aParams.join("&") + "&sid=" + Math.random();
}

test.jsp

this is test.jsp <br>

<script>
	
	function myfunc1() {
		alert("button click");	
	}


</script>

<input name="mybutton" value="Click to Alert" type="button" onclick="myfunc1();">

index.jsp

<html>
<head>

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

</head>
<body>

Test Ajax <br><br>

<input type="button" value="test.jsp" onclick="showHint('test.jsp');"/> 
<hr/>

<div id="txtHint" style="background:gray;height:200px;"></div>

</body>
</html>

Test Flow 1:

. When open page test.jsp directly
. Click on button "Click to Alert"
. Message "button click" appears

Test Flow 2:

. When open page index.jsp
. Click on button "test.jsp"
. Contents of DIV appears (contents of test.jsp)

Question (on Test Flow 2):

1. When Click on button "Click to Alert" at DIV section, but the message "button click" doesn't appears ?
2. Why JavaScript on test.jsp doesn't work ?
3. Is this JavaScript problem through Ajax ?
4. By keeping the function myfunc1() in test.jsp, how to make this function myfunc1() worked at side of index.jsp page?

Thanks in advance!

javascript

3 Contributors
12 Replies
274 Views
2 Weeks Discussion Span
Latest Post 14 Years Ago Latest Post by manofspider

Alxandr 5 Junior Poster in Training

15 Years Ago

At clienthint.js, before line 30, try adding: alert(xmlhttp.responseText);

Alxandr 5 Junior Poster in Training

14 Years Ago

So when you do alert(xmlhttp.responseText) you get the script-tags as well? Then try this:

function evalScript(html, div)
{
    var script = '';
    var newHtml = html.replace(/<script[^>]*>([\s\S]*?)<\/script>/gi, function() {
         scripts += arguments[1] + '\n'; return '';
    });
    div.innerHTML = newHtml;
    eval(scripts);
}

Edited 14 Years Ago by Alxandr because: n/a

Alxandr 5 Junior Poster in Training

14 Years Ago

clienthint.js

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

This is your stateChanged-function. What I suggest is that you replace it's content (inside the if) with

evalScript(xmlhttp.responseText, document.getElementById('txtHint'));

function evalScript(html, div)
{
    var script = '';
    var newHtml = html.replace(/<script[^>]*>([\s\S]*?)<\/script>/gi, function() {
         scripts += arguments[1] + '\n'; return '';
    });
    div.innerHTML = newHtml;
    eval(scripts);
}

What this function does is to strip the html of script-tags, then it takes the leftover html and insert it into div, and last it evaluates (run) the scripts.

Yes , alert(xmlhttp.responseText) will get the script-tags as well.
But I don't how to test with your function ? how to place and use it in my examples above?
var script = ''; // or var scripts = ''; ?

Variable-names has no effect on the execution of JavaScript as long as they're named legally.

arguments[1] // what is it ?

If you don't understand that I suggest you look up JavaScript, because it's something you as a webdeveloper should know. This line only mean the second argument of the function, but it's probably a good idea to get a understanding about how functions work in JavaScript.

HTH

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

chandru7 -1 Junior Poster in Training · Answer 1 · 2009-11-06T17:57:58+00:00

just put one debugger and check its executing or not

function myfunc1() {	
debugger;
alert("button click");		}

manofspider 0 Newbie Poster · Answer 2 · 2009-11-10T08:08:16+00:00

With or without the statement debugger, we still the same result:

Error: myfunc1 is not defined (at the Error Console)

manofspider 0 Newbie Poster · Answer 3 · 2009-11-13T07:45:35+00:00

All done:

. alert(xmlhttp.responseText);
. Or alert innerHTML of div (all contents of test.jsp)

manofspider 0 Newbie Poster · Answer 4 · 2009-11-17T10:14:59+00:00

Yes , alert(xmlhttp.responseText) will get the script-tags as well.

But I don't how to test with your function ? how to place and use it in my examples above?

var script = ''; // or var scripts = ''; ?

arguments[1] // what is it ?

manofspider 0 Newbie Poster · Answer 5 · 2009-11-18T10:22:01+00:00

update state-Changed function:

function stateChanged() {

	if (xmlhttp.readyState == 4) {

		//document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
		evalScript(xmlhttp.responseText, document.getElementById('txtHint'));

	}

}

Add new function:

function evalScript(html, div)

{

	alert('html : ' + '\n' + html);

	var scripts = '';

	var newHtml = html.replace(/<script[^>]*>([\s\S]*?)<\/script>/gi, function() {

		scripts += arguments[1] + '\n'; return '';

	});


	alert('newHtml : ' + '\n' + newHtml);
	alert('scripts : ' + '\n' + scripts);

	div.innerHTML = newHtml;

	alert('div.innerHTML : ' + '\n' + div.innerHTML);

	eval(scripts);

}

debug: alert('html : ' + '\n' + html);

html :   
      this is test.jsp <br>
   
      <script>
   
      function myfunc1() {
 
      alert("button click");
   
      }
   
      </script>
  
      <input name="mybutton" value="Click to Alert" type="button" onclick="myfunc1();">

debug: alert('newHtml : ' + '\n' + newHtml);

newHtml :    
      this is test.jsp <br>
   
  
      <input name="mybutton" value="Click to Alert" type="button" onclick="myfunc1();">

debug: alert('scripts : ' + '\n' + scripts);

scripts : 
      <script>
   
      function myfunc1() {
 
      alert("button click");
   
      }
   
      </script>

debug: alert('div.innerHTML : ' + '\n' + div.innerHTML);

div.innerHTML :    
      this is test.jsp <br>
   
  
      <input name="mybutton" value="Click to Alert" onclick="myfunc1();" type="button" >

Test Flow:
1. Click on 'Click to Alert'
2. Not work -> Error Console ( Error: myfunc1 is not defined )

Alxandr 5 Junior Poster in Training · Answer 6 · 2009-11-18T10:45:24+00:00

debug: alert('scripts : ' + '\n' + scripts);

scripts : 
      <script>
   
      function myfunc1() {
 
      alert("button click");
   
      }
   
      </script>

The error lies here. The script-tags should be gone, only the content should be left. When you run eval on you're script-variable it'll fail, therefore myfunc1 is never created. But I can't find the error in your code...

Just to make shure I didn't mistype something; here is a direct copy of working code:

var newHtml = html.replace(/<script[^>]*>([\s\S]*?)<\/script>/gi, function() {
    script += arguments[1];
    return '';
});

Somewhere in that line there has to be an error, though I can't find it, but this one is working for me (just tested it). If that doesn't work I'm afraid I don't know how to help you, because as said it's working here (I even tried with your html).

HTH

manofspider 0 Newbie Poster · Answer 7 · 2009-11-19T08:21:03+00:00

sorry Alxandr, it is my mistake. actually, the script-tags already gone.

debug: alert('scripts : ' + '\n' + scripts);

scripts : 
function myfunc1() {
 
alert("button click");
 
}

However, the same test flow, the same result:
1. Click on 'Click to Alert'
2. Not work -> Error Console ( Error: myfunc1 is not defined )

Alxandr 5 Junior Poster in Training · Answer 8 · 2009-11-19T21:24:10+00:00

sorry Alxandr, it is my mistake. actually, the script-tags already gone.
debug: alert('scripts : ' + '\n' + scripts);
scripts : 
function myfunc1() {
 
alert("button click");
 
}
However, the same test flow, the same result:
1. Click on 'Click to Alert'
2. Not work -> Error Console ( Error: myfunc1 is not defined )

Try changing line 2 to window.myfunc1 = function() {

manofspider 0 Newbie Poster · Answer 9 · 2009-11-20T08:02:22+00:00

Updated test.jsp:

this is test.jsp <br>
   
      <script>
   
      //function myfunc1() {
      window.myfunc1 = function() {
 
      alert("button click");
   
      }
   
      </script>
  
      <input name="mybutton" value="Click to Alert" type="button" onclick="myfunc1();">

Wow, work like a charm !

1. Click on button "Click to Alert"
2. Message "button click" appears

Thanks you so much Alxandr ;)