Can a unique ID be added to a dialog box at run time?

问题

Is there a way to assign a unique value to a jQuery dialog box at run time so I can keep track of each dialog separately using the assigned ID?

I am trying to interact with a telephony system where I would show a dialog box when there is an inbound call. The dialog box will have 3 buttons for the user to click on.

Pick Up
Send To Voice Mail
Ignore

if a user clicks on any of the three button an Ajax request is sent to the server and the dialog in closed on success.

However, if a user gets another inbound call while the a dialog is open "waiting for a respond" I would like to display another dialog with another message. But I would need to assigned the call id "received from the server" to a dialog box before it is opened, so if a user pick up their physical phone "without clicking on the button from the dialog" I will send a dialog('close') to a giving ID to close it on the user's behalf as the user respond is not longer needed. "I don't want to close all dialogs"

Note I have server-side polling that updates the client "browser" of the current phone status. so using this I can issue the dialog('close') but I am hoping that I can pass the ID so the client will know which dialog box to close.

ID are created/assigned at run time now before the page is loaded.

Since I don't know what will the ID be before the page is loaded I can't do something like this

<div id="PhoneCallId" Title="Inbound Call" style="display: none;"></div>

I am hoping I can assign a unique number (ex. 123456) to the box beforOpen and then close the box with the unique ID 123456.

回答1:

Here is a sample that allow you to have a Template element and append copies to the page using .clone(). You will have to do this every time you need a new dialog. That should be a start for your project.

Note : When cloning an element, you can change the id before calling append() without corrupting your page.

var idCounter=0;
$('button').on('click', function(){
    idCounter++; //Generate new ID

    var diag = $('#PhoneCallId'); //Get Template
    var newDiag = $(diag.clone()); //Clone Id
  
    newDiag.attr('id','PhoneCallId' + idCounter); //Change ID
    newDiag.find(".dialogTitle").text('DIAGLOG ID = ' + idCounter);
  
    $('#dialogPlaceHolder').append(newDiag); //Append & Show It
  
    newDiag.show(); //Show it (you can call .dialog or other methods)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>CLICK ME TO ADD DIALOG!</button>

<div id="PhoneCallId" Title="Inbound Call" style="display: none;">DIALOG <label class="dialogTitle">TEMPLATE</label></div>

<div id="dialogPlaceHolder"></div>

来源：https://stackoverflow.com/questions/30334101/can-a-unique-id-be-added-to-a-dialog-box-at-run-time

标签

jquery

ajax

jquery-ui

dialog

jquery-ui-dialog