jquery可以做到这一点吗?值的弹出窗口

2022-01-20 00:00:00 popup jquery javascript

当用户单击父窗口中的按钮时,我使用 JavaScript 打开一个新窗口(子窗口).

I used JavaScript to open a new window(child) when user clicks on button from parent window.

在新窗口(子窗口)上,我有文本框和按钮,当用户单击按钮时,我需要获取文本框的值并传递给父窗口,在关闭子窗口时,我需要将更新的值插入父窗口窗口(不刷新父窗口),所以我可以将我的值显示到父窗口的一些隐藏字段/标签,我该怎么做?

On new window(child), I have textbox and button, I need to get the value of the textbox and pass to parent window when user clicks on button, while closing the child window, I need the updated value inserted into parent window (without refreshing parent window) so I can display my value to some hidden field/ label of the parent window , how can I do that?

1- 父窗口有按钮,点击的子窗口打开2- 子窗口有文本框和按钮,当点击按钮时,子窗口会向服务器发送更新数据库,然后将文本框的值传递给父窗口而不刷新父窗口,并关闭子窗口.

1- parent window has button, clicked child window opened 2- child window has textbox and button, when button clicked, child will do a post to server to update database, then pass the value of textbox to parent window without refreshing parent window, and close child window.

我该怎么做?可以用简单的 JavaScript 完成吗?如果我使用 jquery 来做,我会有更多的好处吗?谁能建议我该怎么做?

How can I do that? Is it can be done with simple JavaScript? If I do it using jquery, will I have more benefit? Could anyone advice how can I do it?

推荐答案

我建议使用 jQuery 对话框小部件 而不是一个实际的新窗口.这将使访问新值变得更容易,因为它位于同一窗口的 DOM 中.只需让关闭窗口的按钮的回调从对话框中包含的 DOM 元素中提取值并将其复制到表单上的目标 DOM 元素.

I would suggest using the jQuery dialog widget instead of an actual, new window. This will make it easier to access the new value as it's in the same window's DOM. Just have the callback from the button that closes the window extract the value from the DOM element contained in the dialog and copy it to the target DOM element on the form.

$('#popupDialog').dialog({
     modal: true,
     autoOpen: false,
     buttons: {
          'Cancel': function() {
                       $(this).dialog('close');
                    },
          'Accept': function() {
                       $('#mainForm input#target').val( $(this).find('#widgetName').val() );
                       $(this).dialog('close');
                    }
});

$('#popupButton').click( function() {
   $('#popuDialog').dialog('open');
});


<div id="popupDialog" title="Input a new widget name">
  <p>
     <label for="widgetName">Please input a new widget name:</label>
     <input type="text" id="widgetName" />
  </p>
</div>

相关文章