编辑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,以便它按照需要工作?我没有找到任何具体信息,所以感谢您的帮助!
答案 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>
答案 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>