Hello all
I have a problem that has been discussed several times on this list,
but I could not find a satisfactory solution yet.
I created a regular html page. I have a onclick event which triggers
an ajax call. This ajax call runs a very simple php script on my
server, which returns some html as well as a little jquery call that
uses the preceding html. The problem is that the javascript is
evaluated before the html is loaded into the DOM, and it can't find
the html id it is supposed to manipulate.
Here is a simplified version of my code
page:
<html>
.
.
<body>
<div id="button">button</div>
<script type="text/javascript">
function displayAjax(data)
{
$("#button").after(data);
}
$("#button").click(function(){
$.post('ajax.php', '',function(data){displayAjax(data);});
});
</script>
</body>
</html>
ajax.php:
<?php
die('<div id="result">result</div>
<script type="text/javascript">
function test()
{
alert($("#result").length);
}
test();
</script>');
?>
So the problem is that the javascript is evaluated before #result
exists in the DOM.
Now I know that I can move my test function from ajax.php to the page
initiating the ajax call, but it doesn't really make sense, as this
piece of javascript is very specific to the html defined in ajax.php.
I also saw that some people on the list worked around that by using a
setTimeout, but honestly I'd rather not do that.
So, if someone knows how to do that the right way, please let me know.
Also, if what I am trying to do is downright impossible, let me know
too please.
Happy Holidays!!
Pierre
