clienthint.js

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!

just put one debugger and check its executing or not

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

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

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

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

All done:

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

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);
}

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 ?

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

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 )

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

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 )

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() {

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 ;)

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.