problems with <select> - AJAX

[mitirino]

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?

Thank you

 

[mufflon]

I think this is in the wrong forum (should be programming imo), also it would probably benefit if you showed us your code, hard to keep up otherwise

 

[mitirino]

code

This is the code that is adding the Option elements to 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 + "_");
	[B]var pDDD = document.getElementById("dynamicdropdown_" + i_sDDDName + "_");[/B]

	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) {
		
		[B]for (i = 0; i < i_pXMLDocument.documentElement.childNodes.length; i++){[/B] 			
			sId = DynamicDropDown_GetInnerText(i_pXMLDocument.documentElement.childNodes[i].firstChild);
			sName = DynamicDropDown_GetInnerText(i_pXMLDocument.documentElement.childNodes[i].lastChild);

			[B]pDDD.options[nOptionToAddTo] = new Option(sName, sId);[/B]
			if (m_sSavedValue == sId) {
				nSelectedIndex = nOptionToAddTo;
			}
			nOptionToAddTo++;
		[B]}[/B]	
	}

	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.

 

[Blackheart]

I don't mean to discourage you, but you may want to try searching for a web-programming specific forum.

 

[MrSmith]

I don't mean to discourage you, but you may want to try searching for a web-programming specific forum.

CodingForums is a good one to try.

 

[mitirino]

Thanks

thanks. I'll go check it out.

 

[Thom_Edwards]

i always develop ajax using firefox. there is a wonderful plugin that enables a debugger. you can watch what is going on behind the scenes, which is invaluable when trying to track this kind of stuff down.

if i may say, though, it seems like you may be going about this the long way. why not just rewrite the .innerHTML of the <select> (or put a <div> around the select and rewrite the <div>'s .innerHTML)? i might not completely understand what you are tying to do, but this way seems much simpler than trying to access the DOM in the way you are doing it.

 

[NoNameBrand]

Webkit has a JS debugger too.

 

[mitirino]

i always develop ajax using firefox. there is a wonderful plugin that enables a debugger. you can watch what is going on behind the scenes, which is invaluable when trying to track this kind of stuff down.

if i may say, though, it seems like you may be going about this the long way. why not just rewrite the .innerHTML of the <select> (or put a <div> around the select and rewrite the <div>'s .innerHTML)? i might not completely understand what you are tying to do, but this way seems much simpler than trying to access the DOM in the way you are doing it.

Thank you. I will try rewriting the div's innerHTML. I did try doing it for the select but it didn't work.