 |
| Ajax the combination of XHTML, CSS, DOM, XML, XSLT, XMLHttpRequest, and JavaScript |
Welcome to the p2p.wrox.com Forums.
You are currently viewing the Ajax section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
|
|
|
|

December 19th, 2006, 10:27 AM
|
|
Wrox Author
|
|
Join Date: Oct 2005
Posts: 4,104
Thanks: 1
Thanked 64 Times in 64 Posts
|
|
AJAX Error?
Hello all,
I posted this in the .NET forum as I originally thought the problem was related to server side calls but, after some testing have determined that this is not possible.
Here is my situation: I have a text box that a user can input data and a javascript watches the onKeyUp event to query a database and return relevant results based on the value of the text box. The user can then click on a result and have the value populate into another field on the form. (The field that is populated is hidden in a div until the user clicks on the element, clicking on the element raises a javascript function that unhides the div and the text box) This all works flawlessly.
Now the problem occurs when I click on the submit button; when I click on this button IE generates an error and it must close due to the error! (The error is coming from mshtml.dll) I can not figure out what the problem is and have included my code below. Any help would be greatly appreciated!
As a side note I should mention, if I do not key anything into the textbox that raises the AJAX call, i can press the submit button without a problem, it is only after i have made the AJAX call that the page crashes.
var req;
//Sets up XML object
function Initialize()
{
try
{
req=new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
req=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(oc)
{
req=null;
}
}
if(!req&&typeof XMLHttpRequest!="undefined")
{
req= new
XMLHttpRequest();
}
}
//This is the function that is called onKeyUp
function SendQuery(key)
{
Initialize();
var url='ajax_searchLabCare.aspx?k='+key;
if(req!=null)
{
req.onreadystatechange = Process;
req.open("GET", url, true);
req.send(null);
}
}
//Sets up my divs and such
function Process()
{
if (req.readyState == 4)
{
if (req.status == 200)
{
if(req.responseText=="")
{
HideDiv("autocomplete");
}
else
{
ShowDiv("autocomplete");
var parentElement = document.getElementById('autocomplete');
try
{ parentElement.innerHTML=''; parentElement.innerHTML=req.responseText;
}
catch(e)
{ var wrappingDiv = document.createElement('div');
wrappingDiv.innerHTML = '';
wrappingDiv.innerHTML = req.responseText;
parentElement.appendChild(wrappingDiv);
}
}
}
else
{ document.getElementById("autocomplete").innerHTML=
"There was a problem retrieving data:<br>"+req.statusText;
}
}
}
There are other javascript functions that I have excluded but they all deal with showing and hiding divs and preforming string manipulation on elements. Again any help would be greatly appreciated!
-------------------------
I will only tell you how to do it, not do it for you.
Unless, of course, you want to hire me to do work for you.
^^Thats my signature
__________________
===============================================
Doug Parsons
Wrox online library: Wrox Books 24 x 7
Did someone here help you? Click  on their post!
"Easy is the path to wisdom for those not blinded by themselves."
===============================================
|
|

December 19th, 2006, 10:39 AM
|
 |
Wrox Author
|
|
Join Date: Jun 2003
Posts: 3,074
Thanks: 1
Thanked 38 Times in 37 Posts
|
|
Can you debug and step through the code (you will need a script debugger such as Visual Studio or the one that optionally installs with Office, and set the enable script debugging in IE | Tools | options | Advanced).
Does you code hit the catch block?
I have seen IE handle dynamically inserted HTML badly, especially using the innerHTML property. Maybe you should use createElement etc. instead.
--
Joe ( Microsoft MVP - XML)
|
|

December 19th, 2006, 10:58 AM
|
|
Wrox Author
|
|
Join Date: Oct 2005
Posts: 4,104
Thanks: 1
Thanked 64 Times in 64 Posts
|
|
Joe,
Thanks for your reply. I do have visual studio but I am unable to step through any code that is executed from my webserver as the Network Admin will not install Visual Studio Remote components for me on the server and, as such, VS can not be started in debugging mode =
What is curious about my problem is that if I use a .NET Button Control or a plain html <input type=submit> button it will cause the page to crash if, however, I use an html <input type="button"> control the page works fine in that it does not crash. It seems that this problem only occurs when the form is submited and am still in the process of testing this theory, but it seems very strange.
Any thoughts?
-------------------------
I will only tell you how to do it, not do it for you.
Unless, of course, you want to hire me to do work for you.
^^Thats my signature
|
|

December 19th, 2006, 11:41 AM
|
 |
Wrox Author
|
|
Join Date: Jun 2003
Posts: 3,074
Thanks: 1
Thanked 38 Times in 37 Posts
|
|
Okay, but the JavaScript is executed client-side so you should be able to step through that whilst it runs. Put the term debugger at the start of one of the methods and enable script debugging as I showed earlier. You should get a debug prompt when you hit the statement.
--
Joe ( Microsoft MVP - XML)
|
|

December 19th, 2006, 12:01 PM
|
|
Friend of Wrox
|
|
Join Date: May 2006
Posts: 643
Thanks: 0
Thanked 0 Times in 0 Posts
|
|
Do you have any code that runs when the submit button clicks, or is it just a standard submit button? It is possible that asp:button is running some code where the html button does not.
Also, what code is in your ShowDiv, HideDiv methods?
The id of elements that .NET generated client side code uses to refer to the divs and other elements in your document may not be as you expect, and when your ajax call handling modifies, removes, or adds elements it is possible that code that is running in the button click may not be able to find the elements that it needs.
Woody Z
http://www.learntoprogramnow.com
|
|

December 19th, 2006, 12:02 PM
|
|
Wrox Author
|
|
Join Date: Oct 2005
Posts: 4,104
Thanks: 1
Thanked 64 Times in 64 Posts
|
|
Joe,
Thanks for that tip I was unaware of the debugger keyword and was trying to attach hooks inside of VS to the process ><
There is an exception being thrown during normal execution of the page (it is not the exeception that is crashing the browser tho)
try
{
parentElement.innerHTML='';
parentElement.innerHTML=req.responseText; <---------This line throws the exectpion
}
catch(e)
{
//Obviously this is then executed after the exception
var wrappingDiv = document.createElement('div');
wrappingDiv.innerHTML = '';
wrappingDiv.innerHTML = req.responseText;
parentElement.appendChild(wrappingDiv);
}
If memory serves me, IE has a problem when you call innerhtml and there is not a div inside a div essentially. The error code being thrown is -2146827687 and is an Unknown Runtime error.
Now, when I click on a regular button the javascript function is raised and executed just fine but clicking a submit button still causes the javascript function to be called fine; after the function has executed is when IE crashes.
Here is the function that is wired to both of the onClick events of both buttons:
function pageRedirect(){
debugger
req = null;
document.location.href='./labcare_index.aspx';
}
This is just for testing purposes as i need to deal with the data on the page but am trying to get around this error. Any thoughts?
-------------------------
I will only tell you how to do it, not do it for you.
Unless, of course, you want to hire me to do work for you.
^^Thats my signature
|
|

December 19th, 2006, 12:08 PM
|
|
Wrox Author
|
|
Join Date: Oct 2005
Posts: 4,104
Thanks: 1
Thanked 64 Times in 64 Posts
|
|
Woody,
The ids of the divs do not change as they arent created by the runtime and aren't listed in the control tree (participate in viewstate, etc). If that were the problem (the IDs of the Divs changing), those 2 functions would throw an error saying that "the referenced object is null or not an object". This is what the code does basically:
//Hidediv
if (document.layers) document.layers[divid].visibility="hide";
else document.getElementById(divid).style.visibility="h idden";
Show div just displays the div as opposed to hiding it.
In so far as the button controls, currently I am not using a button control I am using a straight HTML <input> tag to create the button. A button of type button does not cause the page to crash a button of type submit causes the page to crash.
There is no code in my codebehind that deals with any of the button clicks.
-------------------------
I will only tell you how to do it, not do it for you.
Unless, of course, you want to hire me to do work for you.
^^Thats my signature
|
|

December 19th, 2006, 12:53 PM
|
|
Friend of Wrox
|
|
Join Date: May 2006
Posts: 643
Thanks: 0
Thanked 0 Times in 0 Posts
|
|
Can we assume then that there are no validations going on client side? That is, these are no validation controls or anything that is tied to the form submit that might be running?
My earlier point is that you are manipulating the inner html of some element that might contain elements that are expected by some validation. I am just brainstorming.
Woody Z
http://www.learntoprogramnow.com
|
|

December 19th, 2006, 01:48 PM
|
|
Wrox Author
|
|
Join Date: Oct 2005
Posts: 4,104
Thanks: 1
Thanked 64 Times in 64 Posts
|
|
No. This is my alpha prototype of an application and, as such, validation and error checking are at a minimum. There is no validation client side or server side that is occuring. I am somewhat at a loss for this the only thing that I can think of is that a Submit button, in classic asp/html, raises the forms action property and I originally thought that this was the problem because the form did not have any action associated with it.
I have since changed that but the problem presists. ><
-------------------------
I will only tell you how to do it, not do it for you.
Unless, of course, you want to hire me to do work for you.
^^Thats my signature
|
|

December 19th, 2006, 04:15 PM
|
|
Wrox Author
|
|
Join Date: Oct 2005
Posts: 4,104
Thanks: 1
Thanked 64 Times in 64 Posts
|
|
Ok I have come up with a shameless hack as a work-around to the problem. I tried setting the action of the form to another Javascript function inside the page that, in turn, called a POST method using the XMLHttp object, this caused the browser to crash as well.
So what i did was this:
In HTML
<input type=button id="btn" onclick="javascript:createParameters();" value="Submit">
Javascript:
function createParameters(obj){
var sParam = "pid=796&id=66";
makePost('labcare_index.aspx?pid=796&id=66', sParam);
}
function makePost(url, parameters){
debugger
Initialize();
req.onreadystatechange = Process;
req.open("POST", url, true);
req.setRequestHeader("Content-type", "text/xml");
req.send(parameters);
}
I have one question tho: using the XMLHTTP object's send method I am supposed to be able to send the parameters along with the url and should be able to access those through Request.Querystring (this is at least how i have seen it demonstrated with people using PHP backends) however, I am only able to access the query string values when i pass the URL in as I have done above by actually appending the querystring values to the end of the URL. Am I missing something or did I do something wrong?
Anyway, this may or may not be the most effecient way to handle the form post and am open to any suggestions. Any insight would be greatly appreciated!
-------------------------
I will only tell you how to do it, not do it for you.
Unless, of course, you want to hire me to do work for you.
^^Thats my signature
|
|
 |