I would like to know why Jquery's .on was never called to rebind my submit button after a AJAX call, Since on is suppose to replace .bind I could not fathom that it was the problem. but i tried various things and the only thing to have worked was to use .bind instead of .on.
My form is attached to a dropdown list that will generate new data into the form on click. This was done on a AJAX Get call and on success i was selecting the form and using:
$('#formname').on('submit',function(){})
And i then tried
$('#formname').on('submit','form', function(){})
admittedly i got the above from a question that was never answered. jquery-ajax-form-using-onsubmit
I also tried attaching the on submit to the body element as it doesn't change with the AJAX function $('.container').on('submit','#formname', function(){}) suggested here:
jquery bind functions and triggers after ajax call
but that was also ignored. I then tried replacing the type of 'submit' to 'button' then assign .on('click', etc... in case you could not rebind a submit button after the form had reached the DOM.
but the only thing that worked was calling .bind, i am lost as i am wanting to use the correct standards. my completed code looks like so, note wherever there is a .bind it was previously an .on which was not invoked.
<script type="text/javascript">
(function ($){
$('select#<?php echo $dropdown; ?>').on('click', function(){
var value = $(this).val();
var form = 'form#<?php echo $gridName; ?>'
$.ajax({
type: "GET",
url: $(form).prop('action') ,
data: { gg:value },
dataType: "html",
cache: false,
success: function(htmlResponse){
var src = $(form , htmlResponse);
$('.page_1col_col1').html( src );
//replace the submit with a input buton to tesk on click
//$('#<?php echo $gridName; ?> input[type="submit"]').prop('type','button');
$('#<?php echo $gridName; ?>').bind('submit',function (){
rowBinding();
//replace the submit with a input btn
$.ajax({
type:"POST",
url: $(form).prop('action'),
dataType: "html",
cache: false
});
});
}
});
});
}(jQuery));
$(document).ready(function(){
$('#<?php echo $gridName; ?>').bind('submit',rowBinding);
});
function rowBinding(){ //stuff}</script>
