jQuery Modal Confirmation在php中不起作用

时间:2013-12-23 18:49:58

标签: php jquery

我正在尝试在类似于this的php上构建jQuery模式确认对话框

此PHP页面最后嵌入到父php页面中。

麻烦的是,虽然我能够让它完全适用于jsfiddle,我无法让它在我的php页面上工作。

My jsfiddle version

我的jQuery块:

var submitForm = $('#form_twake');
submit = false;

$("#confirm").dialog({
    resizable: false,
    height: 140,
    modal: true,
    autoOpen: false,
    buttons: {
        'Submit': function() {
            $(this).dialog('close');
            submit = true;
            submitForm.submit();
        },
        'Cancel': function() {
            $(this).dialog('close');
        }
    }
});
$("#confirm").parent().appendTo($("#form_twake")); 

submitForm.submit(function() {
    if (submit) {
        return true;
    } else {
        $("#confirm").dialog('open');
        return false;
    }
});

HTML code:

<form id="form_twake" name="form_twake" method="POST" action="index.php">
    <div>
    <input type="submit" value="Destroy" />
    </div>
</form>

<div id="confirm" title="Empty the recycle bin?">
  <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>

事实上,'div id confirm'的内容会在整个呈现的PHP页面上显示。提交确实提交了表单,但没有弹出所需的确认。有没有jQuery专门为PHP处理的事情顺序?我做了所有可能的研究,这让我有了一个工作的JSFiddle。我似乎无法超越那个!

任何帮助都会非常感激!

[编辑]添加php代码;

以下是CSS&amp; libs:

    <link rel="stylesheet" type="text/css" href="includes/style.css">
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

PHP表单:

<form id="form_twake" name="form_twake" method="POST" action="index.php">
    <div class="box fade-in one">
        <center><img style="border:solid 2px #FFCC00;" src="<?php echo $bud ['profile_image_url'];?>" alt="Avi" hspace="5" vspace="5" border="5"/></center>
        <?php echo $bud ['name'];?></br></br>
        <input type="submit" value="Destroy" class="twake-button" />
    </div>
</form>

1 个答案:

答案 0 :(得分:1)

在您的css文件中,默认隐藏确认div:

#confirm {
    display: hidden;
}

然后,确保在页面加载后运行javascript代码。这可以使用以下代码完成:

<script type="text/javascript">

$(function() {
   // put your code here.
});

</script>