Ajout d'un bouton d'édition à une boîte de dialogue interface utilisateur JQuery, et le chargement dans une nouvelle boîte de dialogue

Question

Il doit y avoir un moyen plus propre à faire ce que je suis en train de faire ici ...

J'ai une boîte de dialogue jquery Ui qui s'ouvre lorsque je clique sur le gestionnaire eventClick dans le plugin FullCalendar.

La boîte de dialogue contient les détails de l'événement. Au bas du formulaire, il devrait y avoir un bouton Modifier, qui fermera la boîte de dialogue et en ouvrira un nouveau avec un formulaire modifiable.

La plupart du temps, j'ai réussi, dans le sens où le bouton d'édition affiche effectivement le formulaire d'édition dans une boîte de dialogue. MAIS ce n'est pas une nouvelle boîte de dialogue, c'est la même boîte de dialogue dès le premier clic, avec les boutons OK et éditer dessus.

Comment puis-je obtenir une nouvelle boîte de dialogue à ouvrir pour le formulaire d'édition?

est inférieure à la fonction eventClick

eventClick: function(event) {     
       if (event.url) {       
        $('#details') 
         .load(event.url) 
         .dialog({        
          title: 'Event Details', 
          buttons: { "Ok": function() { $(this).dialog("close"); }, 
             "Edit": function() { 
             $(this).dialog("close"); 
             $('#details').load('/Events/Edit/' + event.id) 
                .dialog({ 
                 title: 'Edit' 
                  });             
                 } }         
          });         
         return false; 
        } 
       }, 

Answer 1

Je vois deux problèmes qui peuvent être la cause de vos problèmes:

1. dialog('close') ferme simplement la boîte de dialogue , mais ne pas vider son contenu . Si vous voulez vider le dialogue et le ramener à l'état propre, vous voulez utiliser dialog('destroy').
2. Vous avez plusieurs appels de fonction load() reliés ensemble, mais n'ont aucun rappel. Donc, votre charge qui essaye de charger le contenu de /Events/Edit/eventID est , mais alors immédiatement vous affichez le dialogue . La fonction load() a un paramètre de rappel qui sont exécutées lorsque le contenu est retourné de l'URL passé dans la fonction load() . De cette façon, votre boîte de dialogue s'affichera une fois que le contenu aura été reçu du serveur.

Une façon que je pensais que vous pouvez organiser votre code pour que ce soit un peu plus maintenable (mais elle implique aussi briser certaines de vos fonctions anonymes dans les fonctions nommées) est ci-dessous:

eventClick: function(event) { 
    if(event.url) { 
     $("#details").load(event.url, loadDialog(event.id)); //call loadDialog once you get content back from your URL 
    } 
} 

function loadDialog(eventId) { 
    $("#details").dialog({ 
     title: "Event Details", 
     buttons: { 
      "OK" : function() { $(this).dialog("close"); }, //this just closes it - doesn't clean it up!! 
      "Edit" : function() { 
       $(this).dialog("destroy"); //this completely empties the dialog 
              //and returns it to its initial state 
       $("#details").load("/Events/Edit/" + eventId, loadEditDialog($(this))); 
      } 
     } 
    }); 
} 

function loadEditDialog(theDialogContainer) { //this is a simple dialog display function -- could be inlined 
    $(theDialogContainer).dialog({ 
     title: "Edit" 
    }); 
} 

I J'espère que cela t'aides! Tout le code ci-dessus n'a pas été testé, donc il pourrait y avoir des fautes de frappe - c'est principalement du pseudo-code pour expliquer mon raisonnement. S'il y a des questions, faites le moi savoir et je mettrai à jour ma question en conséquence.

Answer 2

vous pouvez aussi essayer quelque chose comme ceci:

$("#details").dialog({ 
     title: "Event Details", 
     buttons: { 
      ... 
      "Edit" : function() { 
       $(this).dialog("option", "buttons", { "OK":...}); 
       $("#details").load("/Events/Edit/" + eventId); 
       $(this).dialog("option", "title", "Edit"); 
      } 
     } 
    });