Javascript function returning null

JavaScript
1

Hi everyone!

I have a problem on populating my combos on a jsp file.

I have the following script:

function updateSelectOptions(lookupUrl, parentSelectElementId, childSelectElementId) {
    var parentSelectRef = $('#' + parentSelectElementId);
    var childSelectRef  = $('#' + childSelectElementId);

    $.getJSON(lookupUrl,
        {searchId: parentSelectRef.val()}, 
        function(data) {
            var html = '<option value=""></option>';
            var len = data.length;
            for (var i = 0; i< len; i++) {
                html += '<option value="' + data[i].id + '">' + data[i].descricao + '</option>';
            }

            childSelectRef.html(html);
        }
    );

on a JSP page to populate 2 comboboxes, chaining them. I mean, when I select a value on the first one, the second one is populated based on the first one’s value.

BUT, when I change selection on the parent combo, Firebug points the following error:

parentSelectRef is null
 {searchId: parentSelectRef.val()},

My combos are:
Pais (COUNTRY)

<form:select 
  path="paisId" 
  items="${listaPaises}"
  itemLabel="descricao" itemValue="id"   onchange="updateSelectOptions('${lookupStatesUrl}', 'paisId', 'ufId')">
    form:option value=""></form:option>
</form:select>

Uf (STATE)

<form:select 
  path="ufId" 
  items="${listaUfs}"
  itemLabel="descricao" itemValue="id"   onchange="updateSelectOptions('${lookupCitiesUrl}', 'ufId', 'cidadeId')"/>

Cidade (CITY)

<form:select 
  path="cidadeId" 
  items="${listaCidades}" 
  itemLabel="descricao" 
  itemValue="id"/>

What could be wrong? I’m really stuck in here…

Thanks in advance!

2

Erm .jsp? Isn’t that java extension, not javascript?

3

As you can see I’m mentioning that I have a JS code included in a JSP page. Take a look at the first code I posted.

4

Javascript directly manipulates the raw HTML code, so can you please show us the HTML code (not the JSP code) for the forms. If need be, you can view the source of rendered web page to get that.

5

Here it is:
(The javascript function I posted before is in the included file ‘select.js’)

The 3 selects that are supposed to be chained are almost in the end of the code

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  <style type="text/css" media="all">   
    @import url("/Portal/static/styles/style.css");
  </style> 
  <style type="text/css" media="all">   
    @import url("/Portal/static/styles/main.css");
  </style> 
  <style type="text/css" media="all">   
    @import url("/Portal/static/styles/menu.css");
  </style> 
    <style type="text/css" media="all">   
    @import url("/Portal/static/styles/jquery-ui-1.8.6.custom.css");
  </style>
  <style type="text/css" media="all">   
    @import url("/Portal/static/styles/modalbox.css");
  </style> 


<script src="" type="text/javascript"></script>
<script type="text/javascript"
	src="/Portal/static/js/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript"
	src="/Portal/static/js/jquery/jquery-ui-1.8.6.custom.min.js"></script>
<script type="text/javascript"
	src="/Portal/static/js/jquery/jquery.displaytag-ajax-1.2.js"></script>
<script type="text/javascript"
	src="/Portal/static/js/jquery/jquery.meio.mask.js"></script>
<script type="text/javascript"
	src="/Portal/static/js/prototype.js"></script>
<script type="text/javascript"
	src="/Portal/static/js/scriptaculous.js?load=builder,effects"></script>
<script type="text/javascript"
	src="/Portal/static/js/modalbox.js"></script>
<script type="text/javascript"
	src="/Portal/static/js/select.js"></script>

	
<script type="text/javascript">
	jQuery(document).ready(function($){

		$('input:text').setMask();
		$(".toggle_container").hide();

		$("h2.trigger").click(function() {
			$(this).toggleClass("active").next().slideToggle("slow");
		});

	});
</script>
</head>

<body id="">
<div id="centro">
<div id="header">
<div id="marca_icp"></div>
<div id="login">
<div id="login_left">
<div id="login_right"> 
	<form action="/Portal/j_spring_security_check" method="post"><input
		type='text' name='j_username' id='j_username' value='' /> <input
		type='password' name='j_password' id='j_password' /> <input 
		type='submit' value='Login'/></form>
</div>
</div>

</div>
<div id="marca"><img class="" alt=""
	src="/Portal/static/images/marca_tcec.png" /></div>

</div>
<div id="titulo">
<h2>Portal de Educação</h2>
</div>
<div id="omenu">
<ul id="menu">
	<li style="padding: 0;"><img class="" alt=""
		src="/Portal/static/images/omenu_left.png" /></li>
	<li class="evento"><a href="#">Eventos</a>
	<ul id="instrutores">

		<li><img class="corner_inset_left" alt=""
			src="/Portal/static/images/corner_inset_left.png" /> <img
			class="corner_inset_right" alt=""
			src="/Portal/static/images/corner_inset_right.png" /></li>
		
		
		
		
		<li><a href="/Portal/evento/previstos/">Previstos</a></li>
		<li><a href="/Portal/evento/emandamento/">Em Andamento</a></li>
		<li><a href="/Portal/evento/realizados/">Realizados</a></li>
				
		
		<li class="last"><img class="corner_left" alt=""
			src="/Portal/static/images/corner_left.png" /> <img
			class="middle" alt="" src="/Portal/static/images/dot.gif" />
		<img class="corner_right" alt=""
			src="/Portal/static/images/corner_right.png" /></li>

	</ul>
	</li>
	<li style="padding: 0; background: none; margin-top: -9px;"></li>
	<li><a href="/Portal/instrutor/form">Instrutores</a> 
				
	</li>

	
	
	<li style="padding: 0;"><img class="" alt=""
		src="/Portal/static/images/omenu_right.png" /></li>

</ul>
</div>
<div id="geral">

<div class="bordaBox"><b class="b1"></b><b class="b2"></b><b
	class="b3"></b><b class="b4"></b>
<div class="conteudo">
<h2></h2>
<div class="bordaBox2"><b class="b1"></b><b class="b2"></b><b
	class="b3"></b><b class="b4"></b>
<div class="conteudo"> 








<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />




<div class="nav"><span class="menuButton"><a
	href="/Portal/tipolocalizacaoevento/" class="list">Listagem</a></span></div>
<div class="body">
<h1>Incluir - Localização do Evento</h1>


 <form id="tipolocalizacaoevento" action="/Portal/tipolocalizacaoevento" method="POST">
	<div class="dialog">
	<table>
		<tbody>

			<tr class="prop">
				<td valign="top" class="name"><label for="descricao">Descrição:</label></td>

				<td><input id="descricao" name="descricao" style="width:400px" type="text" value="" size="100" maxlength="100"/>* </td>

			</tr>
			<tr class="prop">
				<td valign="top" class="name"><label for="paisId">País:</label></td>

				<td>




<select onchange="updateSelectOptions('/Portal/tipolocalizacaoevento/lookupStatesWithinCountry', 'paisId', 'ufId')" 
name="paisId" 
id="paisId">
<option value="43">Brasil</option>
<option value="100">Afeganistão</option>
<option value="200">Zambia</option>
</select>
					 </td>
			</tr>

			<tr class="prop">
				<td valign="top" class="name"><label for="uf">UF:</label></td>

				<td>
<select onchange="updateSelectOptions('/Portal/tipolocalizacaoevento/lookupCitiesWithinState', 'ufId', 'cidadeId')" 
name="ufId" 
id="ufId">
  <option value="50">AC</option>
  <option value="51">AL</option>
  <option value="53">AM</option>
  <option value="60">AP</option>
  <option value="61">BA</option>
  <option value="62">CE</option>
  <option value="63">DF</option>
  <option value="64">ES</option>
  <option value="65">GO</option>
  <option value="66">MA</option>
  <option value="67">MG</option>
  <option value="68">MS</option>
  <option value="69">MT</option>
  <option value="70">PA</option>
  <option value="71">PB</option>
  <option value="72">PE</option>
  <option value="73">PI</option>
  <option value="74">PR</option>
  <option value="75">RJ</option>
  <option value="76">RN</option>
  <option value="77">RO</option>
  <option value="78">RR</option>
  <option value="79">RS</option>
  <option value="80">SC</option>
  <option value="81">SE</option>
  <option value="82">SP</option>
  <option value="83">TO</option>
</select>
</td>

			</tr>
			<tr class="prop">
				<td valign="top" class="name"><label for="cidadeId">Cidade:</label></td>

				<td>
<select 
name="cidadeId" 
id="cidadeId">
  <option value="675">Fortaleza</option>
  <option value="3291">Recife</option>
</select>
 </td>
			</tr>




		</tbody>
	</table>
	</div>
	<div class="buttons"><input id="criar" type="submit" class="save"
		value="Incluir" /></div>
</form></div>

</div>
<b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
</div>
</div>
<b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
</div>
</div>

<div id="footer"></div>
</div>
</body>
</html>
6

That you for that.

Nothing is standing out as being the cause of the problem though, so next from here is for us to investigate a live test page that exhibits the problem.