Web Analytics Made Easy -
StatCounter problems with <select> - AJAX on Safari - CodingForum

Announcement

Collapse
No announcement yet.

problems with <select> - AJAX on Safari

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • problems with <select> - AJAX on Safari

    Hello everyone,

    I just registered in the forum. I am having a problem with getting a select box to properly show after the fields (options) get populated from an ajax call. The data is there since I can get it if I call .options[4].value (for example) but for some reason the select box keep showing empty. If I switch the ajax call to be synchronous then it works fine and the select box fills in with the content from the call. For whatever reasons I want to have the ajax call working in asynchronous mode. Have you ever experienced something like this? Can you point me to a script example using select that works in Safari?

    This is the code that is adding the Option elements to the Select:

    Code:
    //this function just calls the server trough XMLHTTP
    function DynamicDropDown_CallToServer(i_sRequestURL, i_sDDDName, i_bAddSingleItem) {
    
    	document.getElementById('testdiv2').innerHTML = 'Call to server -> IN';
    
    	var pXMLHTTPRequest = DynamicDropDown_GetRequest();
    			
    	if(pXMLHTTPRequest && pXMLHTTPRequest.readyState!=0) {
    		  pXMLHTTPRequest.abort();
    	}	
    	
    	var mode = true;
    	pXMLHTTPRequest.open("GET", i_sRequestURL, mode);
    	pXMLHTTPRequest.onreadystatechange = function() {
    		if(pXMLHTTPRequest.readyState == 4 && pXMLHTTPRequest.status == 200) {												
    			DynamicDropDown_LoadHandler(pXMLHTTPRequest.responseXML, i_sDDDName, i_bAddSingleItem);
    		}
    	};
    	pXMLHTTPRequest.send(null);
    	
    	if(mode == false){
    		//the xmlHTTP object was called synchronously
    		if(pXMLHTTPRequest.status == 200) {												
    			DynamicDropDown_LoadHandler(pXMLHTTPRequest.responseXML, i_sDDDName, i_bAddSingleItem);
    		}
    	}
    	
    	document.getElementById('testdiv2').innerHTML = 'Call to server -> out';
    }
    
    //this function populates the <select>
    function DynamicDropDown_LoadHandler(i_pXMLDocument, i_sDDDName, i_bAddSingleItem) {
    
    	document.getElementById('testdiv1').innerHTML = 'LoadHandler started';
    
    	var i;	
    	var sName;
    	var sId;
    	var NOptionToAddTo;
    
    	var pNotSelected = document.getElementById("dynamicdropdown-notselecteditem_" + i_sDDDName + "_");
    	var pNotListed = document.getElementById("dynamicdropdown-notlisteditem_" + i_sDDDName + "_");
    	var pDDD = document.getElementById("dynamicdropdown_" + i_sDDDName + "_");
    
    	var nSelectedIndex = -1;
    	
    	pDDD.options.length = 0;
    
    	if (i_bAddSingleItem) {
    
    		nOptionToAddTo = 0;		
    	} else {
    
    		nOptionToAddTo = 2;		
    		pDDD.options[0] = new Option(pNotSelected.value, m_sDDDNotSelectedValue);
    		pDDD.options[1] = new Option(pNotListed.value, m_sDDDNotListedValue); 
    		if (m_sSavedValue == m_sDDDNotSelectedValue) {
    			nSelectedIndex = 0;
    		} else if (m_sSavedValue == m_sDDDNotListedValue) {
    			nSelectedIndex = 1;
    		}
    	}
    
    	if (i_pXMLDocument.hasChildNodes) {
    		
    		for (i = 0; i < i_pXMLDocument.documentElement.childNodes.length; i++){ 			
    			sId = DynamicDropDown_GetInnerText(i_pXMLDocument.documentElement.childNodes[i].firstChild);
    			sName = DynamicDropDown_GetInnerText(i_pXMLDocument.documentElement.childNodes[i].lastChild);
    
    			pDDD.options[nOptionToAddTo] = new Option(sName, sId);
    			if (m_sSavedValue == sId) {
    				nSelectedIndex = nOptionToAddTo;
    			}
    			nOptionToAddTo++;
    		}	
    	}
    
    	if (i_bAddSingleItem) {
    		//we have to add the empty rows
    
    		for (i = 1; i < m_nEmptyDDDRows; i++) {
    			pDDD.options[i] = new Option("", m_sDDDNotSelectedValue);
    		}
    	}
    
    	if (m_sSavedValueDDDName == i_sDDDName && nSelectedIndex > -1) {
    
    		pDDD.selectedIndex = nSelectedIndex;
    		m_sSavedValueDDDName = "";
    	}
    	
    	document.getElementById('testdiv2').innerHTML = 'LoadHandler finished';
    	//here I only get this  value to make sure it is there and output it
    	//to a div (if you use alert() it closes the dropped down select
    	document.getElementById('testdiv3').innerHTML = pDDD.options[4].value;
    
    }
    The last line prints the expected value in the div. However the select stays empty. If you click outside of it so it closes and then open it again so you force it to redraw then it shows all the values (without any more calls to LoadHandler)

    Thank you very much.
Working...
X