Discussion :

[Reminouche]

Bonjour à toute la communauté,

Je me permets de poster un rapide message sur ce forum car je bloque sur un point de conception concernant le javascript.

Pour information j'utilise JQuery comme framework javascript et ASP.NET MVC.

Je vous décris actuellement le fonctionnement (tout en soupçonnant qu'il y a un problème de conception)

Dans une des parties de mon site j'ai une liste sur la gauche (liste d'utilisateurs) et un bloc central.

Lorsque l'utilisateur clique sur la liste de gauche, une requête AJAX est effectuée et retourne de l'html qui correspond à un formulaire d'édition de l'utilisateur sélectionné.

J'insère ce code html dans le bloc du milieu. Seulement ce formulaire contient des sous rubrique qui nécessite elles aussi des appels ajax.

Par exemple j'ai un bouton dans mon formulaire qui permet en cliquant dessus d'afficher des informations dans un tableau (via requête AJAX).

Je m'abonne à l'évènement click de ce bouton mais problème...

Soit je m'abonne au click au niveau de ma page principale et l'id du bouton n'est pas encore reconnu car aucun code html n'a encore été inséré dans le bloc central. Soit je glisse mon script dans le retour de ma première requête AJAX qui me renvoie l'html. Seulement aucune des deux méthodes ne semble marcher.

Y'a t'il un problème de conception ? Est-il possible d'insérer du javascript via une requête AJAX ? Quelles sont les bonnes pratiques ?

Merci d'avance pour vos réponses.

Cordialement, Rémi.

[Bovino]

Oui, il est possible d'avoir des scripts dans le retour de la requête. Avec jQuery, il suffit d'indiquer un dataType : 'html'.

Ceci dit, est-ce la meilleure méthode ? Je n'en suis pas sûr...
Le mieux étant selon moi d'intégrer l'intégralité des scripts nécessaires à la page dès le début.

Soit je m'abonne au click au niveau de ma page principale et l'id du bouton n'est pas encore reconnu

C'est pour cela que jQuery met en place un système de délégation d'événement.
Une autre solution étant d'intégrer la partie du code spécifique à cette portion de page dans une fonction qui sera appelée à la réception de la réponse.

[Reminouche]

Ok merci beaucoup pour ta réponse j'avais déjà commencé à justement essayer de mettre le "javascript spécifique à mon bloc central" dans une fonction et de l'appeler après mon insertion .html() mais vu qu'il n'y a pas (a ce que je sache) d'évènement de chargement du .html() ma fonction devait s'effectuer avant que l'intégralité de l'html de retour soit chargé.

Je vais donc plus essayer de m'orienter sur la délégation d'évènement. Pour info c'est la première fois que je manipule ça en Jquery.

Merci encore

[SpaceFrog]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 getScript()

?
ou encore

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('<script/>').text()

ou

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

.append($("[code js balisé]")

[Bovino]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
success: function(data){
    $('#elementToUpdate').html(data);
    maFonctionJS();
}

Le JavaScript ne sera exécuté qu'après l'insertion du HTML...

[Reminouche]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
success: function(data){
    $('#elementToUpdate').html(data);
    maFonctionJS();
}

Le JavaScript ne sera exécuté qu'après l'insertion du HTML...

Pour ce qui est des on() sur les évènements click j'ai essayé ca marche nickel, j'ai un dernier problème.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function displayPackage(pacId) {
            $("#body-section-admin").html("<img src='/Images/loading.gif' alt='loading'/>");
            $.ajax(
                {
                    type: 'POST',
                    url: '@SwitchLanguageHelper.FormatTBFLink("/Package/ModifyPackageForm")',
                    data: 'pac_id=' + pacId,
                    dataType : 'html',
                    success: function (result) {
                        $('#body-section-admin').html(result);
                        $("#dt_creation_pac").datepicker();
                    },
                    error: function (req, status, error) {
                        alert("@langue.err_loading_ajax");
                    }
                });
 
                }

Résultat dans la console : Uncaught TypeError: Object [object Object] has no method 'datepicker'

La fonction datepicker appellé juste aprés l'insertion html() ne marche pas.
Et ce n'est pas un problème lié à jquery-ui puisque si je met un :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
<input id="test" type="text"/>         
<script>
$(document).ready(function () {
 
                    $("#test").datepicker();
});</script>

sur ma page "mère" ça fonctionne parfaitement.

Vous avez des idées là dessus ?

Et bien entendu j'ai le même problème avec d'autres fonction tels qu'autocomplete(), etc.

Encore merci pour vos réponses.

[danielhagnoul]

Bonsoir

Je présume que l'ID de l'élément Datepicker est dans le fragment HTML que l'on vient d'ajouter, alors : $( "#dt_creation_pac", "#body-section-admin" ).datepicker();.

[Reminouche]

Même résultat avec ce code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
        function displayPackage(pacId) {
            $("#body-section-admin").html("<img src='/Images/loading.gif' alt='loading'/>");
            $.ajax(
                {
                    type: 'POST',
                    url: '@SwitchLanguageHelper.FormatTBFLink("/Package/ModifyPackageForm")',
                    data: 'pac_id=' + pacId,
                    dataType: 'html',
                    success: function (result) {
                        $('#management-package-block').html(result);
                        $("#dt_creation_pac", "#body-section-admin").datepicker();                    },
                    error: function (req, status, error) {
                        alert("@langue.err_loading_ajax");
                    }
                });

Je sais pas d'ou vient le problème mais il n'a pas l'air de venir du sélecteur jquery car quand je fais un :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

console.log($("#dt_creation_pac").attr("name"));

Ça me retourne la bonne valeur.

Il dit que la fonction datepicker() n'existe pas, pourtant quand j'ouvre le contenu généré du bloc central dans une page indépendante le datepicker marche et je n'ai pas de souci avec cette fonction.

[SylvainPV]

J'ai posé récemment la question pour savoir comment optimiser le chargement AJAX de HTML et de JS simultanément.
Réponse ici : http://www.developpez.net/forums/d12...pt-apres-load/

[danielhagnoul]

Oui ! Cela devrait fonctionner dans la fonction de rappel d'un load().

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$( "#management-package-block" ).load( "url", function(){
    $( "#dt_creation_pac" ).datepicker();
});

Mais cela devrait aussi, logiquement, fonctionner comme cela :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function displayPackage(pacId) {
            $("#body-section-admin").html("<img src='/Images/loading.gif' alt='loading'/>");
            $.ajax(
                {
                    type: 'POST',
                    url: '@SwitchLanguageHelper.FormatTBFLink("/Package/ModifyPackageForm")',
                    data: 'pac_id=' + pacId,
                    dataType: 'html',
                    success: function (result) {
                        $('#management-package-block').html(result);
                    },
                    error: function (req, status, error) {
                        alert("@langue.err_loading_ajax");
                    },
                    complete : function(){
                        $("#dt_creation_pac").datepicker();
                    }
                });

[Reminouche]

Merci à tous pour vos réponses j'ai pu résoudre mon problème.