Une requête AJAX peut-elle insérer du Javascript ?

Version imprimable

10/01/2013, 18h55
Reminouche

Une requête AJAX peut-elle insérer du Javascript ?

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.
10/01/2013, 19h06
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.

Citation:

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.
10/01/2013, 19h12
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
10/01/2013, 21h13
SpaceFrog

Code:

getScript()

?
ou encore

Code:

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

ou

Code:

.append($("[code js balisé]")
10/01/2013, 21h21
Bovino
:koi:
Code:

1 2 3 4 success: function(data){ $('#elementToUpdate').html(data); maFonctionJS(); }
Le JavaScript ne sera exécuté qu'après l'insertion du HTML... :?

Citation:

Envoyé par Bovino

:koi:

Code:

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:

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:

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.

10/01/2013, 23h48
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();.

Même résultat avec ce code :

Code:

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:

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.

11/01/2013, 10h46
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/

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

Code:

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

Mais cela devrait aussi, logiquement, fonctionner comme cela :

Code:

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();
                    }
                });

11/01/2013, 14h18
Reminouche

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