[jQuery] $.load() not working as it should after submitting a form
Hello!
I have a problem with dynamically loaded pages. If I load a page into
a div like this:
$('#my_content').load(page, null, function(){
top.console.debug('LOADED ADD FORM');
$('#OrderAddForm').submit(function(){
formSubmit(this.id, 'Shranjujem naročilo');
return false;
});//on submit
});//load
The content get loaded perfectly. On this particular page I have a
form that I am about to submit via ajax like this:
function formSubmit(frm, load_msg){
var FORM = document.getElementById(frm);
var params = {};
var tINPUTS = $(FORM)
.find("input[@checked], input[@type='text'], input[@type='hidden'],
input[@type='password'], input[@type='submit'], option[@selected],
textarea")
.filter(":enabled")
.each(function(){
params[ this.name || this.id || this.parentNode.name ||
this.parentNode.id ] = this.value;
});//each
$('#side_form').html('<a href="#" id="side_form_close">Zapri</a><div
id="my_content"><br /><br /><center><b style="font-size:16px; font-
weight:bold; color:black;">'+load_msg+'</b><br /><img src="/img/
loader.gif"></center></div>');
$('#side_form_close').bind('click', function(){
$('#side_form').empty().SlideOutRight(300);
});
$.ajaxSetup({dataType: "json"});
$.get(FORM.action, params, function(data){
onFormSuccess(data);
});
}
Te function collects the form's parameters and send them via $.get().
And it all works GREAT. From the server side I do get a JSON object
that is then inserted into the table in function onFormSuccess.
Now to the problem. I have a button that when clicked this form shows
up. If I click it on the page refresh the form show correctly and each
time I click it after that before actually submitting the form, the
page gets loadded perfectly into the #my_content. But after I submit
the form it stops working! Even If I clean up the #my_content or
comletly remove all the chillds on its container (#slide_form contains
#my_content).. it stops working. So after submiting he form when I
click on this button that runs $('#my_content').load(page,....); the
ajax response is actually the HTML code of the page, but the
#my_content never gets rendered with that response. This iss really
odd, since I thought it must be something wrong between the relation
client side > server side, but no... everything works fine. Server
side actually creates the perfect response is just the div doesnt get
rendered!
What is even more strange is that the javascript on the form (that
should be dynamically loaded) gets executed!!!! just the div
(#my_content) doesnt get filled with that html!
I have tryed many solutions (submitting the form via $.post() or to
actually replace the $.load function with $.ajax() one:
$.ajax({
type: "GET",
url: page,
dataType: 'html',
error: function (msg){
$('#side_form #my_content').html(msg.responseText);
},
success: function(msg){
alert('ok');
$('#side_form #my_content').html(msg);
}
});
it the same. Now when I am writing this msg It occured to me that
maybe the response is not in the right format so I tryed to insert
before $.load() $.ajaxSetup({dataType: "html"}); but then it doesnt
work even before form submit!! so my guess is the problem lies in
here!
Please. This problem is bugging me for two days now and I am really
loosing my mind and I know I wont sleep till I solve this thing! I
would really, really appresciate all your suggestions!