Generating editable fields with AJAX - only running on second request 1

[supersloth]

OK, I am having the weirdest problem I am completely unable to fix. Let me explain what I am trying to do, what it is doing, and then some code.

What I'm trying to do:
I am in the process of making a page where when clicking on the fields, the field will automatically become editable, either by a select menu, an input text box, or any other option. Eventually it will save the changes to the database automatically, but that is still a bit off. this specific example is creating a dropdown menu.

What is happening.
The text is loading fine, the problem is that when I click it, it replaces it with a select dropdown just like the code says, the problem is, it doesn't load anything, it's just blank with only one option. When once again clicking on the dropdown, the code runs and it generates the full dropdown menu as created in the xml file. When setting alerts in my stateCheckerD function I can see that the readyState runs all the way thru from 1 to 4, like it should, it just doesn't load the info up.

here is the order in which things are happening. I am creating a cell with a span inside it, the span has an onclick which calls the loadDirectorateDropdown() function which is presented below. loadDirectorateDropdown first clears the span of everything in it, and calls the directoratesDropdown function, which creates the element. the first thing this function does is call my sendRequestDirectorate function which sends out the xmlhttprequest. in this function the onreadystatechange calls the stateCheckerD function to see if the file is ready to go. once it is (readystate==4), it assigns the myDir array to the correct values from the xml file. this function ends since i now have data, sendRequestEnds because it no longer needs to request the server, the directoratesDropdown function now generates my select and all of the options using the newly assigned array, returns the whole thing to the load function which appends it to the span. wooooo it should totally work. except for some reason they have to click it twice before any data runs, despite the fact that the first time thru it runs all the way thru the readystate.

any ideas you have would be more than appreciated.

 function sendRequestDirectorate(){

		var doc = 'xml/directorates.cfm';
		// check for existing requests
		if(xmlobj2!=null&&xmlobj2.readyState!=0&&xmlobj2.readyState!=4){
			xmlobj2.abort();
		}
		try{
			// instantiate object for Mozilla, Nestcape, etc.
			xmlobj2=new XMLHttpRequest();
		}
		catch(e){
			try{
				// instantiate object for Internet Explorer
				xmlobj2=new ActiveXObject('Microsoft.XMLHTTP');
			}
			catch(e){
				// Ajax is not supported by the browser
				xmlobj2=null;
				return false;
			}
		}

		// assign state handler
		xmlobj2.onreadystatechange=stateCheckerD;

		// open socket connection
		xmlobj2.open('GET',doc,true);

		// send GET request
		xmlobj2.send(null);
	}

	function stateCheckerD(){
		//alert(xmlobj2.readyState);
		
		// if request is completed
		if(xmlobj2.readyState==4){
			// if status == 200 display text file
			if(xmlobj2.status==200){
				myDir=xmlobj2.responseXML.getElementsByTagName('directorate');
				// display XML currentprofile
				
			}
			else{
				alert('Failed to get response :'+ xmlobj.statusText);
			}
		}
	}

	function directoratesDropdown(boner){
		sendRequestDirectorate();


		
		var s = document.createElement("select");	
		s.setAttribute("name", "edit_directorate");
		s.id = 'edit_directorate';
		
		var o = document.createElement("option");
		var t = document.createTextNode('');
		o.setAttribute("value", 0);
		o.appendChild(t);
		s.appendChild(o);
		
		for(var i=0;i<myDir.length;i++){
			var o = document.createElement("option");
			var t = document.createTextNode(myDir[i].getElementsByTagName('symbol')[0].firstChild.nodeValue);
			o.setAttribute("value", myDir[i].getElementsByTagName('symbol')[0].firstChild.nodeValue);
			
			if(myDir[i].getElementsByTagName('symbol')[0].firstChild.nodeValue == boner){
				o.setAttribute("selected", true);
			}
			
			o.appendChild(t);
			s.appendChild(o);
		}

		//s.onChange = updateDirectorate;

		return(s);
	}

	function loadDirectorateDropdown(){
		this.innerHTML='';
		var device=directoratesDropdown(user[0].getElementsByTagName('directorate')[0].firstChild.nodeValue);
		this.appendChild(device);
		
		
		//document.edit_directorate.focus();
	}

 

[adam0101]

It looks like you sending the request asynchronously, but are not waiting for the response. You can change it so instead of calling sendRequestDirectorate() from the directoratesDropdown() function, you call the directoratesDropdown() function from the stateCheckerD() callback function. Or the other thing you could do is change [tt]xmlobj2.open('GET',doc,true);[/tt] to [tt]xmlobj2.open('GET',doc,[red]false[/red]);[/tt] to make the call synchronous instead.

Adam

http://adameslinger.blogspot.com/

 

[supersloth]

There is not enough praise for me to heap onto you. changing the parameter to false was EXACTLY what I needed. You are a scholar and a gentlemen.