Question

A page on my site are auto-reloading every 15th second. It’s being done by using jQuery’s .ajax function.

My problem are, that everytime the page are being loaded by the user, the form in the dialogs work fine.
But when it’s reloaded automatically by the page itself, the inputs are being moved OUTSIDE the form.

Many on the internet writes, that it is possible to move it back into the form by appending a div into the first form found. My problem is, that when i try to move my “input-wrapper” back into the form, i get a hirachy-problem.

Can anyone help? Or point out an alternative solution?

My jQuery-script:

<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>

The 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

you are trying to add targetFormWrap to targetsForm right? so just do:

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