Question

I have a page that contains a div. I load another page in to that via various links on my page. One of these pages that loads in to the div has a form on it, and that form submits data to a PHP page and updates a div within that page.

So the strcture is:

Main Page
-Main page DIV
–Internal page
—Form
—Internal page DIV
—-Submitted data should be shown here
—/Internal page DIV
–/Internal page
-/Main page DIV
/Main page

(I hope that makes some sense).

In my main page I have the following code:

$(document).ready(function()
{

$('#create').submit(function() {

$.ajax(
    {

    data: $(this).serialize(),

    type: $(this).attr('method'),

    url: $(this).attr('action'),

    success: function(response)
        { // on success..

        $('#created').html(response);

        }

    });

return false;
});

$("#content").load("content.html");

});

Then within the internal page that is loaded in to the DIV I have the following:

<form id="create" method="POST" action="create.php">
<input type="text" name="url">
<input type="submit" value="Create" /> 

<div id="created"></div>

However all that happens is that the create.php page loads in the main window, rather than within the div “created”.

This works if it is on just one page, so I assume it’s something to do with including one div inside another. Can anyone help?

Thanks

Answer 1

for dynamic content (content added after page load) you must utilise the live event listener.

$('#create').live ('submit', function() {

give that a go, submit support was added in jQuery 1.4 roughly I think.

here is a example Fiddle: http://jsfiddle.net/nFQ7S/