“Do not fall into the error of the artisan who boasts of twenty years experience in his craft while in fact he has only one year of experience - twenty times.”

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 »