Ajax.Updater not displaying

[Al Gateway]

Hi,

I don't have a lot of experience with Ajax. Updater and I'm having trouble getting it to work.
I have a web application with select boxes for building, floor and room. When I select a building I want the appropriate floors to display in the floor select box. Similarly for rooms.
I have used Firebug to debug this and the Response statement is correct.
The problem is it is not displayed on the screen (the web page doesn't change).

My building_select.html:

<table>
 <tr>
  <th><span class="redbold">*</span><label for="building">Building</label></th>
  <td>
    <div id="divId_building">
     [% PROCESS buildings.tt %]
   </div>
  </td>
 </tr>
 <tr>
  <th><span class="redbold">*</span><label for="floor">Floor</label></th>
  <td>
    <div id="divId_floor">
      [% PROCESS floors.tt %]
    </div>
  </td>
 </tr>
 <tr>
  <th><span class="redbold">*</span><label for="room">Room</label></th>
  <td>
    <div id="divId_room">
     [% PROCESS rooms.tt %]
   </div>
  </td>
 </tr>
</table>

My buildings.tt

<select id="building" size="1" name="building" onchange="insertFloors(this, '[% self_url %]')">
 <option value="-1" selected>Select a building.</option>
  [% FOREACH building IN buildings %]
      <option value="[% building.buildingseq %]" >[% building.buildingname_upper %]</option>
  [% END %]
</select>

My floors.tt

<select id="floor" name="floor" size="1" onchange="insertRooms(this, '[% self_url %]')" >
 <option value="-1" selected>Select a floor.</option>
  [% FOREACH floor IN floors %]
      <option value="[% floor.floor %]" >[% floor.floor %]</option>
  [% END %]
</select>

My .js funtion:

function insertFloors(buildingNode, self_url) {
  var buildingSeq;
 
  buildingSeq = buildingNode.options[buildingNode.selectedIndex].value;
  alert("selected blgd: "+buildingSeq);
 
  new Ajax.Updater('divId_floor', self_url, {parameters: 'rm=floors&building_seq='+buildingSeq, asynchronous: true});
}
 

This is what I get in the Response when I select a building:
 
[CODE]
<select id="floor" name="floor" size="1" onchange="insertRooms(this, 'https://www1.umn.edu/cgi-bin/do?user=nts&prog=order_services_lim.cgi')" >
 <option value="-1" selected>Select a floor.</option>
      <option value="00" >00</option>
      <option value="01" >01</option>
</select>

It is what expect, but it doesn't make it to the web page.
Any advice would be appreciated.

Thank you!

[Bear Bibeault]

Use the Firebug DOM inspector to see what the DOM structure is after the response is returned. From just a limited glance at your code I suspect that you may be trying to shove a select inside another.

[Al Gateway]

Thanks for your reply.
I did use the DOM Inspector and I don't see anything wrong, but the floor select box shows no floors:

<div id="divId_floor">
<select id="floor" onchange="insertRooms(this, 'https://www1.umn.edu/cgi-bin/do?user=nts&prog=order_services_lim.cgi')" size="1" name="floor">
<option selected="" value="-1">Select a floor.</option>
</select>
</div>
 

Al

[Eric Pascarello]

Shouldn't you be passing in the div id and not the select id to be updated?

Eric

[Al Gateway]

I thought I was:

<div id="divId_floor">

new Ajax.Updater('divId_floor', self_url, {parameters: 'rm=floors&building_seq='+buildingSeq, asynchronous: true});

I'm sorry, it must be something really obvious.
I just don't see it...

[Bear Bibeault]

Is the DOM inspector showing the valid DOM structure that you are expecting?

[Al Gateway]

The DOM shows no change in the div where the data is supposed to be inserted.
The same empty floor select box.

[Al Gateway]

This is what the DOM shows for the floor div:

<div id="divId_floor">
<select id="floor" onchange="insertRooms(this, 'https://www1.umn.edu/cgi-bin/do?user=nts&prog=order_services_lim.cgi')" size="1" name="floor">
<option selected="" value="-1">Select a floor.</option>
</select>
</div>
 

[Bear Bibeault]

Originally posted by Al Gateway:
The DOM shows no change in the div where the data is supposed to be inserted.
The same empty floor select box.

So Prototype isn't doing the update at all from the response?

[Al Gateway]

Yes, Prototype is not updating at all.

[Bear Bibeault]

Can you create sample files that show this issue with the smallest footprint (and without .tt files). I could give things a try locally and maybe shake something loose.

[Eric Pascarello]

Are you cached? Clear the cache and see if it works.

Eric

[Al Gateway]

This is part of a bigger web application written in Perl and that uses CGI::Aplication and Template Toolkit.
So there is no issue with the cache.

Bear Bibeault, I'm not sure what kind of files you need.
I already posted the code that relates to the Ajax issues.
There is also Perl code that reads a database and feeds the .tt (template toolkit) files.
But I that code is working, for example I back get the floors for a certain building, as it can bee seen from the server Response.

[Bear Bibeault]

If you want people to help, you need to be able to provide reproducible cases. Expecting people to set up Perl and tt just to help you is not all that reasonable. What I was asking for was a raw HTML and JS test case that demonstrates your problem that can be run locally for testing. Without that, only thought inspections can take place.

This is not a wasted exercise. In addition to making it possible for others to run the test case, I've often found that the act of trying to set up a minimal test case to reproduce the problem often results in unearthing the original problem itself.
[ May 06, 2008: Message edited by: Bear Bibeault ]

[Bear Bibeault]

Originally posted by Al Gateway:
This is part of a bigger web application written in Perl and that uses CGI::Aplication and Template Toolkit.
So there is no issue with the cache.

Sorry, not getting that. Just because it's part of a web app using the tools you listed, how does that eliminate the possibility of cache issues?

[Al Gateway]

Sorry, not getting that. Just because it's part of a web app using the tools you listed, how does that eliminate the possibility of cache issues?

Because the application is redrawing a page every time, so I'm guessing caching is not the issue.
However, I did clear the cache and tested, I have the same problem.

[Al Gateway]

If you want people to help, you need to be able to provide reproducible cases. Expecting people to set up Perl and tt just to help you is not all that reasonable. What I was asking for was a raw HTML and JS test case that demonstrates your problem that can be run locally for testing. Without that, only thought inspections can take place.

This is not a wasted exercise. In addition to making it possible for others to run the test case, I've often found that the act of trying to set up a minimal test case to reproduce the problem often results in unearthing the original problem itself.

I understand, I'll try to come up with some files.

[Al Gateway]

Let's try this. I have an html file:

<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
 
 <script src="/nts/js/prototype_test.js" type="text/javascript">
 </script>
 
 <script src="/nts/js/order_services.js" type="text/javascript">
 </script>
 
 </head>
 
 
 <body>
 
 <form>
 <table>
 <tr>  
  <th><span class="redbold">*</span><label for="building">Building</label></th>
  <td>
    <div id="divId_building">
     <select id="building" size="1" name="building" onchange="insertFloors(this, 'https://www1.umn.edu/cgi-bin/do?user=nts&prog=order_services_lim.cgi&rm=flo
ors')">
      <option value="-1" selected>Select a building.</option>
  
      <option value="216" >1425 UNIVERSITY AVENUE SE</option>
 
  
      <option value="363" >1701 UNIVERSITY AVENUE SE</option>
  
      <option value="233" >1901 UNIVERSITY AVENUE SE</option>
  
      <option value="76" >19TH AVENUE PARKING RAMP</option>
     </select>
   </div>
  </td>
 </tr>
 <tr>
  <th><span class="redbold">*</span><label for="floor">Floor</label></th>
  <td>
    <div id="divId_floor">
    </div>
  </td>
 </tr>
 </table>
 
 </form>
 </body>
</html>
 

In order_services.js I have:

function insertFloors(buildingNode, self_url) {
  var buildingSeq;
 
  buildingSeq = buildingNode.options[buildingNode.selectedIndex].value;
  alert("self url: " + self_url + ", selected blgd: "+buildingSeq);
 
  new Ajax.Updater('divId_floor', self_url, {parameters: 'building_seq='+buildingSeq, asynchronous: true});
}

The URL for Ajax is calling my cgi application but that should just work remotely.
I mean, if you enter https://www1.umn.edu/cgi-bin/do?user=nts&prog=order_services_lim.cgi&rm=flo
ors&building_seq=216 in your browser you should see a select box with the floors for the 216 building.

In the first html file you should change the path to your prototype file.

Please let me know if I'm missing anything.

Thank you!
[ May 08, 2008: Message edited by: Al Gateway ]

[Bear Bibeault]

One thing I forgot to mention: Please be sure to use UBB code tags when posting code to the forums. Unformatted code is extermely hard to read. Please see this for more information.

You can go back and change your post to add code tags by clicking the .

[Al Gateway]

I just realized that https://www1.umn.edu/cgi-bin/do?user=nts&prog=order_services_lim.cgi is a secure application, so you can't get to it.
So I wrote a small .cgi script that read the building_seq and then prints it:

#!/usr/bin/perl -w
 
use strict;
use CGI qw/:standard/;
use CGI::Carp qw( fatalsToBrowser );
 
my $string       = "X";
my $building_seq = "0";
 
my $q = new CGI;
 
if ( $q->param() ) {
   my $building_seq = $q->param( "building_seq" );
 
   $string = "Building: $building_seq";
}
 
 
print "Content-type: text/html\n\n";
print <<ENDHTML;
<html>
<head>
<title>CGI Test</title>
</head>
<body>
  $string
</body>
</html>
 
ENDHTML
 

Then I changed the .html file to call the .cgi script:

<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
 <script src="/nts/js/prototype_test.js" type="text/javascript">
 </script>
 
 <script type="text/javascript">
  function insertFloors(buildingNode, self_url) {
     var buildingSeq;
 
     buildingSeq = buildingNode.options[buildingNode.selectedIndex].value;
     alert("self url: " + self_url + ", selected blgd: "+buildingSeq);
 
     new Ajax.Updater('divId_floor', self_url, {parameters: 'rm=floors&building_seq='+buildingSeq, asynchronous: true});
  }
 
 </script>
 
 </head>
 
 
 <body>
 
 <form>
 <table>
 <tr>
  <th><span class="redbold">*</span><label for="building">Building</label></th>
  <td>
    <div id="divId_building">
     <!-- <select id="building" size="1" name="building" onchange="insertFloors(this, 'https://www1.umn.edu/cgi-bin/do?user=nts&prog=order_services_lim.cgi&r
m=floors')"> -->   
     <select id="building" size="1" name="building" onchange="insertFloors(this, 'https://www1.umn.edu/cgi-bin/do?user=nts&prog=test.cgi')">      
      <option value="-1" selected>Select a building.</option>
 
      <option value="216" >1425 UNIVERSITY AVENUE SE</option>
 
 
      <option value="363" >1701 UNIVERSITY AVENUE SE</option>
 
      <option value="233" >1901 UNIVERSITY AVENUE SE</option>
 
      <option value="76" >19TH AVENUE PARKING RAMP</option>
     </select>
   </div>
  </td>
 </tr>
 <tr>
  <th><span class="redbold">*</span><label for="floor">Floor</label></th>
  <td>
    <div id="divId_floor">
    </div>
  </td>
 </tr>
 </table>
 
 </form>
 </body>
</html>

This time I put the javascript insertFloors function in the html.
You only need to change the path to prototype.js
However, when I look at my .html file in a browser and select a building, I don't even get a response from the server anymore.
Any help would be greatly appreciated.
[ May 08, 2008: Message edited by: Al Gateway ]

[Al Gateway]

From a previous message it sounds like you might not have Perl installed, but I thought you have to call some sort of script from Ajax.Updater, whether is Perl, or PHP, etc.
I don't know how else to simplify this.
Thanks for trying to help.

[Bear Bibeault]

Ajax can "hit" anything that returns a response. For debug purposes a text file containing the text of a sample response that demonstrates the issue would work just fine.

(Yeah, I have Perl installed, but setting up a CGI environment is more work).

[Al Gateway]

A sample response would be this:

   
 
<select id="floor" name="floor" size="1" onchange="insertRooms(this, 'https://www1.umn.edu/cgi-bin/do?user=nts&prog=order_services_lim.cgi')" >
 <option value="-1" selected>Select a floor.</option>
      <option value="01" >01</option>
      <option value="02" >02</option>
      <option value="07" >07</option>
      <option value="0B" >0B</option>
      <option value="15" >15</option>
      <option value="36" >36</option>
</select>
 
 

[Bear Bibeault]

What version of Prototype? I'll see if I can try to recreate this over the weekend.

[Al Gateway]

1.4.0