javascript - 如何动态创建对话框？

Question

我需要能够创建对话框并动态提供 ID 值，然后执行 .dialog('open'); 和 .dialog('close'); 函数..有关为什么我需要这个的详细信息，我在 another question 中有一个问题描述

我的想法是向 ICWSDialogs 附加一个新的 DIV，然后使用新创建的 div 作为对话框。

<div id="ICWSDialogs"></div>

这是我如何附加 div

$('#ICWSDialogs').append('<div class="ICWSinboundDialog" id="'+ prefix + interactionId +'" style="display: none;"></div>');

但是代码似乎不起作用。我收到此错误

Error: cannot call methods on dialog prior to initialization; attempted to call method 'isOpen'

此错误的原因是下面代码中的这一行

if( $(dialogID).dialog( "isOpen" ) !== true){

我相信我在创建 div 之前初始化了对话框...我怎样才能纠正这个问题？

这是我的整个代码“代码太多，但应该简单明了

$(function(){

    //Server Side Message Polling
    var evtSource = new EventSource("poll.php");

    evtSource.addEventListener("getMessagingQueue", function(e) {

      var obj = JSON.parse(e.data);
      processMessages(obj);

    }, false);

    //initialize the dialog box
    $(".ICWSinboundDialog").dialog({
        resizable: true,
        width: 400,
        modal: false,
        autoOpen: false,
        stack: false,
        buttons: {
            "Answer": function(e) {
                var id = $(this).data('id');
                var dialogID = $(this).data('dialogID')
                handleInteraction('answer', id, dialogID);

            },
            "Send to Voice Mail": function(e) {
                var id = $(this).data('id');
                var dialogID = $(this).data('dialogID')
                handleInteraction('sendToVoiceMail', id, dialogID);
            },
            "Hold": function(e) {
                var id = $(this).data('id');
                var dialogID = $(this).data('dialogID')
                handleInteraction('hold', id, dialogID);

            }
        }
    });

    //process the messages coming from the server
    function processMessages(obj) {
        var prefix = 'ICWS_';
        $.each(obj.calls, function(i, item){

            $.each(item, function(z, c){

                var interactionId = isset(c.interactionId, 0);
                var Eic_CallDirection = isset(c.Eic_CallDirection, '');
                var Eic_State = isset(c.Eic_State, '');
                var mid = isset(c.mid, '');
                var account_id = isset(c.account_id, '');
                var Eic_RemoteAddress = isset(c.Eic_RemoteAddress, '');
                var dialogID = "#" + prefix + interactionId;

                if(Eic_State == '' || Eic_CallDirection == '' || interactionId == 0){
                    return;
                }

                //incoming call 
                if(Eic_CallDirection == 'I' && (Eic_State == 'A' || Eic_State == 'O' || Eic_State == 'M') ){

                    //create a dialog box if one does not already exists
                    if( $(dialogID).length == 0) {
                        $('#ICWSDialogs').append('<div class="ICWSinboundDialog" id="'+ prefix + interactionId +'" style="display: none;"></div>');
                    }

                    //Offering/Alerting calls
                    if( Eic_State == 'A' || Eic_State == 'O' ){
                        var msg = '';
                        if(mid != ''){
                            msg = '<br>MID: ' + mid;
                        }

                        if(account_id != ''){
                            msg = '<br>Account ID: ' + account_id;
                        }

                        console.log('Incoming Call From ' + Eic_RemoteAddress + msg + ' ' + interactionId);

                        //display a dialog message
                        if( $(dialogID).dialog( "isOpen" ) !== true){

                            $(dialogID).html('Incoming Call From ' + Eic_RemoteAddress + '<br>' + msg);
                            $(dialogID).data({'id': interactionId, 'dialogID': dialogID }).dialog('open').siblings('.ui-dialog-titlebar').remove();
                        }

                        return;
                    }

                    //voice mail
                    if( Eic_State == 'M'){
                        console.log('Phone number ' + Eic_RemoteAddress + ' is leaving a voice mail' );

                        //if the dialog box is open close it and remove it
                        if( $(dialogID).dialog( "isOpen" ) === true){
                            $(dialogID).remove();
                        }

                        return;
                    }

                }

                //outbound
                elseif(Eic_CallDirection == 'O'){


                    //Dialling call
                    if(Eic_State == 'O'){
                        console.log('Dialling ' + Eic_RemoteAddress );
                        return;
                    }

                    //Dialling call
                    if(Eic_State == 'R'){
                        console.log('Outbound call is ringing and waiting for answer ' );
                        return;
                    }

                }

            });
        });
    }

    //handle the Interaction request
    function handleInteraction(method, id, dialogID){

            $.ajax({    
            type: 'GET',
            url: 'interactions.php',        
            data: {'method': method, 'interactionId': id},
            dataType: 'json',
            cache: false,
            timeout: 5000,
            success: function(data) {           
                $( dialogID ).dialog('close');
            }
        });         
    }

    //sets/resets a variable    
    function isset(a, b){

        if(typeof a !== "undefined" && a ){
            return a
        }

        return b;
    }


    //Handle interactions
    $('.interaction').on('click', function(e){

        e.preventDefault();
        var id = $(this).attr('id');
        var list;
        var phone = $('#phone').val();
        var run = true;
        if(id == 'call'){
            if(phone.length < 10){
                run = false;
                alert('Please enter a valid phone number to dial');
            } else {
                list = {method: id, phone: $('#phone').val() }
            }
        } else {
            list = {method: id};
        }

        if(!run){
            return;
        }

         $.getJSON("interactions.php", list, function(data){
            //do stuff
         });
    });


});

Answer 1

您收到的错误消息似乎很清楚。您需要在调用方法 ($(dialogID).dialog("isOpen")) 之前初始化对话框 ($(dialogID).dialog())。只需在使用对话框之前添加初始化行...