Jump to content


Photo

ajax response not finding drop down...


  • Please log in to reply
9 replies to this topic

#1 mojito

mojito
  • Members
  • PipPipPip
  • Advanced Member
  • 74 posts

Posted 13 July 2006 - 02:44 PM

I have the following block of code which cant find the dropdown im trying to populate.
 var sel = document.places.sel2;
		 alert("sel")
		 //clear old content
		  while (sel.options.length) 
		  	{
			sel.remove(0);
			}
		 //split the incoming string to create array arrOpt which contians the pairs of content
			var arrOpt = response.split("|");
			for(var i = 0; i< arrOpt.length-1;i++){
  				var arrVal = arrOpt[i].split("~");
  				sel.options[sel.options.length] = new Option(arrVal [0],arrVal[1]);
			}



this is the dropdown

<form id="places" name="form1" method="post" action="">
  <select name="sel1" onchange="javascript:sendRequest('foo')">
    <option>unnamed1</option>
    <option>unnamed2</option>
  </select>
  <select name="sel2" onchange="javascript:alert(this);">
    <option>unnamed1</option>
    <option>unnamed2</option>
  </select>
</form>


thats where the problem lies especially with the line

var sel = document.places.sel2;

sel should be a ref to the dropdown to save on typing etc.. but it doesnt find my dropdown. I get confused between name and id as identifiers.

thanks for any help

mojito

#2 nogray

nogray
  • Members
  • PipPipPip
  • Advanced Member
  • 930 posts
  • LocationSan Francisco CA

Posted 13 July 2006 - 04:08 PM

First make sure the page load before you try to access any objects, but your script in a function and call in when the page load.

Also, it's always better to use document.getElementById

NoGray.com


#3 mojito

mojito
  • Members
  • PipPipPip
  • Advanced Member
  • 74 posts

Posted 13 July 2006 - 04:20 PM

Thanks

I tried this
var sel=document.getElementById("sel2");
alert(sel);

returns or rather alerts "null"

so it still doesnt work.
hmmmmm.


#4 nogray

nogray
  • Members
  • PipPipPip
  • Advanced Member
  • 930 posts
  • LocationSan Francisco CA

Posted 13 July 2006 - 04:31 PM

when you use document.getElementById, the object has to have an id property
<select name="sel2" id="sel2".........

I tried your original code, and I found out you have an id for the form, but not a name
just add the name property to the form and it should work
<form id="places" name="places"............

NoGray.com


#5 mojito

mojito
  • Members
  • PipPipPip
  • Advanced Member
  • 74 posts

Posted 13 July 2006 - 05:12 PM

now in my js console  i get document.places has no properties
var sel= document.places.getElementById("sel2");

still not havin it!

#6 nogray

nogray
  • Members
  • PipPipPip
  • Advanced Member
  • 930 posts
  • LocationSan Francisco CA

Posted 13 July 2006 - 06:39 PM

you miss understood my comments

If you want to use document.getElementById("sel2") the select have to have an id
you cannot have document.places.getElementById

If you use your same code above (the same script you posted) all you need to do is add the name to the form
<form id="places" name="places"............

and keep the sel as is
var sel = document.places.sel2;

NoGray.com


#7 mojito

mojito
  • Members
  • PipPipPip
  • Advanced Member
  • 74 posts

Posted 14 July 2006 - 01:57 PM

Hi no grey

No I got you but I tried both ways as well anyway. Nothing is working, I need to return to a simple example and get that working in ff, then see why it isnt working for the ajax, though at this stage it should be very simple.

I should say that this javascript is running inside a CMS joomla to be exact. But I dont think this should affect it.

thanks for the help, what might I do to get a simple version working.


#8 nogray

nogray
  • Members
  • PipPipPip
  • Advanced Member
  • 930 posts
  • LocationSan Francisco CA

Posted 14 July 2006 - 04:58 PM

Ok, I am attaching a version without the ajax stuff, you'll notice I have names and ids for everything. This should work in any browser
<html>
<head>
<title></title>
<script language="javascript">
function which_sel(){
	// you can do this
	var sel = document.places.sel2;
	alert(sel);
	
	// or this
	var sel2 = document.getElementById('sel2');
	alert(sel2);
}
</script>
</head>
<body onload="which_sel();">

<form id="places" name="places" name="form1" method="post" action="">
  <select name="sel1" id="sel1" onchange="javascript:sendRequest('foo')">
    <option>unnamed1</option>
    <option>unnamed2</option>
  </select>
  <select name="sel2" id="sel2" onchange="javascript:alert(this);">
    <option>unnamed1</option>
    <option>unnamed2</option>
  </select>
</form>
</body>
</html>

NoGray.com


#9 mojito

mojito
  • Members
  • PipPipPip
  • Advanced Member
  • 74 posts

Posted 14 July 2006 - 06:06 PM

im assuming its a typo but you have 2x name attributes on the form.

I will try this code as standalone in my ap. But it doesnt work with the ajax.
thanks

#10 mojito

mojito
  • Members
  • PipPipPip
  • Advanced Member
  • 74 posts

Posted 14 July 2006 - 07:47 PM

Thanks for your support, i realise it is something to do with the CMS (joomla) as if the page isnt being sucked through that it is fine and works, but I need to go to that forum to check there now.

thanks for the help.




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users