Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Regular Coder
    Join Date
    Aug 2008
    Location
    Northern Ireland
    Posts
    167
    Thanks
    12
    Thanked 6 Times in 6 Posts

    Unhappy 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.
    Last edited by tosbourn; 08-26-2008 at 05:01 PM. Reason: Resolved.

  • #2
    Regular Coder
    Join Date
    Aug 2008
    Location
    Northern Ireland
    Posts
    167
    Thanks
    12
    Thanked 6 Times in 6 Posts
    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.

  • #3
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,301
    Thanks
    10
    Thanked 586 Times in 567 Posts
    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...
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • Users who have thanked rnd me for this post:

    tosbourn (08-26-2008)

  • #4
    Regular Coder
    Join Date
    Aug 2008
    Location
    Northern Ireland
    Posts
    167
    Thanks
    12
    Thanked 6 Times in 6 Posts
    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?

  • #5
    Regular Coder
    Join Date
    Aug 2008
    Location
    Northern Ireland
    Posts
    167
    Thanks
    12
    Thanked 6 Times in 6 Posts
    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.

  • #6
    Regular Coder
    Join Date
    Aug 2008
    Location
    Northern Ireland
    Posts
    167
    Thanks
    12
    Thanked 6 Times in 6 Posts
    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!
    Last edited by tosbourn; 08-26-2008 at 10:43 AM. Reason: Tidying up code to make it a little more condensed.

  • #7
    Regular Coder
    Join Date
    Aug 2008
    Location
    Northern Ireland
    Posts
    167
    Thanks
    12
    Thanked 6 Times in 6 Posts
    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?

  • #8
    Banned
    Join Date
    May 2005
    Location
    Midwest, U.S.
    Posts
    118
    Thanks
    1
    Thanked 26 Times in 23 Posts
    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

  • Users who have thanked Cranford for this post:

    tosbourn (08-26-2008)

  • #9
    Regular Coder
    Join Date
    Aug 2008
    Location
    Northern Ireland
    Posts
    167
    Thanks
    12
    Thanked 6 Times in 6 Posts
    You are a complete legend, thank you!


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •