加載頁面，然后啟動啟動箱

Question

我正在一個像這樣工作的功能：

1. 點擊鏈接
2. 根據鏈接單擊頁面加載后，將顯示一個特定的模態窗口
3. 進行模態
4. 功能結束

我遇到的問題是模式不會加載，或者將加載但在頁面加載后立即關閉。 這是我正在使用的功能

$(function(){
    $('#new-po').click(function(){
        window.location.href= $(this).attr('href');
        bootbox.dialog({
            title: "Create New Purchase Order",
            message: '<div class="row">'+
            '<div class="col-md-12">'+
            '<form action="" method="post" id="create-po-form">'+
            '<div class="form-group">'+
            '<div class="col-md-12">'+
            '<div class="form-group row">'+
            '<div class="col-md-6">'+
            '<label>Invoice Number</label>'+
            '<input type="text" class="form-control" id="inv_num"/>'+
            '</div>'+
            '<div class="col-md-6">'+
            '<label>Vendor</label>'+
            '<input type="text" class="form-control" id="vendor"/>'+
            '</div>'+
            '</div>'+
            '</div>'+
            '<div class="col-md-12">'+
            '<div class="form-group row">'+
            '<div class="col-md-6">'+
            '<label>Invoice Number</label>'+
            '<input type="text" class="form-control" id="total"/>'+
            '</div>'+
            '<div class="col-md-6">'+
            '<label>Vendor</label>'+
            '<select class="form-control" id="status">'+
            '<option value="" selected> -Status-</option>'+
            '<option value="Open">Open</option>'+
            '<option value="Closed">Closed</option>'+
            '<option value="Void">Void</option>'+
            '</select>'+
            '</div>'+
            '</div>'+
            '</div>'+
            '</div>'+
            '</form>'+
            '</div>'+
            '</div>',
            buttons:{
                success:{
                    label: "Create PO",
                    className: 'btn-success',
                    callback:function(){


                    }
                }
            },
            onEscape: function(){

            }
        });
    });
});

它使用了bootbox擴展，到目前為止，我發現它沒有沖突，因此，除非另有說明，否則我將繼續使用它。 我試過使用$(document).ready() ， $(window).load() ， $(function(){}和其他一些東西，但沒有任何效果。

同樣作為參考，我在每個頁面上的頁面結構如下所示：

<!-- The header contains the html starting tags and the head section -->
<? include "/inc/header/overall_header.php"; ?>
    <!-- html content here -->
<!-- The footer contains the scripts for the pages and the html ending tag -->
<? include "/inc/header/overall_header.php"; ?>

Answer 1

您應該移動window.location.href= $(this).attr('href'); 這到對話框的成功處理程序

Answer 2

頁面刷新后，將停止javascript並加載新腳本。

加載新頁面時，您應該在新頁面中激活啟動箱代碼。

例如：

第1頁：

$(function(){
    $('#new-po').click(function(){
        window.location.href= $(this).attr('href');   // point to page#2
        // at this point you can't show bootbox or modify the page!
        //  - the browser will simply refresh the page to a new url and your changes will not be shown
    });
}

第2頁：

$(function(){
    // show bootbox ...
})

還有其他選項可以實現所需的功能-使用iframe將頁面加載到框架中，或者（更好）使用ajax加載html並顯示它。