Hi,
I have done a lot of searching and experimenting and haven't come up
with a solution to my issue. There have been some people with
somewhat similar questions, but nobody seems to be trying to replace
the entire html node in a document and have all the script tags
(especially including the $(document).ready() stuff).
Essentially what I am trying to do (and why I'm doing it) is submit a
form via AJAX that is self-posting (action=""). The back-end is done
via PHP which takes care of handling the POST data when posted to. I
do self-posting so that if a client doesn't have JS enabled, the form
works normally. The form just updates itself and needs to display the
updated information, so when it's posted to, the output is essentially
the new HTML I want to display - no problem without JS... but using
AJAX is where my troubles come in.
The page contains some script tags in the head node - two are external
JS files, but the last one is inline code that uses jQuery(function($)
{...}); to run stuff once the document is ready (this is doing just a
few things now - some dynamic css formatting, binding a keypress event
and also binding a submit event for the form so it can do an AJAX
post).
I can grab the new data and replace the old data in the DOM just fine,
but since jQuery apparently only runs the document.ready stuff once
(and then even worse - discards it), the replaced data doesn't have
any of the css styling or events bound to it which are all required.
My thought was that perhaps (and this would be preferrable) I could
replace the entire html node in the document with the new data I got
back from my AJAX post - and have the JS code run again (which would
re-execute the document.ready stuff and hopefully trigger a new
document.ready event so it would do the css styling and bind events to
the new data I placed in the DOM).
However, the problem seems to be with the script tags in the head
node. If I watch in firebug, I see my browser fetch the two external
JS files if I do replace the entire html node... but I don't know
what's going on with my inline code, because all three of the script
tags that are in the head get *removed* when I replace the html node
in the DOM. So, I don't know if that inline code is being executed,
or simply ignored... and also, no new document.ready event is being
triggered (and triggering it manually doesn't seem to do anything for
me).
The only working solution I've come up with is to put all the code I
want to run at document.ready in to a function I called doInit(), and
then have my document.ready function call that doInit() function...
and when I do my AJAX post, after I replace the new data in the DOM
(I'm not replacing the entire html node - just my form that changes),
I call doInit() manually again. This works, but is certainly not
optimal in case in the future I want to add functions or other stuff
when I POST the form data (as in, the document changes when the form
is submitted).
Is there any way to have jQuery replace the entire html node *and* re-
load all the script tags, including inline code + trigger a
document.ready event?
(PS, I'm using AJAX for the form submittal for a few reasons - one
specifically being to circumvent the browser cache - as in, making
sure that going back/forward in browser history doesn't cause those
"you must re-submit data to display this page" if you go back in
history).
Thanks!
