从JQuery对话框窗口更新后，使HTML元素保持可见

Let's say I've got a form where the user needs to select some fields.

假设我有一个用户需要选择某些字段的表单。

Upon submitting I would like to do some error checking if the fields are selected, and if not, I would provide a dialog window stating the error message + the possibility to select/update the field from within the dialog window.

提交后,我想做一些错误检查,如果选择了字段,如果没有,我会提供一个对话窗口,说明错误信息+从对话框窗口中选择/更新字段的可能性。

I'm able to open the dialog window including the div that contains the field selection, but in the general page this div will disappear.

我可以打开包含包含字段选择的div的对话框窗口,但在常规页面中,此div将消失。

How can I make this div stays visible during and after the dialog window is open or closed?

如何在对话框窗口打开或关闭期间和之后使此div保持可见?

See code snippet below or at JSFiddle

请参阅下面的代码段或JSFiddle

$('#submit').click(function() {

  var $dialog = $('<div></div>')
    .html('You forgot something, update below')
    .dialog({
      title: 'check',
      buttons: {
        OK: function() {
          $(this).dialog("close");
        }
      }
    });

  $dialog.dialog('open');

  $dialog.append($('.classSelector'));


});

<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

General page to make selection
<div class='classSelector'>
  <p>select car:
    <select>
      <option selected disabled>car type</option>
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="opel">Opel</option>
      <option value="audi">Audi</option>
    </select>
  </p>
</div>
<p>
  <button id='submit'>Submit</button>
</p>

3 个解决方案

#1

Do the code below after $dialog.dialog('open'):

在$ dialog.dialog('open')之后执行以下代码:

$dialog.append($('.classSelector').clone());

Using .clone will allow you to copy the whole classSelector div but the original div will still be on the page.

使用.clone将允许您复制整个classSelector div,但原始div仍将在页面上。

#2

Try this

$selecter = $('.classSelector').clone();
$('#submit').click(function () {

    var $dialog = $('<div></div>')
        .html('You forgot something, update below')
        .dialog({
        title: 'check',
        buttons: {
            OK: function () {
                $(this).dialog("close");
            }
        }
    });

    $dialog.dialog('open');
    $selecter.appendTo($dialog);

});

See Fiddle

#3

First thing that I saw that you have wrong html. You didnt close p tag ang also why you place select in p? i you want it from the new line you can place it in div or use br tag. Second, it seems that you subtract somewhere your select list with button and include it in validation popup. Check this and if so, try to not to subtract your elements

我第一眼看到你有错误的HTML。你没有关闭p标签ang也为什么你把选择放在p?我想从新线路中将它放在div中或使用br标签。其次,您似乎用按钮减去选择列表的某个位置并将其包含在验证弹出窗口中。检查这个,如果是,请尽量不减去你的元素

Hope this helps

希望这可以帮助

#1