在初始化之前调用Jquery UI对话框

时间:2014-03-01 08:41:59

标签: 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/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>

然后在页面的模板中(在<?php get_footer(); ?>语句之后),我将对话框作为表单提交的一部分调用,如下所示:

WORDPRESS PAGE TEMPLATE - LOGIN.PHP

// validate signup form on keyup and submit
    jQuery("#forgot-pwd").validate({
        rules: {
            email: {
                required: true,
                email: true
            }
        },
        messages: {
            email: "Please enter a valid email address",
        },
        submitHandler: function(form) {

            jQuery(".loader").fadeIn("fast");

            var ResetPwd = generatePassword();
            var ResetSalt = generateSalt();

            jQuery.ajax({                                      
                url: "/sma-php/pwd.php?var=PWDRES&typ=r&ste=" + Base64.encode(jQuery('#user-email').val()) + "&rp=" + Base64.encode(ResetPwd) + "&rs=" + Base64.encode(hex_sha512(ResetSalt)),  //the script to call to get data          
                dataType: 'text',                                                                                                               //data format
                success: function(data) {                                                                                                       //on receive of reply
                    jQuery(".loader").fadeOut("fast");
                    jQuery( "#dialog" ).html( data ).dialog( "open" );
                },
                error: function(data) {                                                                                                         //on receive of reply
                    jQuery( "#dialog" ).html( "An error occurred while sending you a new password.<br/><br/>Please try again or contact ABC for help...").dialog( "open" );         
                }, 
                complete: function(data) {                                                                                                      //on receive of reply
                    jQuery(".loader").fadeOut("fast");
                } 
            });
        }
    });

编辑2:简而言之,我试图在标题中初始化对话框,然后在任何页面中使用它;的身体,任何地方。如果我在调用它之前初始化它就可以正常工作......但这意味着每次调用它都会初始化它。

顺便说一句,我在JS中打开对话框作为表单提交的一部分在页面的BODY中打开,如下所示:(数据是AJAX调用的结果):

jQuery( "#dialog" ).html( data ).dialog( "open" );

编辑:在Lal的建议中,我在下面的标题中尝试了“文档就绪”,同样的结果:

<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 UI对话框小部件,但我一直在(在一些而不是所有的函数调用上):

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>

以及以下DIV作为BODY打开标记后的第一个语句:

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

为什么会这样?我应该在哪里放置这个小部件的div / init JS,以便它按照需要工作?我没有找到任何具体信息,所以感谢您的帮助!

2 个答案:

答案 0 :(得分:0)

试试这个:

<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>

示例小提琴:http://jsfiddle.net/sunnykumar08/7j3fA/

答案 1 :(得分:0)

从你的标记中,我猜测jQuery是在某些页面上的jQuery UI之后调用的。将所有脚本放在<?php wp_footer(); ?>之后或强制它在<?php wp_header(); ?>中加载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>

的PS。

在您的标记中,您在</head>

结束之前缺少结束脚本标记