Question

I have a page with a number of different forms generated from a database. Each form has been given a div at the bottom to load data into. These have dynamic id: tempdiv_1 tempdiv_2 etc.

I am trying to get the jquery to work to update the divs based on something like this.input.val which is a hidden input with the section ID.

Code:

<script type="text/javascript">
$('#formdataAddForm').live('submit' , function() { // catch the form's submit event
   $.ajax({ // create an AJAX call...
        data: $(this).serialize(), // get the form data
        type: $(this).attr('method'), // GET or POST
        url: $(this).attr('action'), // the file to call
        success: function(response,data) { // on success..
            $.fancybox({
            maxWidth    : 800,
            maxHeight   : 200,
            fitToView   : false,
            width       : '70%',
            height      : '70%',
            autoSize    : false,
            closeClick  : false,
            openEffect  : 'none',
            closeEffect : 'none',
            content     : response
        });
        $('#tempdiv_'+(('input[id="formdataSection"]', form).val())).load('/page/list.php');
    }
});
return false; // cancel original event to prevent form submitting
});
</script>

The bit I can’t get to work is something along these lines:

 $('#tempdiv_'+(('input[id="formdataSection"]', form).val())).load('/page/list.php');

How can I get jquery to update a dynamic div? The forms all have the same ID so I cannot call form id.

Answer 1

try this code:

 <script type="text/javascript">
   $('#formdataAddForm').live('submit' , function() { // catch the form's submit event
   var form = $(this)
   $.ajax({ // create an AJAX call...
        data: $(this).serialize(), // get the form data
        type: $(this).attr('method'), // GET or POST
        url: $(this).attr('action'), // the file to call
        success: function(response,data) { // on success..
            $.fancybox({
            maxWidth    : 800,
            maxHeight   : 200,
            fitToView   : false,
            width       : '70%',
            height      : '70%',
            autoSize    : false,
            closeClick  : false,
            openEffect  : 'none',
            closeEffect : 'none',
            content     : response
        });
        $('#tempdiv_'+($('input[id="formdataSection"]', form).val())).load('/page/list.php');
    }
});
return false; // cancel original event to prevent form submitting
});
</script>

If code in you question is the same you are trying to run – that should help. In your code form variable is not defined and you missed $ in this line: $('#tempdiv_'+($('input[id="formdataSection"]', form).val())).load('/page/list.php');

Besides, it would be really better if you will use name attribute instead of id for inputs where you store div id. ID must be unique and name – no. Suppose form context (second parameter in $('input[id="formdataSection"]', form)) should help to find correct value (as I remember, I’ve been trying something like that successfuly), but names are more reliable and valid.