954,600 Members — Technology Publication meets Social Media
Username:
Password:
Lost login information?
Have something to say? Contribute New Article Reply to this Article
2 Years Ago
0

Javascript problem in Ajax

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 

<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 

<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!

manofspider
Newbie Poster
10 posts since Nov 2009
Reputation Points: 10
Solved Threads: 0
 
2 Years Ago
0

just put one debugger and check its executing or not

function myfunc1() {	
debugger;
alert("button click");		}
chandru7
Junior Poster in Training
72 posts since Sep 2009
Reputation Points: 9
Solved Threads: 13
 
2 Years Ago
0

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

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

manofspider
Newbie Poster
10 posts since Nov 2009
Reputation Points: 10
Solved Threads: 0
 
2 Years Ago
0

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

Alxandr
Junior Poster in Training
73 posts since May 2009
Reputation Points: 15
Solved Threads: 10
 
2 Years Ago
0

All done:

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

manofspider
Newbie Poster
10 posts since Nov 2009
Reputation Points: 10
Solved Threads: 0
 
2 Years Ago
0

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);
}
Alxandr
Junior Poster in Training
73 posts since May 2009
Reputation Points: 15
Solved Threads: 10
 
2 Years Ago
0

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
Newbie Poster
10 posts since Nov 2009
Reputation Points: 10
Solved Threads: 0
 
2 Years Ago
0

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

Alxandr
Junior Poster in Training
73 posts since May 2009
Reputation Points: 15
Solved Threads: 10
 
2 Years Ago
0

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

manofspider
Newbie Poster
10 posts since Nov 2009
Reputation Points: 10
Solved Threads: 0
 
2 Years Ago
0

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

Alxandr
Junior Poster in Training
73 posts since May 2009
Reputation Points: 15
Solved Threads: 10
 
2 Years Ago
0

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 )

manofspider
Newbie Poster
10 posts since Nov 2009
Reputation Points: 10
Solved Threads: 0
 
2 Years Ago
0

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

Alxandr
Junior Poster in Training
73 posts since May 2009
Reputation Points: 15
Solved Threads: 10
 
2 Years Ago
0

Updated test.jsp:

this is test.jsp 
   
      <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 ;)

manofspider
Newbie Poster
10 posts since Nov 2009
Reputation Points: 10
Solved Threads: 0
 

This question has already been solved

Post: Markdown Syntax: Formatting Help
You
View similar articles that have also been tagged:
 
© 2012 DaniWeb® LLC
Home | About Us | Contact Us | Terms of Service | Advertising Opportunities
RSS Feed RSS Feed