2010-09-29 20 views
0

J'ai une boîte de dialogue jQuery dans laquelle j'affirme un formulaire. Le formulaire a un div "picture_fields" dans lequel j'ajoute de nouveaux champs à si l'utilisateur clique sur "Ajouter plus de photos", à savoir le formulaire affiche avec un "Picture" fichier-champ, mais les utilisateurs peuvent ajouter plus de cliquer sur le " Ajouter plus de photos "lien.jQuery add se comporte étrangement dans le dialogue jQuery

Cela fonctionne très bien la première fois que le dialogue avec le formulaire est affiché, mais si vous fermez la boîte de dialogue, puis l'ouvrez à nouveau, l'ajout ne fonctionne plus. Vous pouvez cliquer sur le lien, mais aucun champ de fichier n'est ajouté. Je l'ai débogué et il appelle la fonction correcte, y compris l'ajout, mais il ne l'ajoute pas comme je m'y attendais.

Ceci est mon (abêtis) fonction qui gère le « Ajouter des photos » cliquez sur:

/** 
* Add Picture Field Functionality 
*/ 
    $('form a.add_child').live('click', function() { 
     $("#picture_fields").append('<p> File Field Here </p>'); 
     return false; 
    }); 

Ceci est mon gestionnaire de dialogue:

/** 
* New Object Button opening modal Dialog 
*/ 
    $('.dialog_form_link').live('click', function() { 
     var $dialog = $('<div></div>') 
      .appendTo('body') 
      .load($(this).attr('href') + ' .entry_form') 
      .dialog({ 
       title: $(this).text(), 
       modal: true, 
       autoOpen: false, 
      show: {effect: 'blind'}, 
      hide: {effect: 'blind'}, 
     }); 

    $dialog.dialog('open'); 

    // prevent the default action, e.g., following a link 
    return false; 
    }); 
}); 

L'utilisateur clique sur le « Nouvel objet "button (avec la classe" dialog_form_link ") qui ouvre le formulaire New Object dans la boîte de dialogue jquery. Dans cette boîte de dialogue, il clique ensuite sur le lien "Ajouter des images" (avec la classe "add_child"). Fonctionne bien la première fois que vous ouvrez la boîte de dialogue, ne fonctionne jamais après cela. Il ne recommence à fonctionner qu'après avoir rechargé toute la page Web, mais encore une fois.

== == Mise à jour J'ai essayé d'ajouter une option à proximité comme suggéré:

$('.dialog_form_link').live('click', function() { 
    var $dialog = $('<div></div>') 
     .appendTo('body') 
     .load($(this).attr('href') + ' .entry_form') 
     .dialog({ 
      title: $(this).text(), 
      modal: true, 
     autoOpen: false, 
      width: 900, 
      height: '900', 
      position: 'center', 
      show: {effect: 'fade', duration: 300}, 
      hide: {effect: 'blind', duration: 500}, 
      close: function(ev, ui) { $(this).destroy(); alert("Closed"); } 
     }); 

J'ai aussi essayé avec close: function(ev, ui) { $(this).close(); }. Les deux sont appelés à la fin de la boîte de dialogue (j'appuie sur le X et je vois l'alerte) MAIS après cela, je ne peux plus ouvrir la boîte de dialogue. J'ai la superposition grise mais pas de dialogue. Je crois que c'est une erreur débutant commune (et le garçon suis-je!) Avec les boîtes de dialogue jquery n'étant pas initialisées correctement alors peut-être que je fais quelque chose de complètement faux ici? Je crois que l'option autoOpen a aussi quelque chose à voir avec ça, donc j'ai activé et désactivé cela, avec close et destroy, mais encore une fois, pas de dés. Je vais jeter un oeil à this answer, mais en attendant, si quelqu'un a d'autres suggestions, je l'apprécierai grandement.

+0

Quel code utilisez-vous pour fermer la boîte de dialogue? – codeulike

Répondre

1

D'accord, j'ai tout compris ...

J'ai ajouté une fonction à l'option proche qui élimine en fait la DIV que le dialogue est attaché à, comme ceci:

près: fonction (ev, ui) {$ ('div.dialog'). remove(); }

Je pense réellement que je ne fais pas vraiment cela à 100% (dois-je attacher la boîte de dialogue à un DIV?), Mais cela fonctionne, donc je suis coller avec elle jusqu'à ce que je reçois :-) plus compétent

Code final:

$('.dialog_form_link').live('click', function() { 
     var $dialog = $('<div class="dialog"></div>') 
      .appendTo('body') 
      .load($(this).attr('href') + ' .entry_form') 
      .dialog({ 
       title: $(this).text(), 
       modal: true, 
//    autoOpen: false, 
       width: 900, 
       height: '900', 
       position: 'center', 
       show: {effect: 'fade', duration: 300}, 
       hide: {effect: 'blind', duration: 500}, 
       close: function(ev, ui) { $('div.dialog').remove(); } 
      }); 

//  $dialog.dialog('open'); 

     // prevent the default action, e.g., following a link 
     return false; 
    }); 

Notez que j'ai aussi opté pour la fonction Autoopen au lieu cause qui est vraiment ce que je vouloir dans ce cas.

1

Une idée approximative - Je sais que d'autres personnes ont eu des problèmes avec les boîtes de dialogue jQuery UI ne contenant pas la balise Form. Je pense que lorsque vous appelez le dialog() fn, il peut conduire à l'ensemble du DIV déplacé en dehors de la balise form. Cela signifierait alors que votre sélecteur form a.add_child ne fonctionnerait pas car un fichier .add_child pourrait ne plus être dans le formulaire.

Voir le code this answer pour remettre le dialogue div au bon endroit.

+0

Comme je l'ai mentionné, la fonction est appelée très bien et fonctionne aussi, donc je ne pense pas que cela puisse être le problème. J'ai également changé le sélecteur juste en .add_Child et cela n'aide pas non plus. D'autres suppositions? Cela m'a rendu fou :-) – mvilrokx

+0

Si cela se produit seulement après que le dialogue a été fermé une fois, alors cela pointe vers le code de fermeture de la boîte de dialogue - est-ce un nettoyage correct, ou cache-t-il le dialogue DIV? – codeulike

+0

Bon point, et j'ai effectivement joué avec cela mais en vain. Dans l'exemple ci-dessus, il n'y a pas de code de fermeture, donc je suppose qu'il se cache juste comme vous l'expliquez (je ne comprends pas pourquoi cela le ferait arrêter de fonctionner après la première fois, c'est le même dialogue ...). Quand j'ai ajouté du code fermé, je l'ai fait en ajoutant une option close: à la boîte de dialogue avec une fonction qui a détruit la boîte de dialogue. Quand je l'ai fait, le dialogue ne s'ouvrirait jamais une seconde fois. J'obtiendrais un grey'ed dehors, page Web non sensible mais aucune boîte de dialogue modale en outre de lui (j'ai essayé avec près au lieu de détruire, même résultat) ainsi encore je suis bloqué. – mvilrokx

0

Pourriez-vous rendre le lien Ajouter une image un bouton de boîte de dialogue à la place? J'ai une boîte de dialogue où je fais des choses et ajoute ensuite des options à une liste de sélection. Ça marche pour moi.

   buttons: 
       { 
        'Add': function() { 
         ... 
         $("#picture_fields").append('<p> File Field Here </p>'); 

        }, 
        'Cancel': function() { 
         $(this).dialog('close'); 
         } 
       }