Ensure that div is loaded before calling js function
Question
EDIT: iam using ajax to load text in my content that is why onload on head is not applicable.
I have an almost complete project here http://sandbox.littlegraffyx.com/bible/test2.html (enter gen 1:1 on bottom left to start)
The only problem I have is to ensure that my main div where the main text is displayed is fully loaded before I call a function that will autofit the text content on the window.
There are times that my autofit function is working and there are times it isn't and the only reason I can think of why it's not working is maybe the div isn't fully loaded yet when I call the function.
echo "<div id=\"verse\">" . $bcontent . "</div>";
echo "<script type='text/javascript'>
scaleQuote();";
echo "</script>";
The scalequote sample is found in my other question here
Adjust size based on height (vertical length)
Here are the searches I made and I can't see how can I apply the solutions offered in these post in my case that is why I am asking one myself. Hoping I will not be down voted for "lack of research"
How do I run a function only when a div gets loaded?
getting the height and width of a div after loading info into it from an external source with jquery
thanks in advance and sorry for my english
File references
http://pastebin.com/wwQumwKJ - my JS file
http://pastebin.com/FnyST8iz - my html file
http://pastebin.com/BYfSUjQJ - my css file
Except from getting the database contents, my php file is pretty much what is posted above.
3 answers
solution1
2 2012-06-18 02:00:18
Complete re-edit of the answer. As JQuery library is already present in your page this whole bit is useless:
/* Function to get Requested Verse */
function showVerse(str)
{
if (str=="")
{
document.getElementById("versePlace").innerHTML="";
... etc etc.
xmlhttp.open("GET","getverse.php?q="+str,true);
xmlhttp.send();
}
Just replace it with
function showVerse(str)
{
$("#versePlace").html("");
$('#versePlace').load('getverse.php?q='+str, function() {
scaleQuote();
});
}
We are therefore moving scaleQuote() in a callback function.
Reason for this: the
scaleQuote()function is now called in the original HTML page, your first problem is that if you output a script in the AJAX result it won't be executed!The second main concern is to call the scaleQuote() function ONLY AFTER the AJAX request is complete. "A" in AJAX means "asynchronous", it means roughly that the caller continues its execution regardless of whether the request is completed or not.
So we must make sure to call scaleQuote() after the AJAX request-response has completed.
JQuery's .load() function calls an AJAX page and puts the result in the element in parentheses ( $("#versePlace") , where # stands for "id"). You pass your data via GET method with an object {q: str} and then you define a callback function that is guaranteed to run only after the request-response thing of Ajax is completed.
Other functions can be reduced A LOT with JQuery:
/* Function to get Next Verse */
function MoveNext()
{
var str = parseInt($("#txtCurrent").val()) + 1;
if (str!="")
{
$("#versePlace").html("");
$('#versePlace').load('move.php?q='+str, function() {
scaleQuote();
});
}
}
solution2
2 ACCPTED 2012-06-18 02:43:45
Short answer
Inside your MovePrevious() function, add scaleQuote(); inside the Ajax's callback:
document.getElementById("versePlace").innerHTML=xmlhttp.responseText;
scaleQuote(); //<-- here
Long Answer
You're using standard JS on your Ajax calls. Standard Ajax calls such as yours, which simply places the response HTML inside an element with innerHTML does not execute any script tags inside of the response text. It's different than jQuery's append / appendTo methods, which parse any script tags inside of your response text and executes it upon being added to the DOM.
Why does it work "most of the time" then?
Because your MoveNext() function already has a scaleQuote(); function call inside of its callback.
solution3
0 2012-06-18 02:01:13
One thing you can do is, put the function in <head> tags, and add that js function to onload property of the div. eg
<body onload="scaleQuote()">
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.