SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Javascript function returning null

    Hi everyone!

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

    I have the following script:

    Code JavaScript:
    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:

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

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

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

    Cidade (CITY)
    Code HTML4Strict:
    <form:select 
      path="cidadeId" 
      items="${listaCidades}" 
      itemLabel="descricao" 
      itemValue="id"/>

    What could be wrong? I'm really stuck in here..

    Thanks in advance!

  2. #2
    SitePoint Evangelist bals28mjk's Avatar
    Join Date
    Aug 2007
    Posts
    405
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Erm .jsp? Isn't that java extension, not javascript?

  3. #3
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by mrmgomes View Post
    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.
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Code HTML4Strict:
    <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. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by mrmgomes View Post
    Here it is:
    (The javascript function I posted before is in the included file 'select.js')
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •