Question

所以，就像标题所说，我试图弄清楚如何定义一个更新或创建客户的模态对话框。然后我只需通过调用它就可以在订单页面或其他页面上显示它......

我是JavaScript新手，但不是编程。在Windows应用程序中，我会创建一个我可以调用并向用户显示的类，但我不确定如何在js中执行此操作。

我已经想出如何使用带有div和iframe的模态对话框，但是让它可以在多个页面上使用，这是我的想法。

请帮忙，谢谢，戴夫

编辑：我不想使用iframe，因为我希望您能够从页面到对话框再次访问字段，然后再返回。

编辑2：所以（记住我是新手）...我创建了主页面（default.aspx）和客户页面（customer.html）以及客户单实例模块（customer.js）。从default.aspx我加载客户模块，为＆＃34;加载＆＃34;添加一个事件处理程序。我创建的自定义事件，它工作，加载表单中的数据。然后我打开客户对话框，它工作，对话框从客户模块加载自己的数据，但是，当我单击对话框中的保存按钮时，数据被正确保存但保存后的客户模块触发了＆＃34; datasaved＆＃34;事件及其未被捕获的default.aspx ...

你能看到有什么不妥吗？这个网站对于我可以在这里粘贴的东西很挑剔，所以如果有什么东西错过了，请告诉我......

的Default.aspx

<script type="text/javascript">
    var customer;
    var customerDialog;

   function showCustomerPopup(closedCallback) {
        var width = $(window).innerWidth;
        if (width > 420)
            width = 420;


        $('#divCustomerPopup').remove();
        $("body").append("<div id='divCustomerPopup' style='display: none;'></div>");
        var divPopup = $("#divCustomerPopup");
        $.get("templates/customer.html", function (data) {
            divPopup.html(data);
        });

        customerDialog = $("#divCustomerPopup").dialog({
            autoOpen: true,
            height: 300,
            width: width,
            modal: true,
        });


    }

    $(function () {
        var custIDField = $("#CustomerID");
        customer = Customer.getInstance();
        if ($.isNumeric(custIDField.val())) {
            customer.load(custIDField.val());
        } else {
            var qID = getParameterByName('customerid');
            if ($.isNumeric(qID)) {
                customer.load(qID);
            } else {
                customer.create();
            }
        }


        $('#CustomerName').on('change', function () {
            showCustomerPopup();
        });

        $("#customer-form").on("submit", function (e) {
            e.preventDefault();
            addCustomer();
        });

        $(customer).on("dataloaded", function (e, data) {
            console.log("dataloaded");
            custIDField.val(data.CustomerID);
            $('#CustomerName').val(data.CustomerName);
            $('#CustomerOnHold').val(data.OnHoldReason);
        });
        $(customer).on("datasaved", function (e, data) {
            console.log("datasaved");
            custIDField.val(data.CustomerID);
            $('#CustomerName').val(data.CustomerName);
            $('#CustomerOnHold').val(data.OnHoldReason);
            customerDialog.dialog('close');
        });

    });

customer.js

<script type="text/javascript">

var Customer =（function（）{ var instance;

function init() {
    var dr = {};

    function FailedCallback(xhr, ajaxOptions, thrownError) {
        if (xhr.responseJSON.Message != undefined) {
            var msg = new String(xhr.responseJSON.Message);
            var event = jQuery.Event("ajaxerror")
            event.data = msg
            $(instance).trigger(event);

            if (msg.contains("login") > 0) {
                window.location.href = websiteBaseUrl + "login.aspx?from=" + encodeURIComponent(window.location.href);
            } else {

            }
        } else {
            alert(xhr.status + ' - ' + thrownError + '\n\n' + xhr.responseText);
        }
    };
    function WebServerCallback(rawresult) {
        var data = jQuery.parseJSON(rawresult.d);
        dr = data;
        var event = jQuery.Event("dataloaded");
        jQuery(instance).trigger(event, dr);
        if (!event.isDefaultPrevented()) 
            refreshForm();
    };
    function WebServerSaveCallback(rawresult) {
        var data = jQuery.parseJSON(rawresult.d);
        dr = data;
        var event = jQuery.Event("datasaved");
        jQuery(instance).trigger(event, dr);
        if (!event.isDefaultPrevented()) {
            refreshForm();
        }
    };

    function NewCustomer() {
        WebServerCall("GetCustomerData", WebServerCallback, FailedCallback, "{'CustomerID':'-1'}")
    };
    function LoadCustomer(CustomerID) {
        WebServerCall("GetCustomerData", WebServerCallback, FailedCallback, "{'CustomerID':'" + CustomerID + "'}")
    };
    function refreshForm() {
        if (dr.CustomerID == undefined) {
            throw "Customer not loaded... Call New or Load";
        }
        $('#customer-CustomerID').val(dr.CustomerID);
        $('#customer-CustomerName').val(dr.CustomerName);
        $('#customer-CustomerSince').val(new Date(dr.CustomerSince).toDateInputValue());
        checkBoxCheck($('#customer-VIP'), dr.VIP);
        checkBoxCheck($('#customer-OnHold'), dr.OnHold);
        checkBoxCheck($('#customer-Tax1Exempt'), dr.Tax1Exempt);
        checkBoxCheck($('#customer-Tax2Exempt'), dr.Tax2Exempt);
        $('#customer-OnHoldReason').val(dr.OnHoldReason);
        $('#customer-PrimaryContactID').val(dr.PrimaryContactID);
        $('#customer-DefaultEmployeeID').val(dr.DefaultEmployeeID);
        $('#customer-Phone1').val(dr.Phone1);
        $('#customer-Phone2').val(dr.Phone2);
        $('#customer-Address1').val(dr.Address1);
        $('#customer-Address2').val(dr.Address2);
        $('#customer-Address3').val(dr.Address3);
        $('#customer-City').val(dr.City);
        $('#customer-Province').val(dr.Province);
        $('#customer-Country').val(dr.Country);
        $('#customer-PostalCode').val(dr.PostalCode);
        $('#customer-Description').val(dr.Description);

    };
    function refreshDR() {
        if (dr.CustomerID == undefined) {
            throw "Customer not loaded... Call New or Load";
        }
        dr.CustomerID = $('#customer-CustomerID').val();
        dr.CustomerName = $('#customer-CustomerName').val();
        dr.CustomerSince = new Date($('#customer-CustomerSince').val());
        dr.VIP = checkBoxCheck($('#customer-VIP'));
        dr.OnHold = checkBoxCheck($('#customer-OnHold'));
        dr.Tax1Exempt = checkBoxCheck($('#customer-Tax1Exempt'));
        dr.Tax2Exempt = checkBoxCheck($('#customer-Tax2Exempt'));
        dr.OnHoldReason = $('#customer-OnHoldReason').val();
        dr.PrimaryContactID = $('#customer-PrimaryContactID').val();
        dr.DefaultEmployeeID = $('#customer-DefaultEmployeeID').val();
        dr.Phone1 = $('#customer-Phone1').val();
        dr.Phone2 = $('#customer-Phone2').val();
        dr.Address1 = $('#customer-Address1').val();
        dr.Address2 = $('#customer-Address2').val();
        dr.Address3 = $('#customer-Address3').val();
        dr.City = $('#customer-City').val();
        dr.Province = $('#customer-Province').val();
        dr.Country = $('#customer-Country').val();
        dr.PostalCode = $('#customer-PostalCode').val();
        dr.Description = $('#customer-Description').val();

    };
    function SaveCustomer() {
        if (dr.CustomerID == undefined) {
            throw "Customer not loaded... Call New or Load";
        }

        var data = "{'CustomerID':'" + $("#customer-CustomerID").val() + "','json':'" + JSON.stringify(dr) + "'}";
        WebServerCall("UpdateCustomerData", WebServerSaveCallback, FailedCallback, data)
    };


    return {
        datarow: function () { return dr; },
        create: NewCustomer,
        load: LoadCustomer,
        save: SaveCustomer,
        loadData: refreshDR,
        loadForm: refreshForm
    };
};

return {
    getInstance: function () {
        if (!instance) {
            instance = init();
        }
        return instance;
    },
    hasInstance: function () {
        return (instance);
    }

};

}）（）;

Customer.html

    <div class="ui-corner-all fieldcontainer">

        <div class="ui-corner-all fielddiv">
            <label class="ui-corner-all " for="customer-CustomerName">Name:</label>
            <input class="ui-corner-all " type="text" id="customer-CustomerName" />
            <input type="hidden" id="customer-CustomerID" />
        </div>
        <div class="ui-corner-all fielddiv">
            <label class="ui-corner-all " for="customer-CustomerSince">Since:</label>
            <input class="ui-corner-all " type="date" id="customer-CustomerSince" />
            <input class="ui-corner-all " type="checkbox" id="customer-VIP" title="VIP" />
            <label class="ui-corner-all" for="customer-VIP">VIP</label>

        </div>
        <div class="ui-corner-all fielddiv">
            <input class="ui-corner-all " type="checkbox" id="customer-OnHold" title="On Hold" />
            <label class="ui-corner-all" for="customer-OnHold">On Hold</label>
            <input class="ui-corner-all " type="checkbox" id="customer-Tax1Exempt" title="GST Exempt" />
            <label class="ui-corner-all" for="customer-Tax1Exempt">GST Exempt</label>
            <input class="ui-corner-all " type="checkbox" id="customer-Tax2Exempt" title="PST Exempt" />
            <label class="ui-corner-all" for="customer-Tax2Exempt">PST Exempt</label>
        </div>
        <div class="ui-corner-all fielddiv ">
            <label class="ui-corner-all " for="customer-OnHoldReason">On Hold/Acct:</label>
            <textarea class="ui-corner-all " style="vertical-align: middle;" id="customer-OnHoldReason"></textarea>
        </div>
        <div class="ui-corner-all fielddiv ">
            <label class="ui-corner-all " for="customer-PrimaryContactID">Primary Contact:</label>
            <select id="customer-PrimaryContactID" class="ui-corner-all "></select>
            <input type="button" id="customer-NewContact" class="ui-corner-all " value="New Contact" />
        </div>
        <div class="ui-corner-all fielddiv ">
            <label class="ui-corner-all " for="customer-DefaultEmployeeID">Default Employee:</label>
            <select id="customer-DefaultEmployeeID" class="ui-corner-all "></select>
        </div>
        <div class="ui-corner-all fielddiv ">
            <label class="ui-corner-all " for="customer-Phone1">Phone 1:</label>
            <input class="ui-corner-all " type="text" id="customer-Phone1" />
        </div>
        <div class="ui-corner-all fielddiv ">
            <label class="ui-corner-all " for="customer-Phone2">Phone 2:</label>
            <input class="ui-corner-all " type="text" id="customer-Phone2" />
        </div>
        <div class="ui-corner-all fielddiv ">
            <label class="ui-corner-all " for="customer-Address1">Address 1:</label>
            <input class="ui-corner-all " type="text" id="customer-Address1" /><br />
            <label class="ui-corner-all " for="customer-Address2">Address 2:</label>
            <input class="ui-corner-all " type="text" id="customer-Address2" /><br />
            <label class="ui-corner-all " for="customer-Address3">Address 3:</label>
            <input class="ui-corner-all " type="text" id="customer-Address3" />
        </div>
        <div class="ui-corner-all fielddiv ">
            <label class="ui-corner-all " for="customer-City">City:</label>
            <input class="ui-corner-all " type="text" id="customer-City" /><br />
            <label class="ui-corner-all " for="customer-Province">Province:</label>
            <input class="ui-corner-all " type="text" id="customer-Province" /><br />
            <label class="ui-corner-all " for="customer-Country">Country:</label>
            <input class="ui-corner-all " type="text" id="customer-Country" />
        </div>
        <div class="ui-corner-all fielddiv ">
            <label class="ui-corner-all " for="customer-PostalCode">PostalCode:</label>
            <input class="ui-corner-all " type="text" id="customer-PostalCode" />
        </div>

        <div class="ui-corner-all fielddiv ">
            <label class="ui-corner-all " for="customer-Description">Description:</label>
            <textarea class="ui-corner-all " style="vertical-align: middle;" id="customer-Description"></textarea>
        </div>
        <div style="width: 100%; text-align:center;">
            <input class="ui-corner-all " id="customer-Submit" type="submit" value="Create" />&nbsp;&nbsp;<input class="ui-corner-all " id="customer-Cancel" type="button" value="Cancel" />
        </div>
    </div>
    <script type="text/javascript" src="../common.js"></script>
    <script type="text/javascript" src="../Customer.js"></script>
    <script type="text/javascript" >
        var custIDField = $('#customer-CustomerID');

        var customer; // dataloaded, datasaved events passing dr
        var employees;
        var contacts;


        function getEmployeesCallback(rawresult) {
            employees = jQuery.parseJSON(rawresult.d);
            loadEmployeesDropDown();
        };
        function loadEmployeesDropDown() {
            var ddl = $("#customer-DefaultEmployeeID");
            ddl.empty();
            $.each(employees, function (i, item) {
                var option = $('<option>').val(item.EmployeeID).text(item.EmployeeName);
                if (item.EmployeeID == customer.datarow().EmployeeID) {
                    option.attr('selected', 'selected');
                }
                option.appendTo(ddl);
            });
        };
        function getContactsCallback(rawresult) {
            contacts = jQuery.parseJSON(rawresult.d);
            loadContactsDropDown();
        };
        function loadContactsDropDown() {
            var ddl = $("#customer-PrimaryContactID");
            ddl.empty();
            $.each(contacts, function (i, item) {
                var option = $('<option>').val(item.ContactID).text(item.ContactName);
                if (item.ContactID == customer.datarow().PrimaryContactID) {
                    option.attr('selected', 'selected');
                }
                option.appendTo(ddl);
            });
        };



        $(function () {
            customer = Customer.getInstance();
            if (customer.datarow().CustomerID == undefined) {
                if ($.isNumeric(custIDField.val())) {
                    customer.load(custIDField.val());
                } else {
                    var qID = getParameterByName('customerid');
                    if ($.isNumeric(qID)) {
                        customer.load(qID);
                    } else {
                        customer.create();
                    }
                }
            }


            //  customer.loadForm();

            $(customer).on("ajaxerror", function (msg) {
                //alert("Ajax Error " + msg);
            });
            $(customer).on("dataloaded", function (e, data) {
                customer.loadForm();
                //contacts
                if (contacts == undefined) {
                    var withid = -1;
                    if (customer.datarow().CustomerID != undefined) {
                        if (customer.datarow().CustomerID > 0) {
                            withid = customer.datarow().CustomerID;
                        }
                    }
                    if (withid != -1) {
                        WebServerCall("GetCustomerContacts", getContactsCallback, FailedCallback, "{'CustomerID':'" + customer.datarow().CustomerID + "'}");
                    } else {
                        WebServerCall("GetContacts", getContactsCallback, FailedCallback);
                    }
                } else {
                    loadContactsDropDown();
                }
            });

            $(customer).on("datasaved", function (e, data) {
                alert("Customer " + data.CustomerID + " has been saved.");
            });

            $("#customer-form").on("submit", function (e) {
                e.preventDefault();
                customer.loadData();
                customer.save();
            });

            $("#customer-Cancel").on("click", function (e) {
                e.preventDefault();
                customer.load($("#customer-CustomerID").val());
            });

            //employees
            if (employees == undefined) {
                WebServerCall("GetEmployees", getEmployeesCallback, FailedCallback);
            } else {
                loadEmployeesDropDown();
            }

        });

    </script>

</form>

common.js

    `var webserviceBaseUrl = '/WebService.asmx/';
    var websiteBaseUrl = '/';


    if (!('contains' in String.prototype)) {
        String.prototype.contains = function (str, startIndex) {
            if (startIndex == undefined)
                startIndex = 0;
            return ''.indexOf.call(this, str, startIndex) !== -1;
        };
    }
    if (!('contains' in Array.prototype)) {
        Array.prototype.contains = function (arr, startIndex) {
            if (startIndex == undefined)
                startIndex = 0;
            return ''.indexOf.call(this, arr, startIndex) !== -1;
        };
    }
    Date.prototype.toDateTimeLocal = (function () {
        var now = new Date(this);
        var month = (now.getMonth() + 1);
        var day = now.getDate();
        var hour = now.getHours();
        var min = now.getMinutes();

        if (month < 10)
            month = "0" + month;
        if (day < 10)
            day = "0" + day;
        if (hour < 10)
            hour = "0" + hour;
        if (min < 10)
            min = "0" + min;

        var today = now.getFullYear() + '-' + month + '-' + day + 'T' + hour + ':' + min;

        return today;
    });
    Date.prototype.toDateInputValue = (function () {
        var now = new Date(this);
        var month = (now.getMonth() + 1);
        var day = now.getDate();

        if (month < 10)
            month = "0" + month;
        if (day < 10)
            day = "0" + day;

        var today = now.getFullYear() + '-' + month + '-' + day;

        return today;
    });

    function getParameterByName(name) {
        name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
        var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
            results = regex.exec(location.search);
        return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
    }


    function checkBoxCheck(checkBox, checked) {
        if(checked){
        if (checked == 'true') {
            checkBox.attr('checked', 'checked');
            return true;
        } else {
            checkBox.removeAttr('checked');
            return false;
        }
        } else {
            if (checkBox.attr('checked') == 'checked') {
                return true;
            } else {
                return false;
            }
        }
    }


    function WebServerCall(functionName, successCallback, failedCallback, datatoSend) {
        $.ajax({
            type: "POST",
            url: webserviceBaseUrl + functionName,
            data: datatoSend,
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            success: successCallback,
            error: failedCallback,
            failure: failedCallback
        });
    }
    function FailedCallback(xhr, ajaxOptions, thrownError) {
        if (xhr.responseJSON.Message != undefined) {
            var msg = new String(xhr.responseJSON.Message);
            alert(msg);

            if (msg.contains("login") > 0)
                window.location.href = websiteBaseUrl + "login.aspx?from=" + encodeURIComponent(window.location.href);
        } else {
            alert(xhr.status + ' - ' + thrownError + '\n\n' + xhr.responseText);
        }
    }

`

Answer 1

尝试这样的事情。创建一个JS所在的文件，CustomerPopupForm.html并将弹出窗体html放在其中：

<div id="dialog-form" title="Create new user">
  <p class="validateTips">All form fields are required.</p>
  <form>
  <fieldset>
  <label for="name">Name</label>
  <input type="text" name="name" id="name" value="Jane Smith" class="text ui-widget-content ui-corner-all">
  <label for="email">Email</label>
  <input type="text" name="email" id="email" value="jane@smith.com" class="text ui-widget-content ui-corner-all">
  <label for="password">Password</label>
  <input type="password" name="password" id="password" value="xxxxxxx" class="text ui-widget-content ui-corner-all">
  <!-- Allow form submission with keyboard without duplicating the dialog button -->
  <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
  </fieldset>
  </form>
</div>

创建你的函数来加载html并显示弹出窗体：

function showPopup(closeCallback){
    $("#divPopupHolder").remove(); //remove the holder div from a previous call
    $("body").append("<div id='divPopupHolder'>" + + "</div>"); //add a div to document to hold the popup
    $.get( "CustomerPopupForm.html", function( data ) {
        $("#divPopupHolder").html(data);  //add the popup to the new div.
    });

   dialog = $( "#dialog-form" ).dialog({ //show the dialog
   autoOpen: false,
   height: 300,
   width: 350,
   modal: true,
   buttons: {
     "Create an account": addUser,
     Cancel: function() {
       dialog.dialog( "close" );
     }
     },
     close: function() {
        if (closeCallback){ //you could do this for other buttons as well so the caller is notified when the dialog is closed.
          closeCallback();
       }

    }
  });
}

然后从需要显示对话框的位置调用showPopup（）。

Answer 2

所以，经过多次学习（本教程非常有帮助：https://code.tutsplus.com/courses/30-days-to-learn-jquery）并且尝试了很多我最终使它工作......不确定我的问题是什么，但这是我希望以前能找到的：

这显示了如何使用“命名空间”创建功能单实例“类”（不是类，插件或模块，我猜这是更好的术语）

我发现使用命名空间var作为事件“target”

非常方便

您怎么看？

file：test.js

var XMen = {
   Customer: (function($, undefined) {
      var instance;
      var datarow = {};

      function init() {
            function privateLoadData(idNumber) {
                //Load up data
                datarow = {IDField: idNumber, ValueField: 'something'};
                $(XMen).trigger('XMen.CustomerDataLoaded');
            };

            function privateDisplay() {
                console.log(datarow);
                $(XMen).trigger('XMen.CustomerDataDisplayed');
            };

            return {
                dr: function() { return datarow; }, //needs to be wrapped in function to get changes
                load: privateLoadData,
                display: privateDisplay
            };
        };

    return {
        getInstance: function () {
            if (!instance) {
                instance = init();
            }
            return instance;
        },
        hasInstance: function () {
            return (instance);
        }
    };
  })(jQuery),

  SalesOrder: (function($, undefined) { // another one like above? })(jQuery)
}

然后，您将在页面上包含此文件

file：test.html

<body>
    <h1>testing</h1>
    <div id="testing"></div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="test.js"></script>
<script>
    var customer = XMen.Customer.getInstance();

    (function ($) {

        $(XMen).on('XMen.CustomerDataDisplayed', function (e, data) {
            console.log("test - XMen.CustomerDataDisplayed");//, e, data);
        })
        $(XMen).on('XMen.CustomerDataLoaded', function (e, data) {
            console.log("test - XMen.CustomerDataLoaded");//, e, data);
        })

        console.log("test - Loading 8");
        customer.load(8);

        console.log("test - loading test2.html");

        $("#testing").load("test2.html", function () {
            console.log("test - finished loading test2.html");
        });

        setTimeout(function () {
            console.log("test - displaying customer...");
            customer.display();
        }, 2000);

    })(jQuery);
</script>

在test2.html中，我们不包含任何脚本，因为它们已包含在test.html

中

file：test2.html

<div id="test2">
    <h1>This is test2.html</h1>
    <button id="btnTest">Test</button>

</div>

<script>
    (function ($) {
        $(XMen).on('XMen.CustomerDataDisplayed', function (e, data) {
            console.log("test2 - XMen.CustomerDataDisplayed");//, e, data);
        })
        $(XMen).on('XMen.CustomerDataLoaded', function (e, data) {
            console.log("test2 - XMen.CustomerDataLoaded");//, e, data);
        })
    })(jQuery);

    console.log("test2 - displaying customer...");
    customer.display();
</script>

为“客户”创建/编辑创建一个jquery对话框，可以在多个页面上使用

2 个答案: