Sorry my first post is a question, but I am in quite a pickle and could use a fast response, normally I like to help people out on a new forum before asking my own stuff!
I have been handed a project to work on that was only half completed by my predecessor - I say half completed because they only tested their solution in Safari. I am sure you can take a fairly good guess at what my problem relates to; the code works fine in Firefox, Safari and Opera, but does not work in Internet Explorer.
I haven't looked at JavaScript in years properly and have never attempted anything ajax like before, so this is pitched way above my head - hopefully with some guidance here I will be able to work through it!
My problem seems to be that once one form auto completes, the code doesn't want to let other forms do the same. Each form will separately work and do what it needs to do, but as soon as one field is filled in automatically, no others will work.
Because the problem is so wide spread and encompasses a lot of code, I thought it best to ask if there are any common problems I should be checking into as opposed to posting huge chunks of code for just one example.
Last edited by tosbourn; 08-26-2008 at 05:01 PM..
Reason: Resolved.
Quick update - I downloaded Fiddler and used to to make sure the requests were getting through ok, and they are.
The information that gets sent, and that gets recieved the first time you do it compared to the time you do it after something has already been updated is the exact same. But the first time the new information will get displayed, and the second time it will not.
Without see a line of code, all we can do is guess.
here are some pitch-black stabs:
1. you are adding an element the first time using .innerHTML that duplicates an element id.
2. the ajax call is caching, and uses the old data to redraw; thus nothing appears to change.
3. there is an issue with the form elements name causing ambiguity in the auto-complete code.
if you could post the part of your code that applies the auto complete from the ajax response, i can likely be a lot more helpful.
or you can just wait until IE8 comes out next year, and hope your problem is one of the 8000 things they have fixed so far...
__________________ my site (updated 5/13) STATS (2013/5) HTML5:90.2% MOB:14% IE7:0.5% IE8:8.6% IE9:9.8% IE10:10%
Here is my code, sorry there is so much of it, but I don't want to guess at what is 100% working correctly and then miss something out.
Basically this code when initiated should open up a window containing users, once a user is clicked, their details should be automatically fed into the previous form.
function newChangePerson (mode, witness){
a = $("selectPID");
b = $("myid");
if (!a) a = {"value":""};
if (!b) b = {"value":""};
if (!witness) witness = "";
TS.person(a.value, b.value, mode, witness);
TS.person (if (modals) is commented out because I wanted to see if I could get it working making it follow the wraptabs route.
Code:
TS.person = function( ind, accid, mode, dstField ){
if (accid!="") accid = "&accident="+accid;
if (ind !="") ind = "¤t="+ind;
if (mode ==1 ) mode = "find" ;
if (mode ==2 ) mode = "new" ;
if (mode ==0 ) mode = "choose";
if (dstField=="") dstField = "selectPID";
jsdst = dstField;
dstField = "&dest="+dstField;
/*if (modals){
var width = window.innerWidth || document.body.clientWidth;
var height = window.innerHeight || document.body.clientHeight;
$(jsdst).value = window.showModalDialog("person.php?"+mode+ind+accid+dstField, "", "dialogWidth: "+(width-80)+"px; dialogHeight: "+(height-80)+"px; center:1");
goFindPerson(jsdst);
} else */
TS.wrapTabs("person.php?"+mode+ind+accid+dstField, "Person");
}
TS.wrapTabs then brings up the new window.
Once you select the user you want, these are the next two methods that get used.
Code:
function Person_callback ( ){ // [l] responder to above
if (req.readyState == 4) {
if (req.status == 200) {
eval(req.responseText);
if (peopleChoice == null){
alert("No one with that name was found in the database, \n\nCreate a new person by filling out the remainder of these fields");
} else if (peopleChoice.length==1) {
// $('fname' ).value = peopleChoice[0].fname ; // Already populated so why?
// $('sname' ).value = peopleChoice[0].sname ;
//$('selectPID').value = peopleChoice[0].dbid ;
peopleChoice[0].add = unescape(peopleChoice[0].add);
add = peopleChoice[0].add.split("\n");
{
$(pLookDest+"hnum").value = unescape(add[0]);
$(pLookDest+"hpcd").value = unescape(add[4]);
$(pLookDest+"hstr").value = unescape(add[1]);
$(pLookDest+"hcou").value = unescape(add[2]);
$(pLookDest+"hcty").value = unescape(add[3]);
}
$(pLookDest+'fname' ).value = unescape(peopleChoice[0].fname );
$(pLookDest+'sname' ).value = unescape(peopleChoice[0].sname );
$(pLookDest+'phone' ).value = unescape(peopleChoice[0].phone );
$(pLookDest+'age' ).value = unescape(peopleChoice[0].age );
dd_select(pLookDest+"gender", unescape(peopleChoice[0].gender));
dd_select(pLookDest+"pcat", unescape(peopleChoice[0].catid ));
}
}// status 200
} //readystate
}//person callback
function applyPerson ( ){ // [l] fill fields with result
num = $("personpicker").options[$("personpicker").selectedIndex].value;
$('selectPID').value = peopleChoice[num].dbid ;
peopleChoice[num].add = unescape(peopleChoice[num].add);
add = peopleChoice[num].add.split("\n");
{
$("hnum").value = add[1];
$("hpcd").value = add[5];
$("hstr").value = add[2];
$("hcou").value = add[3];
$("hcty").value = add[4];
}
$('fname' ).value = peopleChoice[num].fname;
$('sname' ).value = peopleChoice[num].sname;
$('phone' ).value = peopleChoice[num].phone ;
$('age' ).value = unescape(peopleChoice[num].age);
dd_select("gender", peopleChoice[num].gender);
dd_select("pcat", peopleChoice[num].catid );
$("attentionPhrase" ).innerText = "";
//innerHTML fix
var newdiv = document.createElement("div");
newdiv.innerHTML = "";
$("attentionContents").appendChild(newdiv);
$("attentionActions").appendChild(newdiv);
//$("attentionContents").innerHTML = "";
//$("attentionActions" ).innerHTML = "";
$("attention").style.display="none";
}
I don't think I have missed anything out, and again, apologies for the incredibly long post!
Last edited by tosbourn; 08-26-2008 at 10:43 AM..
Reason: Tidying up code to make it a little more condensed.
I have been firing in alerts by way of a test to see where IE is falling short, and it never actually gets into the method to update the fields.
The call to the function (Person_callback()) is made from the following bit of code.
Code:
function goFindPerson (obj){ // [l] AJAJ person lookup
if (typeof obj=="string") obj = $(obj); //
if ((obj.id == "witness1id")){
spid = ($("witness1id").value);
pLookDest = "w_1_";
} else if (obj.id == "witness2id"){
spid = ($("witness2id").value);
pLookDest = "w_2_";
} else {
spid = ($("selectPID").value);
pLookDest = "";
}
req.onreadystatechange = Person_callback; // Set callback function
alert("TEST"+req);
req.open("GET", "personlookup.php?id="+spid, true); // Do a tainted SQL call
req.send(""); // Run the thread
}
Now I have followed this code through, and IE is getting to the end of it, so I can only assume one of two things, the first is I am in totally the wrong place and need to retrace my steps, and the other is that for some reason req.onreadystatechange = Person_callback; isn't doing anything the second time around - is there anyway I can confirm this? or is there any work arounds?
It seems like you've run in to the "IE caching" problem.
When using the GET method only, IE will use the cached document, unless something is different in the query string. Several approaches fix the problem.
But see, this for what is probably the best solution, setting headers:
Before you post, read our: 
Fields not updating correctly.
