Boîte de dialogue jQuery UI et colonnes triables #dialog classe issue

Question

Je réussis à créer un système de portlet triable pour un CMS existant. J'ai également fait une boîte de dialogue contextuelle où je peux changer vrai le titre du titre et dans l'avenir un peu plus de contenu dans la boîte de dialogue pour chaque portlet.

Cependant, mon problème est que le #dialog montre le formulaire dans ma page avant de cliquer sur l'icône. Lorsque je clique sur l'icône, le formulaire est retiré de la page et s'affiche bien dans la boîte de dialogue. Je comprends pourquoi il fait cela, mais je ne peux pas le résoudre.

Voici mon JavaScript:

  $('.column .portlet-header .ui-icon-wrench').click(function(e) { 
     e.preventDefault(); 
      var portlet_to_edit = $(this).parents('.portlet').attr('id'); 


       //dialog     
           // alert($(this).parents('.portlet').attr('id')); 
           $("#dialog").dialog({ 
                 bgiframe: true, 
                 autoOpen: false, 
                 height: 300, 
                 modal: true, 

                 buttons: { 
           'Save block': function() { 
           var bValid = true; 
        allFields.removeClass('ui-state-error'); 

        bValid = bValid && checkLength(name,"username",3,16); 
        bValid = bValid && checkRegexp(name,/^[a-z]([0-9a-z_])+$/i,"Username may consist of a-z, 0-9, underscores, begin with a letter."); 



           if (bValid) { 

           $.ajax({ 
           type: "POST", 
           url: "server_items_reorder.php", 
           data: 'tid=' + portlet_to_edit + '&title=' + name.val() 
             }); 
             $(this).dialog('close'); 
             $('.portlet').sortable('refresh') //not work? 
             } 

           }, 
           Cancel: function() { 
           $(this).dialog('close'); 
            } 
           }, 
           close: function() { 
           //allFields.val('').removeClass('ui-state-error'); 
           } 
          }) 
       $('#dialog').dialog('open'); 
      });

Je sais que ce doit être quelque chose comme ceci (exemple jQuery):

$("#dialog").dialog({ 
      bgiframe: true, 
      autoOpen: false, 
      height: 300, 
      modal: true, 
      buttons: { 
       'Create an account': function() { 
        var bValid = true; 
        allFields.removeClass('ui-state-error'); 

        bValid = bValid && checkLength(name,"username",3,16); 
        bValid = bValid && checkLength(email,"email",6,80); 
        bValid = bValid && checkLength(password,"password",5,16); 

        bValid = bValid && checkRegexp(name,/^[a-z]([0-9a-z_])+$/i,"Username may consist of a-z, 0-9, underscores, begin with a letter."); 
        // From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/ 
        bValid = bValid && checkRegexp(email,/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i,"eg. ui@jquery.com"); 
        bValid = bValid && checkRegexp(password,/^([0-9a-zA-Z])+$/,"Password field only allow : a-z 0-9"); 

        if (bValid) { 
         $('#users tbody').append('' + 
          '' + name.val() + '' + 
          '' + email.val() + '' + 
          '' + password.val() + '' + 
          ''); 
         $(this).dialog('close'); 
        } 
       }, 
       Cancel: function() { 
        $(this).dialog('close'); 
       } 
      }, 
      close: function() { 
       allFields.val('').removeClass('ui-state-error'); 
      } 
     }); 



     $(''.column .portlet-header .ui-icon-wrench'').click(function() { 
      $('#dialog').dialog('open'); 
     }) 

Mais la fonction ne met pas à jour mon $.ajax.

Answer 1

Si je comprends votre problème correctement, je pense que vous avez juste besoin

<div id="dialog" style="display: none;"> 

// form here 
</div> 

de sorte que lorsque la page charge initialement, la boîte de dialogue et la forme seront cachés jusqu'à ce que nécessaire.

Edit: et pour obtenir le triables recharger de ajax

if (bValid) { 
    $.ajax({ 
     type: "POST", 
     url: "server_items_reorder.php", 
     data: 'tid=' + portlet_to_edit + '&title=' + name.val(), 
     success: function() { $('.portlet').sortable('refresh'); } 
    }); 
    $(this).dialog('close'); 
}