从JQuery Widget返回一个值

I have created a JQuery Widget to pop-up a dialogue box and to alow values to be accepted from that dialogue box

我创建了一个JQuery Widget来弹出一个对话框，并允许从该对话框中接受值

My Function defining Dialogue close

我的功能定义对话关闭

 _ebSaveDialogue: function () {
     //Saving Dialogue
     $('#ebDialogueClose').click(function () {
         var text = $('#ebPlaceholder').val();
         returnText = text;
         $('#ebDialogue_div').dialog("close");
     });
 }

How to get the returnText value in the html page at the time of closing dialogue?

如何在关闭对话时获取html页面中的returnText值？

I tried calling the variable in the html but it return null since the dialogue is nor opened or closed. I want to receive the data in Html at the time of dialogue close

我尝试在html中调用变量但它返回null，因为对话框也没有打开或关闭。我想在对话结束时收到Html中的数据

Widget

窗口小部件

 $.widget('custom.DivPopUp', {

     //Call Constructor
     _create: function () {
         var returnText;
         this._ebDefineDiv();
     },

     _ebDefineDiv: function () {
         if ($("#ebDialogue_div").length == 0) {
             //Bringing Dialogue box
             $("body").append("<div id='ebDialogue_div' title='Expression Builder'></div>");
             var inDialogueDiv = "<div id='ebLeftPanel'></div><div id='ebRightPanel'></div>";
             inDialogueDiv += "<div id='ebSample_div' title='Sample'></div>";

             $('#ebDialogue_div').append(inDialogueDiv);

             this._ebCreateDialoge();
             this._ebSaveDialogue();
         }
     },
     _ebSaveDialogue: function () {
         //Saving Dialogue
         $('#ebDialogueClose').click(function () {
             var text = $('#ebPlaceholder').val();
             returnText = text;
             $('#ebDialogue_div').dialog("close");
         });
     }
 }(jQuery));

Html

HTML

$('#Id').DivPopUp();

2 个解决方案

#1

Using JQuery, you can trigger a custom event.

使用JQuery，您可以触发自定义事件。

An example according to your code:

根据您的代码示例：

_ebSaveDialogue: function () {
     //Saving Dialogue
     $('#ebDialogueClose').click(function () {
         var text = $('#ebPlaceholder').val();
         returnText = text;
         $('#ebDialogue_div').dialog("close");
         $('#ebDialogue_div').trigger('save_action', returnText);
     });
 }

Then, from any other point in your script, you set an event listener for that event

然后，从脚本中的任何其他位置，为该事件设置事件侦听器

$('#ebDialogue_div').on('save_action', function(event, returnText){
    alert(returnText);
});

#2

You need to add a callback

您需要添加回调

so

所以

$.widget('custom.DivPopUp', {

     //Call Constructor
     _create: function () {
         var returnText;
         this._ebDefineDiv();
     },

     _ebDefineDiv: function () {
         if ($("#ebDialogue_div").length == 0) {
             //Bringing Dialogue box
             $("body").append("<div id='ebDialogue_div' title='Expression Builder'></div>");
             var inDialogueDiv = "<div id='ebLeftPanel'></div><div id='ebRightPanel'></div>";
             inDialogueDiv += "<div id='ebSample_div' title='Sample'></div>";

             $('#ebDialogue_div').append(inDialogueDiv);

             this._ebCreateDialoge();
             this._ebSaveDialogue();
         }
     },
     _ebSaveDialogue: function () {
         //Saving Dialogue
         $('#ebDialogueClose').click(function () {
             var text = $('#ebPlaceholder').val();
             returnText = text;
             $('#ebDialogue_div').dialog("close");
             this._trigger( "complete", null, { value: 100 } );
         });
     }
 }(jQuery));

then

然后

 $('#Id').DivPopUp({complete:function(event, data) {
     var returnText = data.value;
 }});