944,051 Members | Top Members by Rank

Web Development > JavaScript / DHTML / AJAX > Javascript problem in Ajax
Ad:
You are currently viewing page 1 of this multi-page discussion thread
Permalink
Nov 6th, 2009
0

Javascript problem in Ajax

Expand Post »
clienthint.js
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. var xmlhttp;
  2. var parameters="";
  3.  
  4. function showHint(url) {
  5.  
  6. 	var myform = document.forms[0];
  7. 	if (myform != undefined) {
  8. 		parameters = getRequestBody(myform);
  9. 	}
  10.  
  11. 	if (url.length == 0) {
  12. 		document.getElementById("txtHint").innerHTML = "";
  13. 		return;
  14. 	}
  15. 	xmlhttp = GetXmlHttpObject();
  16. 	if (xmlhttp == null) {
  17. 		alert("Your browser does not support XMLHTTP!");
  18. 		return;
  19. 	}
  20.  
  21. 	xmlhttp.onreadystatechange = stateChanged;
  22. 	xmlhttp.open("POST", url, true);
  23.  
  24. 	xmlhttp.send(parameters);
  25.  
  26. }
  27.  
  28. function stateChanged() {
  29. 	if (xmlhttp.readyState == 4) {
  30. 		document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
  31. 	}
  32. }
  33.  
  34. function GetXmlHttpObject() {
  35. 	if (window.XMLHttpRequest) {
  36. 		// code for IE7+, Firefox, Chrome, Opera, Safari
  37. 		return new XMLHttpRequest();
  38. 	}
  39. 	if (window.ActiveXObject) {
  40. 		// code for IE6, IE5
  41. 		return new ActiveXObject("Microsoft.XMLHTTP");
  42. 	}
  43. 	return null;
  44. }
  45.  
  46. function getRequestBody(oForm) {
  47.     var aParams = new Array();
  48.  
  49.     for (var i=0 ; i < oForm.elements.length; i++) {
  50.         var sParam = encodeURIComponent(oForm.elements[i].name);
  51.         sParam += "=";
  52.         sParam += encodeURIComponent(oForm.elements[i].value);
  53.         aParams.push(sParam);
  54.     }
  55.  
  56.     return aParams.join("&") + "&sid=" + Math.random();
  57. }

test.jsp
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. this is test.jsp <br>
  2.  
  3. <script>
  4.  
  5. 	function myfunc1() {
  6. 		alert("button click");	
  7. 	}
  8.  
  9.  
  10. </script>
  11.  
  12. <input name="mybutton" value="Click to Alert" type="button" onclick="myfunc1();">

index.jsp

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <html>
  2. <head>
  3.  
  4. 	<script src="clienthint.js"></script>	
  5.  
  6. </head>
  7. <body>
  8.  
  9. Test Ajax <br><br>
  10.  
  11. <input type="button" value="test.jsp" onclick="showHint('test.jsp');"/> 
  12. <hr/>
  13.  
  14. <div id="txtHint" style="background:gray;height:200px;"></div>
  15.  
  16. </body>
  17. </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!
Similar Threads
Reputation Points: 10
Solved Threads: 0
Newbie Poster
manofspider is offline Offline
10 posts
since Nov 2009
Permalink
Nov 6th, 2009
0
Re: Javascript problem in Ajax
just put one debugger and check its executing or not
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. function myfunc1() {	
  2. debugger;
  3. alert("button click");		}
Reputation Points: 9
Solved Threads: 13
Junior Poster in Training
chandru7 is offline Offline
72 posts
since Sep 2009
Permalink
Nov 9th, 2009
0
Re: Javascript problem in Ajax
With or without the statement debugger, we still the same result:

Error: myfunc1 is not defined (at the Error Console)
Reputation Points: 10
Solved Threads: 0
Newbie Poster
manofspider is offline Offline
10 posts
since Nov 2009
Permalink
Nov 10th, 2009
0
Re: Javascript problem in Ajax
At clienthint.js, before line 30, try adding: alert(xmlhttp.responseText);
Reputation Points: 15
Solved Threads: 10
Junior Poster in Training
Alxandr is offline Offline
73 posts
since May 2009
Permalink
Nov 12th, 2009
0
Re: Javascript problem in Ajax
All done:

. alert(xmlhttp.responseText);
. Or alert innerHTML of div (all contents of test.jsp)
Reputation Points: 10
Solved Threads: 0
Newbie Poster
manofspider is offline Offline
10 posts
since Nov 2009
Permalink
Nov 15th, 2009
0
Re: Javascript problem in Ajax
So when you do alert(xmlhttp.responseText) you get the script-tags as well? Then try this:
JavaScript Syntax (Toggle Plain Text)
  1. function evalScript(html, div)
  2. {
  3.     var script = '';
  4.     var newHtml = html.replace(/<script[^>]*>([\s\S]*?)<\/script>/gi, function() {
  5.          scripts += arguments[1] + '\n'; return '';
  6.     });
  7.     div.innerHTML = newHtml;
  8.     eval(scripts);
  9. }
Last edited by Alxandr; Nov 15th, 2009 at 1:28 pm.
Reputation Points: 15
Solved Threads: 10
Junior Poster in Training
Alxandr is offline Offline
73 posts
since May 2009
Permalink
Nov 17th, 2009
0
Re: Javascript problem in Ajax
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?
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. var script = ''; // or var scripts = ''; ?
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. arguments[1] // what is it ?
Last edited by manofspider; Nov 17th, 2009 at 12:15 am.
Reputation Points: 10
Solved Threads: 0
Newbie Poster
manofspider is offline Offline
10 posts
since Nov 2009
Permalink
Nov 17th, 2009
0
Re: Javascript problem in Ajax
Click to Expand / Collapse  Quote originally posted by manofspider ...
clienthint.js
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. function stateChanged() {
  2. 	if (xmlhttp.readyState == 4) {
  3. 		document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
  4. 	}
  5. }
This is your stateChanged-function. What I suggest is that you replace it's content (inside the if) with
JavaScript Syntax (Toggle Plain Text)
  1. evalScript(xmlhttp.responseText, document.getElementById('txtHint'));
Click to Expand / Collapse  Quote originally posted by Alxandr ...
JavaScript Syntax (Toggle Plain Text)
  1. function evalScript(html, div)
  2. {
  3.     var script = '';
  4.     var newHtml = html.replace(/<script[^>]*>([\s\S]*?)<\/script>/gi, function() {
  5.          scripts += arguments[1] + '\n'; return '';
  6.     });
  7.     div.innerHTML = newHtml;
  8.     eval(scripts);
  9. }
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.
Click to Expand / Collapse  Quote originally posted by manofspider ...
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?
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. var script = ''; // or var scripts = ''; ?
Variable-names has no effect on the execution of JavaScript as long as they're named legally.
Click to Expand / Collapse  Quote originally posted by manofspider ...
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. 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
Reputation Points: 15
Solved Threads: 10
Junior Poster in Training
Alxandr is offline Offline
73 posts
since May 2009
Permalink
Nov 18th, 2009
0
Re: Javascript problem in Ajax
update state-Changed function:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. function stateChanged() {
  2.  
  3. 	if (xmlhttp.readyState == 4) {
  4.  
  5. 		//document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
  6. 		evalScript(xmlhttp.responseText, document.getElementById('txtHint'));
  7.  
  8. 	}
  9.  
  10. }


Add new function:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. function evalScript(html, div)
  2.  
  3. {
  4.  
  5. 	alert('html : ' + '\n' + html);
  6.  
  7. 	var scripts = '';
  8.  
  9. 	var newHtml = html.replace(/<script[^>]*>([\s\S]*?)<\/script>/gi, function() {
  10.  
  11. 		scripts += arguments[1] + '\n'; return '';
  12.  
  13. 	});
  14.  
  15.  
  16. 	alert('newHtml : ' + '\n' + newHtml);
  17. 	alert('scripts : ' + '\n' + scripts);
  18.  
  19. 	div.innerHTML = newHtml;
  20.  
  21. 	alert('div.innerHTML : ' + '\n' + div.innerHTML);
  22.  
  23. 	eval(scripts);
  24.  
  25. }

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

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. html :   
  2.       this is test.jsp <br>
  3.  
  4.       <script>
  5.  
  6.       function myfunc1() {
  7.  
  8.       alert("button click");
  9.  
  10.       }
  11.  
  12.       </script>
  13.  
  14.       <input name="mybutton" value="Click to Alert" type="button" onclick="myfunc1();">

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

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. newHtml :    
  2.       this is test.jsp <br>
  3.  
  4.  
  5.       <input name="mybutton" value="Click to Alert" type="button" onclick="myfunc1();">

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

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. scripts : 
  2.       <script>
  3.  
  4.       function myfunc1() {
  5.  
  6.       alert("button click");
  7.  
  8.       }
  9.  
  10.       </script>

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

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. div.innerHTML :    
  2.       this is test.jsp <br>
  3.  
  4.  
  5.       <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 )
Reputation Points: 10
Solved Threads: 0
Newbie Poster
manofspider is offline Offline
10 posts
since Nov 2009
Permalink
Nov 18th, 2009
0
Re: Javascript problem in Ajax
Click to Expand / Collapse  Quote originally posted by manofspider ...
debug: alert('scripts : ' + '\n' + scripts);

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. scripts : 
  2.       <script>
  3.  
  4.       function myfunc1() {
  5.  
  6.       alert("button click");
  7.  
  8.       }
  9.  
  10.       </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:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. var newHtml = html.replace(/<script[^>]*>([\s\S]*?)<\/script>/gi, function() {
  2.     script += arguments[1];
  3.     return '';
  4. });

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
Reputation Points: 15
Solved Threads: 10
Junior Poster in Training
Alxandr is offline Offline
73 posts
since May 2009

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: How Disable The F5 Key In Mozilla
Next Thread in JavaScript / DHTML / AJAX Forum Timeline: grey out the page while showing the loading image


Tags
ajax, javascript, problem



About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC