I am dynamically getting a form with ajax and having it displayed in a tooltip. I can successfully get the forms as expected but it only appears to be submitting the first form.
I am doing the submission stuff in the success: function since that is where i get the dynamic forms.
$('.EditGallery').each(function()
{
$(this).qtip({
content: {
text: "Loading...",
ajax: {
url:$(this).attr('href'),
type: "GET",
success: function(data, status) {
this.set('content.text', data);
$(document).on('submit', '.EditGalleryForm', function(e) {
e.preventDefault();
$.ajax({
beforeSend: function() {
$('#EditGalleryResults').html('');
},
complete: function () {
$('#EditGalleryResults').html('FORM SUCCESSFULLY SUBMITTED!');
}
});
});
}
}
},
hide: {
fixed: true,
delay: 100
},
style: 'wiki'
});
//$(this).qtip('click', true);
});
So essentially when i click submit on a form FORM SUCCESSFULLY SUBMITTED! only shows for the first form i submit then it gets stuck in the first tool tip and doesn't work in the rest unless i refresh the page and submit again.
I found the problem it was because i had the tag ID setting the data rather than CLASS. Apparently ID has to be a unique identifier, which i did not know.