Javascript 初始化前调用的Jquery UI对话框_Javascript_Jquery_Html_Jquery Ui

Javascript 初始化前调用的Jquery UI对话框

javascript jquery html jquery-ui

Javascript 初始化前调用的Jquery UI对话框,javascript,jquery,html,jquery-ui,Javascript,Jquery,Html,Jquery Ui,编辑3：正如我在下面提到的，我正在尝试初始化标题中的对话框，然后在正文中任何地方的任何页面中使用它。如果我在调用它之前初始化它，它工作正常。。。但这意味着每次我调用它时都要初始化它。我想初始化一次并多次使用根据Sunny的请求，代码/HTML序列如下： WORDPRESS HEADER.PHP <!DOCTYPE html> <html xmlns="http<?php echo (is_ssl())? 's' : ''; ?>://www.w3.org/1999

编辑3：正如我在下面提到的，我正在尝试初始化标题中的对话框，然后在正文中任何地方的任何页面中使用它。如果我在调用它之前初始化它，它工作正常。。。但这意味着每次我调用它时都要初始化它。我想初始化一次并多次使用

根据Sunny的请求，代码/HTML序列如下：

WORDPRESS HEADER.PHP

<!DOCTYPE html>
<html xmlns="http<?php echo (is_ssl())? 's' : ''; ?>://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head>
... Wordpress / template stuff here...
    <script src="../sma-js/jquery-ui-1.10.3/js/jquery-ui-1.10.3.custom.min.js" charset="utf-8"></script>
    <script src="../sma-js/d3.v3/d3.v3.min.js" charset="utf-8"></script>
    <script src="../sma-js/d3.tip.min.js" charset="utf-8"></script>
    <script src="../sma-js/sma.d3.js" charset="utf-8"></script>
    <script src="../sma-js/google-maps/js/handlebars-1.0.0.js" charset="utf-8"></script>
    <script src="../sma-js/google-maps/js/jquery.storelocator.js"></script>  
    <script src="../sma-js/moment.min.js" charset="utf-8"></script>
    <script src="../sma-js/jquery.validate.min.js" charset="utf-8"></script>    
    <script src="../sma-js/sma.js" charset="utf-8"></script>
    <script type="text/javascript">
        jQuery(window).load(function() {
            jQuery(".loader").fadeOut("slow");
        });
    </script>
    <script type="text/javascript">
    jQuery(document).ready(function(){
        jQuery( "#dialog" ).dialog({
            modal: true,
            autoOpen: false,
            buttons: { Ok: function() { jQuery( this ).dialog( "close" );  } }, 
            show: { effect: "blind", duration: 1000 }, 
            hide: { effect: "explode", duration: 1000 }
        });
    });
    </script>
</head>
<?php
    $body_class = '';
    $wrapper_class = '';
    if(is_page_template('blank.php')):
    $body_class = 'body_blank';
    $wrapper_class = ' class="wrapper_blank"';
    endif; 
?>

<body <?php body_class(array($avada_color_scheme,$body_class)); ?>>
    <div class="loader"></div>
    <div id="dialog" title="ABC" ></div>

编辑：根据Lal的建议，我尝试在标题中使用相同的reult“document ready”（文档准备就绪）：

<script type="text/javascript">
jQuery(document).ready(function(){
   jQuery( "#dialog" ).dialog({
      modal: true,
      autoOpen: false,
      buttons: { Ok: function() { jQuery( this ).dialog( "close" );  } }, 
      show: { effect: "blind", duration: 1000 }, 
      hide: { effect: "explode", duration: 1000 }
   });
});
</script>

我在页面的头部有初始化代码（我理解在加载期间首先执行该代码），如下所示：


jQuery（“对话框”）.dialog({
莫代尔：是的，
自动打开：错误，
按钮：{Ok:function（）{jQuery（this）.dialog（“close”）；}，
显示：{效果：“盲”，持续时间：1000}，
隐藏：{效果：“爆炸”，持续时间：1000}
});

以及以下DIV作为BODY open标记后的第一条语句：

我将页面中的某个地方用JS作为表单提交的一部分调用，例如密码重置表单。

为什么会这样？我应该把这个小部件的div/init JS放在哪里，这样它就可以按需要工作？我还没有找到任何具体的信息，所以你的帮助是感激的

试试这个：

<script type="text/javascript">
 jQuery(document).ready(function(){
  jQuery( "#dialog" ).dialog({
       modal: true,
       autoOpen: false,
       buttons: [{ text:'OK',click: function() 
           {jQuery(this).dialog("close");}
          }], 
       show: { effect: "blind", duration: 1000 }, 
       hide: { effect: "explode", duration: 1000 }
    });

   $("#dialog").dialog("open"); // just to try, remove this
 });
</script>


jQuery（文档）.ready（函数（）{
jQuery（“对话框”）.dialog({
莫代尔：是的，
自动打开：错误，
按钮：[{文本：'OK'，单击：函数（）
{jQuery（this.dialog（“close”）；}
}], 
显示：{效果：“盲”，持续时间：1000}，
隐藏：{效果：“爆炸”，持续时间：1000}
});
$（“#dialog”）.dialog（“open”）；//要尝试，请删除此
});

示例fiddle:

根据您的标记，我猜jQuery是在某些页面上的jqueryui之后调用的。要么将所有脚本放在

之后，要么强制它在

中加载jQuery，并确保脚本在它之后

<?php wp_footer(); ?>

<!-- insert scripts after this point -->
 <script src="../sma-js/jquery-ui-1.10.3/js/jquery-ui-1.10.3.custom.min.js" charset="utf-8"></script>
<script src="../sma-js/d3.v3/d3.v3.min.js" charset="utf-8"></script>
<script src="../sma-js/d3.tip.min.js" charset="utf-8"></script>
<script src="../sma-js/sma.d3.js" charset="utf-8"></script>
<script src="../sma-js/google-maps/js/handlebars-1.0.0.js" charset="utf-8"></script>
<script src="../sma-js/google-maps/js/jquery.storelocator.js"></script>  
<script src="../sma-js/moment.min.js" charset="utf-8"></script>
<script src="../sma-js/jquery.validate.min.js" charset="utf-8"></script>    
<script src="../sma-js/sma.js" charset="utf-8"></script>
<script type="text/javascript">
    jQuery(window).load(function() {
        jQuery(".loader").fadeOut("slow");
    });
</script>
<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery( "#dialog" ).dialog({
        modal: true,
        autoOpen: false,
        buttons: { Ok: function() { jQuery( this ).dialog( "close" );  } }, 
        show: { effect: "blind", duration: 1000 }, 
        hide: { effect: "explode", duration: 1000 }
    });
});
</script>


jQuery（window）.load（函数（）{
jQuery（“.loader”）.fadeOut（“慢”）；
});
jQuery（文档）.ready（函数（）{
jQuery（“对话框”）.dialog({
莫代尔：是的，
自动打开：错误，
按钮：{Ok:function（）{jQuery（this）.dialog（“close”）；}，
显示：{效果：“盲”，持续时间：1000}，
隐藏：{效果：“爆炸”，持续时间：1000}
});
});

附言

在标记中，您在

结尾之前缺少一个结束脚本标记。我认为您需要使用document.ready（）您好，谢谢您的建议。我也试过了，结果也一样。。。这似乎只是页面加载时代码运行的顺序……错误本身已经足够清楚了。您试图在jQueryUI的dialog方法完全加载之前调用它。所以首先初始化jQueryUI，然后调用它。太好了，为什么初始化没有发生，但页面已经完成加载？我在表单提交中调用该对话框作为成功消息的一部分，并收到此错误（该错误发生在页面加载很久之后）。为什么？我想问题是应该在哪里初始化它，以便它可以在页面中的任何位置使用？谢谢hi test如果您的页面通过在控制台中键入以下内容来加载jQuery ui：

jQuery.ui

如果返回未定义，则不加载您的jq ui hi Sunny，我将其放在前面的标题中，但结果相同。谢谢你的建议。嗨，桑妮，恐怕也是这个结果。我想我应该把代码放在头上对吗？谢谢你的建议。顺便说一句，如果我在调用对话框之前放置了我或你的初始化代码，它就可以正常工作了！如果我在对话框DIV之后将init留在头部甚至身体中，它就会失败。。。好像它没有在页面加载时运行init…我相信您没有将代码包装到$（document）.ready（）中。我已经更新了答案。好的，Sunny，它起作用了！血腥的赛博鸭已经悄然死去，我的保存没有更新服务器php文件。。。你能相信吗？？谢谢你的帮助！！！嗨，Akamaozu，这是一部关于我这边错误的喜剧，感谢CYBERDUCK安静地死去，文件在本地更新，但不在服务器上。。。结束脚本标记是我的复制/粘贴错误，但它在代码中。谢谢你的帮助！没什么大不了的。我经历过更糟糕的事情：）

Uncaught Error: cannot call methods on dialog prior to initialization; attempted to call method 'open'

<script type="text/javascript">
jQuery( "#dialog" ).dialog({
    modal: true,
    autoOpen: false,
    buttons: { Ok: function() { jQuery( this ).dialog( "close" );  } }, 
    show: { effect: "blind", duration: 1000 }, 
    hide: { effect: "explode", duration: 1000 }
});
</script>

<script type="text/javascript">
 jQuery(document).ready(function(){
  jQuery( "#dialog" ).dialog({
       modal: true,
       autoOpen: false,
       buttons: [{ text:'OK',click: function() 
           {jQuery(this).dialog("close");}
          }], 
       show: { effect: "blind", duration: 1000 }, 
       hide: { effect: "explode", duration: 1000 }
    });

   $("#dialog").dialog("open"); // just to try, remove this
 });
</script>

<?php wp_footer(); ?>

<!-- insert scripts after this point -->
 <script src="../sma-js/jquery-ui-1.10.3/js/jquery-ui-1.10.3.custom.min.js" charset="utf-8"></script>
<script src="../sma-js/d3.v3/d3.v3.min.js" charset="utf-8"></script>
<script src="../sma-js/d3.tip.min.js" charset="utf-8"></script>
<script src="../sma-js/sma.d3.js" charset="utf-8"></script>
<script src="../sma-js/google-maps/js/handlebars-1.0.0.js" charset="utf-8"></script>
<script src="../sma-js/google-maps/js/jquery.storelocator.js"></script>  
<script src="../sma-js/moment.min.js" charset="utf-8"></script>
<script src="../sma-js/jquery.validate.min.js" charset="utf-8"></script>    
<script src="../sma-js/sma.js" charset="utf-8"></script>
<script type="text/javascript">
    jQuery(window).load(function() {
        jQuery(".loader").fadeOut("slow");
    });
</script>
<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery( "#dialog" ).dialog({
        modal: true,
        autoOpen: false,
        buttons: { Ok: function() { jQuery( this ).dialog( "close" );  } }, 
        show: { effect: "blind", duration: 1000 }, 
        hide: { effect: "explode", duration: 1000 }
    });
});
</script>