duan051347
2012-06-18 01:52
浏览 98

确保在调用js函数之前加载div

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条回答 默认 最新

  • dosgy00204 2012-06-18 02:43
    已采纳

    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.

    点赞 打赏 评论
  • douchuanghan1344 2012-06-18 02:00

    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();
           });
       }
    }
    
    点赞 打赏 评论
  • duanfa2014 2012-06-18 02:01

    One thing you can do is, put the function in <head> tags, and add that js function to onload property of the div. e.g.

    <body onload="scaleQuote()">
    
    点赞 打赏 评论