4 votes

Puis-je déplacer un div en utilisant le javascript et conserver sa capacité de postback ?

J'ai une liste de cases à cocher et un bouton d'image avec un événement OnClick dans ma page. En cliquant sur le bouton d'image, on effectue un retour arrière et l'événement OnClick fonctionne bien.

Le problème est que je veux déplacer le div pour qu'il soit le premier enfant de l'élément <form> afin que je puisse le faire apparaître dans une fenêtre modale - j'ai fait cela en utilisant le code prototype.js...

document.observe("dom:loaded", function() {

    if ($$('.CheckboxListContainer').length>0) {    

        var modalShadow = document.createElement('div');
        modalShadow.setAttribute( "class", 'MyFormModalShadow' );

        modalShadow.style.width = document.viewport.getWidth() + 'px';
        modalShadow.style.height = document.viewport.getHeight() + 'px';

        var modalDiv = document.createElement('div');
        modalDiv.setAttribute( "class", 'MyFormModal' );

        var checkboxesDiv = $$('.CheckboxListContainer')[0];
        checkboxesDiv.remove();

        modalDiv.appendChild( checkboxesDiv );

        $$('form')[0].insert( {top: modalShadow} );
        $$('form')[0].insert( {top: modalDiv} );

        Event.observe(window, "resize", function() {
            if ($$('.MyFormModalShadow').length>0) {
                var modalShadow = $$('.MyFormModalShadow')[0]
                modalShadow.style.width = document.viewport.getWidth() + 'px';
                modalShadow.style.height = document.viewport.getHeight() + 'px';
            }
        });

    }

});

... ce qui fonctionne bien, mais l'ImageButton ne déclenche plus mon événement OnClick lors du retour en arrière.

Existe-t-il un moyen de déplacer mon div dans le DOM tout en conservant ses capacités de postback ?

4voto

Jeremy Lake Points 86

Réponse rapide, oui. Réponse longue ci-dessous :

Si vous parlez d'ASP.NET WebForms, est-ce que votre formulaire a l'attribut runat="server" et un id ? Si vous utilisez le langage HTML standard, est-ce que l'attribut method y action définis sur le formulaire ?

Lorsque vous regardez la source HTML dans votre navigateur, si le formulaire ressemble à : <form action="/your_post_back_page.html" method="post"> alors c'est très bien. Inspecter le formulaire avec FireBug après que le dialogue modal ait été ajouté pour voir si elle se trouve DANS les balises du formulaire. Si c'est le cas, c'est bon.

Faites vos cases à cocher <input type="checkbox" /> ont un name l'ensemble des attributs ? Votre bouton d'image est-il <input type='submit' /> ou est-ce un <button> ?

Si ces conditions sont remplies, il y a probablement un événement JavaScript (une fonction) lié à votre bouton qui renvoie un faux et/ou qui absorbe le retour en arrière. JavaScript onclick doivent généralement renvoyer un message vrai pour soumettre un formulaire. Y a-t-il une sortie dans la console d'erreur de votre navigateur ?

Personnellement, je trouve de plus en plus que le HTML pur (par le biais d'ASP.NET MVC) bat les WebForms de la vieille école ASP.NET, et jQuery a, d'après mon expérience, une sensation bien plus agréable que le prototype. L'utilisation de modèles jQuery pour créer un dialogue modal serait facile. Pouvez-vous échanger des bibliothèques ?

2voto

DoubleScorpio Points 756

Tout d'abord, je ne comprends pas très bien pourquoi vous devez déplacer l'élément pour qu'il soit le premier enfant du formulaire pour le rendre modal. Vous pouvez rendre n'importe quel div modal, quelle que soit sa position dans le formulaire. Le plus important est de contrôler correctement le positionnement absolu.

Chaque postback est déclenché par une fonction javascript __DoPostBack(). Vous ne devriez donc pas avoir de problème pour déplacer le contrôle, à moins que vous n'ayez modifié l'id du contrôle.

Une solution possible à votre problème est d'appeler la fonction __DoPostBack() à partir de votre code client dans document.ready, et de cette façon vous avez le contrôle total sur la soumission du formulaire.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X