Return a value from JQuery Widget

Question

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

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?

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

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

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

Answer 1

Using JQuery, you can trigger a custom event.

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);
});

Answer 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;
 }});