CodingForums.com - Resolved Fields not updating correctly.

CodingForums.com (http://www.codingforums.com/index.php)

- Ajax and Design (http://www.codingforums.com/forumdisplay.php?f=55)

- - Resolved Fields not updating correctly. (http://www.codingforums.com/showthread.php?t=147359)

Fields not updating correctly.

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.

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.

Welcome to CF!

sounds frustrating.

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

Hey rnd me,

Cheers for the welcome, and the help - unfortunately this project needs to be completed way before MS pull their finger out!

I have found two references to .innerHTML in my code

Code:

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 = "";

                        $("attentionContents").innerHTML = "";

                        $("attentionActions" ).innerHTML = "";

                        $("attention").style.display="none";

Could this be what is throwing it off yeah?

EDIT:

I have since changed the code to...

Code:

                ...



                        //innerHTML fix



                        var newdiv = document.createElement("div");

                        newdiv.innerHTML = "";

                        $("attentionContents").appendChild(newdiv);

                        $("attentionActions").appendChild(newdiv);



                        //$("attentionContents").innerHTML = "";

                        //$("attentionActions" ).innerHTML = "";



                        $("attention").style.display="none";

                }

It hasn't fixed anything, but hasn't broken anything either.

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.

The link that starts it all off..

Code:

<a href="javascript:newChangePerson(1)" id="findperson" >

The newChangePerson() function

Code:

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     = "&current="+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!

I think I can condense this some...

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:

http://codingforums.com/showthread.p...ighlight=works

You are a complete legend, thank you!