“(1) collect things that command our attention; (2) process what they mean and what to do about them; and (3) organize the results, which we (4) review as options for what we choose to (5) do.”

Trouble with jQuery Ajax load() method

Sunday, October 21st, 2007   by Favio

When you do a search on google with the title of this post as the keywords expecting to get some light on a problem you have been banging your head for some hours; it is most likely you won't find a solution. The first reason is that jQuery does rock, and the second is that the documentation for the load() method is very clear. So I'm writing this to make a stop in time and try not to forget this small observation.

As part of a side project of mine, I'm coding a small app with CI as the php framework and jQuery as the js one. Problem is: I've been trying to Ajax load some content without success for some time.

The Problem

I can't load the following content:

PLAIN TEXT
HTML:
  1. <form action="<?php echo base_url(); ?>ranges/edit"  id="addRangeForm" method="post">
  2.         <fieldset>
  3.           <label for="name">Name:</label>
  4.           <input type="text" name="name" id="name" value="<?php echo $this->validation->name;?>" />
  5.           <label for="display">Display Name:</label>
  6.           <textarea name="display_name"  id="display" rows="1" cols="20"><?php echo $this->validation->display_name;?></textarea>
  7.           <label for="description">Description:</label>
  8.           <input type="hidden" name="id" value="" />
  9.           <textarea name="description" id="description" rows="5" cols="20"></textarea>
  10.           <p>
  11.             <button type="submit" class="forms">Save Range</button><a class="hidinglink" id="hideForm" href="<?php echo base_url(); ?>">Remove form</a>
  12.           </p>
  13.           <p class="clear"></p>
  14.         </fieldset>
  15.       </form>

Firebug says the request is being done, it shows the response on the console, but not on the browser window. After switching to $.get, loading in other containers (only when loading into the whole document object, the form was displayed), and trying static content. I finally managed to find why it wasn't showing.

The Solution

Remove the opening form tag! This one:

PLAIN TEXT
HTML:
  1. <form action="<?php echo base_url(); ?>ranges/edit"  id="addRangeForm" method="post">

And we got us some nice content load.

After investigating the issue further, the reason of this behavior was that the id of the form that I wanted to load, was already being used! So the solution really is:

Id's must be unique through the whole document.

Conclusion

Fun times. (>_<)

This entry was posted on Sunday, October 21st, 2007 at 10:17 pm and is filed under Ajax, Javascript. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Leave a Reply




Old and not that old articles

« C’mere

jQuery.slideDown flicker when a form is inside the sliding container »