Php 确保在调用js函数之前加载了div_Php_Javascript_Jquery_Html

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

php javascript jquery html

Php 确保在调用js函数之前加载了div,php,javascript,jquery,html,Php,Javascript,Jquery,Html,编辑：我使用ajax在我的内容中加载文本，这就是为什么头上加载不适用的原因我这里有一个几乎完成的项目在左下角输入gen 1:1开始我唯一的问题是，在调用自动调整窗口中文本内容的函数之前，确保显示主文本的主div已完全加载有时我的autofit函数工作，有时不工作，我能想到为什么它不工作的唯一原因可能是调用该函数时div尚未完全加载 echo "<div id=\"verse\">" . $bcontent . "</div>"; echo "<script

编辑：我使用ajax在我的内容中加载文本，这就是为什么头上加载不适用的原因

我这里有一个几乎完成的项目在左下角输入gen 1:1开始

我唯一的问题是，在调用自动调整窗口中文本内容的函数之前，确保显示主文本的主div已完全加载

有时我的autofit函数工作，有时不工作，我能想到为什么它不工作的唯一原因可能是调用该函数时div尚未完全加载

echo "<div id=\"verse\">" . $bcontent . "</div>";

echo "<script type='text/javascript'>
    scaleQuote();";
echo "</script>";

scalekote示例可以在我的另一个问题中找到

这是我做的搜索，我不知道如何将这些帖子中提供的解决方案应用到我的案例中，这就是为什么我自己要问一个问题。希望我不会因为缺乏研究而被否决

提前谢谢，对不起我的英语

文件引用

-我的JS文件

-我的html文件

-我的css文件

除了获取数据库内容外，我的php文件与上面发布的内容基本相同。

完成答案的重新编辑。由于JQuery库已经存在于您的页面中，所以这一点毫无用处：

/* 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();
}

换成

function showVerse(str)
{
    $("#versePlace").html("");
    $('#versePlace').load('getverse.php?q='+str, function() {
        scaleQuote();
    });
}

因此，我们在回调函数中移动scalekote

echo "<div id=\"verse\">" . $bcontent . "</div>";

echo "<script type='text/javascript'>
    scaleQuote();";
echo "</script>";

原因：ScaleNote函数现在在原始HTML页面中被调用，您的第一个问题是，如果您在AJAX结果中输出脚本，它将不会被执行

第二个主要问题是仅在AJAX请求完成后调用scalekote函数。在AJAX中，A意味着异步，它大致意味着调用方继续其执行，而不管请求是否完成

因此，我们必须确保在AJAX请求响应完成后调用ScaleNote

JQuery的.load函数调用一个AJAX页面，并将结果放在括号$versePlace中的元素中，其中表示id。您通过GET方法用对象{q:str}传递数据，然后定义一个回调函数，该函数保证仅在AJAX的请求-响应完成后运行

使用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();
       });
   }
}

完成答案的重新编辑。由于JQuery库已经存在于您的页面中，所以这一点毫无用处：

/* 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();
}

换成

function showVerse(str)
{
    $("#versePlace").html("");
    $('#versePlace').load('getverse.php?q='+str, function() {
        scaleQuote();
    });
}

因此，我们在回调函数中移动scalekote

echo "<div id=\"verse\">" . $bcontent . "</div>";

echo "<script type='text/javascript'>
    scaleQuote();";
echo "</script>";

原因：ScaleNote函数现在在原始HTML页面中被调用，您的第一个问题是，如果您在AJAX结果中输出脚本，它将不会被执行

第二个主要问题是仅在AJAX请求完成后调用scalekote函数。在AJAX中，A意味着异步，它大致意味着调用方继续其执行，而不管请求是否完成

因此，我们必须确保在AJAX请求响应完成后调用ScaleNote

使用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();
       });
   }
}

您可以做的一件事是，将函数放入标记中，并将该js函数添加到div的onload属性中。 e、 g

简短回答

在MovePrevious函数中，添加ScaleNote；在Ajax的回调函数中：

document.getElementById("versePlace").innerHTML=xmlhttp.responseText;
scaleQuote(); //<-- here

长话短说

您在Ajax调用中使用的是标准JS。像您这样的标准Ajax调用只将响应HTML放在带有innerHTML的元素中，而不在响应文本中执行任何脚本标记。它与jQuery的/方法不同，jQuery的/方法解析响应文本中的任何脚本标记，并在添加到DOM时执行

那为什么它大部分时间都有效呢

因为你的MoveNext函数已经有了一个ScaleNote；函数调用在其回调内部。

简短回答

在MovePrevious函数中，添加ScaleNote；在Ajax的回调函数中：

document.getElementById("versePlace").innerHTML=xmlhttp.responseText;
scaleQuote(); //<-- here

长话短说

那为什么它大部分时间都有效呢

因为你的MoveNext函数已经有了一个ScaleNote；函数调用在其回调内部。

当您执行该代码时，肯定会加载div。PHP首先解析整个脚本，然后输出HTML代码。

javascript函数在页面中显示内容后运行。如果您认为您的问题与页面加载有关，请在正文的onload事件中调用您的函数-这将确保该函数仅在页面完全加载时执行。然而，我确实认为问题在于你的功能。我建议在你的问题中加入JS和一些可能的css/html，并重现你的问题。如果你没有使用jQuery或类似的工具，那么在你的body onload属性中加入对ScaleNote的调用。这仍然会有问题，这就是为什么使用jQuery的文档就绪功能更好的原因。@FabriciomattéI添加了文件引用。重现错误。在我的项目文本框中输入1ki 6:31。按“下一步”，您将看到文本变大。按“上一步”将不会调整其大小。next和previous我们调用同一个php文件唯一的区别是next上传递的参数是+1，previous上传递的参数是+1-1@CharlesWayne我已经阅读了您的页面代码，您使用的是标准JS Ajax而不是jQuery Ajax。我已经提交了一份解释答案，如果您有任何问题，请发表评论。=]可以肯定的是，当您执行该代码时，会加载div。PHP首先解析整个脚本，然后输出HTML代码。javascript函数在页面中显示内容后运行。如果您认为您的问题与页面加载有关，请在正文的onload事件中调用您的函数-这将确保该函数仅在页面完全加载时执行。然而，我确实认为问题在于你的功能。我建议在你的问题中加入JS和一些可能的css/html，并重现你的问题。如果你没有使用jQuery或类似的工具，那么在你的body onload属性中加入对ScaleNote的调用。这仍然会有问题，这就是为什么使用jQuery的文档就绪功能更好的原因。@FabriciomattéI添加了文件引用。重现错误。在我的项目文本框中输入1ki 6:31。按“下一步”，您将看到文本变大。按“上一步”将不会调整其大小。next和previous我们调用同一个php文件唯一的区别是next上传递的参数是+1，previous上传递的参数是+1-1@CharlesWayne我已经阅读了您的页面代码，您使用的是标准JS Ajax而不是jQuery Ajax。我已经提交了一份解释答案，如果您有任何问题，请发表评论。=]对不起，我忘了提。内容是使用ajax填充的，这就是为什么它不在document ready事件中的原因。您好，cairo，很抱歉，您需要再解释一下，因为我对ajax、php和js非常熟悉。在您的编辑。你是说我需要在我的html文件中调用它，在那里我调用了ajax？我用文件引用编辑了我的文章。我希望你不介意我让你检查一下，让我知道我应该把你的代码放在哪里。感谢从头开始，请检查：嗨，Fabrico，在这种情况下，OP是一个初学者，我认为这有公平的教育目的。值得一提的是，他已经有了一个功能强大的工具jquery，它可以极大地减少和简化编码，使调试变得轻而易举。很适合指出参考资料是有用的，你是对的；通常我会添加链接，这次忘了。另一件事是，jQuery对象没有value属性，所以$txtCurrent.value将返回未定义的。您应该使用$txtCurrent.val来检索jQuery对象的第一个元素的值，或者使用$txtCurrent[0].value或$txtCurrent.get0.value来获取文字DOM元素的值属性。所有3个元素都将返回相同的值。对不起，我忘了提及。内容是使用ajax填充的，这就是为什么它不在document ready事件中的原因。您好，cairo，很抱歉，您需要再解释一下，因为我对ajax、php和js非常熟悉。在您的编辑。你是说我需要在我的html文件中调用它，在那里我调用了ajax？我用文件引用编辑了我的文章。我希望你不介意我让你检查一下，让我知道我应该把你的代码放在哪里。感谢从头开始，请检查：嗨，Fabrico，在这种情况下，OP是一个初学者，我认为这有公平的教育目的。值得一提的是，他已经有了一个功能强大的工具jquery，它可以极大地减少和简化编码，使调试变得轻而易举。很适合指出参考资料是有用的，你是对的；通常我会添加链接，这次忘了。另一件事是，jQuery对象没有value属性，所以$txtCurrent.value将返回未定义的。您应该使用$txtCurrent.val来检索jQuery对象的第一个元素的值，或者使用$txtCurrent[0].value或$txtCurrent.get0.value来获取文字DOM元素的值属性。所有3个元素都将返回相同的值。感谢您的评论，很抱歉我忘了提到我正在使用ajax在我的内容上加载文本。body上的onload将不起作用谢谢您的评论，很抱歉我忘了提到我正在使用ajax在我的内容上加载文本。装在身上没用你钉死了！谢谢你的简短回答。关于你的长期

答复这是否意味着我做得不对？我可能是因为我在谷歌上搜索了这个项目的大部分内容，有些可能没有注明日期。如果你不介意的话，你能再多给我一点时间吗？回答：非常感谢@CharlesWayne，这并不是说你做错了，但是，你可以使用更多的jQuery——特别是，我的链接方法将提供更可读的代码。老实说，由于它工作得非常好，我认为没有必要重写所有代码。不过，这可能会对您未来的项目非常有用。=]此外，Cravro刚刚更新了他的答案，并给出了一个示例，说明了如何简化代码，这基本上是另一种用隐式回调传递GET请求的简写方法。你做得很好！谢谢你的简短回答。关于你冗长的回答。这是否意味着我做得不对？我可能是因为我在谷歌上搜索了这个项目的大部分内容，有些可能没有注明日期。如果你不介意的话，你能再多给我一点时间吗？回答：非常感谢@CharlesWayne，这并不是说你做错了，但是，你可以使用更多的jQuery——特别是，我的链接方法将提供更可读的代码。老实说，由于它工作得非常好，我认为没有必要重写所有代码。不过，这可能会对您未来的项目非常有用。=]此外，Cravo刚刚更新了他的答案，并举例说明了如何使用简化代码，这基本上是用隐式回调传递GET请求的另一种简写方法。