从未显示在jQuery UI对话框中的文本框输入

I am running into a problem where I want to display user input in a jQuery UI dialog box, but it isn't capturing any values. I know that the plugin works, but my code for displaying user input from textboxes in the dialog box seems to be shoddy. I commented out the code which breaks the plugin in my JSFiddle. I basically want whatever data the user puts in the textboxes to be displayed in empty divs that I created within the plugin confirmation window.

我遇到了一个问题，我想在jQuery UI对话框中显示用户输入，但它没有捕获任何值。我知道这个插件有效，但我在对话框中显示来自文本框的用户输入的代码似乎很粗俗。我注释掉了破坏JSFiddle插件的代码。我基本上希望用户在文本框中放置的任何数据都显示在我在插件确认窗口中创建的空div中。

HTML:

HTML：

First Name: <input type="text" id="name">
<br>
Last Name: <input type="text" id="last">
<br>
<input type="submit" id="button" value="Activate Plugin">

<div id="dialog" title="Confirmation">Please confirm that the following information is correct: <br>
First Name: <div id="firstinput"></div>
Last Name: <div id="lastinput"></div>
</div>

Working jQuery plugin code with commented out non-working code:

使用注释掉的非工作代码处理jQuery插件代码：

     $(document).ready(function() {
          $('#dialog').dialog({
              autoOpen: false,
              width: 600,
              buttons: {
                  "Correct": function() {
                      $(this).dialog("close");
                  },
                  "Incorrect": function() {
                      $(this).dialog("close");
                  }
              }
          });

          $('#button').click(function() {
              $('#dialog').dialog('open');
              return false;
          });
      });
      /*INPUT FROM TEXTBOXES DISPLAYING IN THE PLUGIN CONFIRMATION WINDOW LOGIC
      $(document).ready(function () {
          if $("#first").val() {
              $(this).appendTo("#firstinput");
          }
          else if ("#last").val() {
              $(this).appendTo("#lastinput");
          };
      });*/

I would really appreciate it if someone took a look at my fiddle and gave me an idea of what I might be doing wrong. Thanks.

如果有人看了我的小提琴并让我知道我可能做错了什么，我真的很感激。谢谢。

3 个解决方案

#1

This functionality is actually built into the dialog method.

此功能实际上内置于对话框方法中。

http://jsfiddle.net/TR6gy/2/ : Here is an example.

http://jsfiddle.net/TR6gy/2/：这是一个例子。

$('#button').click(function (e) {
    e.preventDefault();
    $('#dialog').dialog({
        width: 600,
        open: function () {
            $('#firstinput').html('<span>' + $('#name').val() + '</span>');
            $('#lastinput').html('<span>' + $('#last').val() + '</span>');
        },
        buttons: {
            "Correct": function () {
                $(this).dialog("close");
            },
            "Incorrect": function () {
                $(this).dialog("close");
            }
        }
    });
});

The open event will allow you to trigger a custom function upon opening the dialog. This is much more efficient as you are are not adding multiple events or functions to your button.

open事件将允许您在打开对话框时触发自定义功能。这样做效率更高，因为您没有向按钮添加多个事件或功能。

More info here: http://api.jqueryui.com/dialog/#event-open

更多信息：http：//api.jqueryui.com/dialog/#event-open

I hope this helps! Let me know if you have questions.

我希望这有帮助！如果您有疑问，请告诉我。

#2

I have udpated the JsFiddle

我已经对JsFiddle进行了修改

Here are the changes what I did.

以下是我所做的改变。

   <div id="dialog" title="Confirmation">Please confirm that the following information is correct: <br>
        First Name: <label id="firstinput"></label><br>
        Last Name: <label id="lastinput"></label>
    </div>

        $('#dialog').dialog('open');
              $("#firstinput").text($("#name").val());
              $("#lastinput").text($("#last").val());
        });

#3

Add the necessary code inside your button click handler instead:

在按钮单击处理程序中添加必要的代码：

$('#button').click(function() {
    if($("#name").val()) {
        $("#firstinput").text($("#name").val());
    }
    if($("#last").val()) {
        $("#lastinput").text($("#last").val());
    }
    $('#dialog').dialog('open');
    return false;
});

Updated Fiddle

更新小提琴

#1