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.
<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.
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.