Trouble with jQuery Ajax load() method

Published on Sunday, 21 October 2007.

UPDATE 4 March 2009 This may not be what you are looking for! My problem at that time, was me using a duplicate element Id. Element Ids must be unique. So, most likely, it has nothing to do with your AJAX problems. I hope this saves you some time.

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:

<form action="<?php echo base_url(); ?>ranges/edit"  id="addRangeForm" method="post">
        <fieldset>
          <label for="name">Name:</label>
          <input type="text" name="name" id="name" value="<?php echo $this->validation->name;?>" />
          <label for="display">Display Name:</label>
          <textarea name="display_name"  id="display" rows="1" cols="20"><?php echo $this->validation->display_name;?></textarea>
          <label for="description">Description:</label>
          <input type="hidden" name="id" value="" />
          <textarea name="description" id="description" rows="5" cols="20"></textarea>
          <p>
            <button type="submit" class="forms">Save Range</button><a class="hidinglink" id="hideForm" href="<?php echo base_url(); ?>">Remove form</a>
          </p>
          <p class="clear"></p>
        </fieldset>
      </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:

<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. (>_<)

blog comments powered by Disqus

Possibly related posts

23 Nov 2007 »: Forms in CodeIgniter Views
15 Aug 2007 »: A study of PHP Frameworks
26 Oct 2007 »: WordPress Plugin: Recent Posts grouped by year, month, and day
11 Aug 2006 »: Learning AJAX
02 Mar 2009 »: Installing Jekyll on Ubuntu 8.10