[英]JavaScript confirm box with redirect
I need to ask a user to confirm the delete of his post. 我需要请用户确认删除他的帖子。 I managed it using the confirm function from jQuery but I wanted to create an overlay box with more customization options and after browsing the web I came up with this:
我使用jQuery的Confirm函数对其进行了管理,但我想创建一个具有更多自定义选项的覆盖框,并且在浏览网络后提出了以下建议:
Info: CMS in question is Wordpress 信息:有问题的CMS是Wordpress
So first the theme: index.php: 所以首先主题:index.php:
<li class="EditDel">
<?php u_delete_post_link('Delete', '', ''); ?>
</li>
PHP function: PHP功能:
function u_delete_post_link($link = 'Delete This', $before = '', $after = '') {
global $post;
$message = "Are you sure you want to delete ".get_the_title($post->ID)." ?";
$delLink = wp_nonce_url( get_bloginfo('url') . "/wp-admin/post.php?action=delete&post=" . $post->ID, 'delete-post_' . $post->ID);
$htmllink = "<a href='' onclick = \" u_ask_go('".$message."','".$delLink."' ) \"/>".$link."</a>";
echo $before . $htmllink . $after;
}
Now for the actual problem the link above fires a js function with the message and the link: 现在针对实际问题,上面的链接使用消息和链接触发js函数:
function u_ask_go(msg,link)
{
u_confirm(msg,link, function () {
window.location.href = arguments[0];
});
}
and the u_confirm function: 和u_confirm函数:
function u_confirm(message, link, callback) {
jQuery('#confirm').modal({
closeHTML: "<a href='#' title='Close' class='modal-close'>x</a>",
position: ["20%",],
overlayId: 'confirm-overlay',
containerId: 'confirm-container',
onShow: function (dialog) {
var modal = this;
modal.link = link;
//console.log(modal.link);
jQuery('.message', dialog.data[0]).append(message);
// if the user clicks "yes"
jQuery('.yes', dialog.data[0]).click(function () {
// call the callback
if (jQuery.isFunction(callback)) {
//console.log(modal.link);
callback.apply(modal.link);
}
// close the dialog
modal.close(); // or $.modal.close();
});
}
});
}
Problem1: The callback function does not fire 问题1:回调函数不触发
Problem2: The dialog collapses and the link executes without user pressing anything 问题2:对话框折叠并且链接在没有用户按下任何内容的情况下执行
Observation: Before the modal div is appended the link variable is visible but not in the function on the dialog yes button seems not visible 观察:在附加模态div之前,链接变量是可见的,但对话框中的函数中不可见,是的按钮似乎不可见
Hope someone can help 希望有人能帮忙
EDIT (HTML buildup): 编辑(HTML积累):
<!-- modal content -->
<div id='confirm'>
<div class='header'><span>Confirm</span></div>
<div class='message'></div>
<div class='buttons'>
<div class='no simplemodal-close'>No</div><div class='yes'>Yes</div>
</div>
</div>
<!-- preload images -->
<div style='display:none'>
<img src='img/confirm/header.gif' alt='' />
<img src='img/confirm/button.gif' alt='' />
</div>
EDIT2: 编辑2:
echo wp_enqueue_script('simplemodal', $blogroot.'/js/jquery.js');
echo wp_enqueue_script('simplemodal', $blogroot.'/js/jquery.simplemodal.js', array("jquery"));
echo wp_enqueue_script('confirmtest', $blogroot.'/js/confirmtest.js', array("jquery"));
The best thing to do is not to put your function in an onClick="" attribute, you should use jQuery to call the function like so, and store your variables in custom data attributes (info here ) 最好的做法是不要将函数放在onClick =“”属性中,应该像这样使用jQuery调用函数,并将变量存储在自定义数据属性中(信息在此处 )
jQuery: jQuery的:
$('a#confirmDelete').live('click', function(e) {
// Prevent default
e.preventDefault();
var msg = $(this).attr('data-message');
var link = $(this).attr('data-del-link');
u_confirm(msg,link, function () {
window.location.href = arguments[0];
});
});
HTML: HTML:
function u_delete_post_link($link = 'Delete This', $before = '', $after = '') {
global $post;
$message = "Are you sure you want to delete ".get_the_title($post->ID)." ?";
$delLink = wp_nonce_url( get_bloginfo('url') . "/wp-admin/post.php?action=delete&post=" . $post->ID, 'delete-post_' . $post->ID);
$htmllink = "<a href="#" id="confirmDelete" data-message="' . $message . '" data-del-link="' . $delLink . '" />".$link."</a>";
echo $before . $htmllink . $after;
}
Ok got it to work Thanks again to Coulton to point me in the right direction. 好的,让它正常工作再次感谢Coulton向我指出正确的方向。 But just for the meaning of completing the answer:
但仅出于完成答案的意思:
I had to include the scripts the right way in the functions.php file not the header( note: the first parameter needs to differ for every script thats why it didnt load correcty in the first place): 我必须以正确的方式将脚本包含在functions.php文件中,而不要包含标头( 注意:每个脚本的第一个参数都需要有所不同,这就是为什么它首先没有正确加载的原因):
echo wp_enqueue_script('jquery', $blogroot.'/js/jquery.js'); 回声wp_enqueue_script('jquery',$ blogroot。'/ js / jquery.js'); echo wp_enqueue_script('simplemodal', $blogroot.'/js/jquery.simplemodal.js', array("jquery"));
回声wp_enqueue_script('simplemodal',$ blogroot。'/ js / jquery.simplemodal.js',array(“ jquery”))); echo wp_enqueue_script('confirmtest', $blogroot.'/js/confirmtest.js', array("jquery"));
回声wp_enqueue_script('confirmtest',$ blogroot。'/ js / confirmtest.js',array(“ jquery”)));
In my case the following 2 lines didn't work: 在我的情况下,以下两行无效:
var msg = $(this).attr('data-message'); var msg = $(this).attr('data-message');
var link = $(this).attr('data-del-link'); var link = $(this).attr('data-del-link');
Had to replace them with this: 不得不用这个替换它们:
var msg = jQuery(this).attr('data-message');
var link = jQuery(this).attr('data-del-link');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.