Question

我网站上的页面每15秒自动重新加载一次。它是通过使用jQuery的.ajax函数完成的。

我的问题是，每次用户加载页面时，对话框中的表单都能正常工作。但是当页面本身自动重新加载时，输入将被移动到表格外。

互联网上的许多人写道，通过在找到的第一个表单中添加div，可以将其移回表单。我的问题是，当我尝试将我的“输入包装”移回到表单中时，我会遇到一个hirachy问题。

有人可以帮忙吗？或者指出另一种解决方案？

我的jQuery脚本：

<script type='text/javascript'>
  var intval;
  var xmlhttp;
  function init() {
    $('#dialog:ui-dialog').dialog('destroy');
    $('.ui-dialog').dialog({ modal: true, draggable: false, resizable: false, autoOpen: false, open: function(event, ui) { stopTimer(); }, close: function(event, ui) { startTimer(); } });
    $('#targets').dialog({ width: 400, buttons: { 'close': { text: 'Luk', height: '30px', click: function() { $(this).dialog('close'); } }, 'submit': { text: 'OK', class: 'submit', height: '30px', click: function() { $(this).find('form').trigger('submit'); } } } });
    $('#targets" & id2 & "Opener').click(function() { $('#targets').dialog('open'); return false; });
  };
  function startTimer() { intval = setTimeout('ajaxRefresh()', 15000); };
  function stopTimer() { clearTimeout(intval); if(xmlhttp) xmlhttp.abort(); };
  function ajaxRefresh() { xmlhttp = $.ajax({ url: '/', data: {h: 'ok'}, beforeSend: function() { stopTimer(); }, success: function(result) { $('body').html(result); } } }) };
  $(document).ready(function() { init(); startTimer(); $('#targetsFormWrap').parent().appendTo('#targetsForm'); });
</script>

HTML：

<div id='targets' class='ui-dialog' title='The Dialog Title' style='text-align: center; display: none;'>
  <form id='targetsForm' name='targetsForm' method='post'>")
    <div id='targetsFormWrap'>")
      <input id='input1target' name='input1target' type='text' value='' style='width: 95%; />
      <input id='input2target' name='input2target' type='text' value='' style='width: 95%; />
      <input id='input3target' name='input3target' type='text' value='' style='width: 95%; />
    </div>
  </form>
</div>

Answer 1

你正试图将targetFormWrap添加到targetsForm吗？所以就这样做：

$("#targetsForm").append($("#targetsFormWrap"));

jQuery对话框和ajax回发

1 个答案: