Return value from jQuery Widget

Question

I created a jQuery widget to pop up a dialog box and to store the values ​​that will be taken from this dialog box

My function defining a close dialog

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

How to get returnText value on html page during dialog closing?

I tried calling the variable in html, but it returns null since the dialog is not open and not closed. I want to get data in html during dialog closing

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 to create 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 anywhere in your script, you install an event listener for this event

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

Answer 2

You need to add 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; }});