Discussion :

[boboss123]

Bonjour,

Je récupère une page Web en AJAX comme ceci

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
19
20
$.ajax({
            url: "toto.html",
            type: "GET",
 
            dataType: "html",
            cache: false,
 
            //timeout: myOptions.timeout,
            error: function(jqXHR, textStatus, errorThrown){
                alert("error");
            },
            //data: postStr,
            success: function(data){
                //alert("success");
 
                var $div = $("<div>").append($.parseHTML(data));
 
                $("#myDiv1").html($div.find("#myDiv2").html());
            }
        });

Page "toto.html"

Code html :

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

1
2
3
4
5
6
7
8
9
<div id="myDiv2"></div>
	Hello
</div>
 
<script type="text/javascript">
function foo(){
    alert("hello world !");
}
</script>

Est-il possible à la réception de ma requete AJAX, d'executer la fonction foo ?
=> je ne vois pas comment récupérer/executer le script

Merci d'avance,

[SpaceFrog]

getScript()

[boboss123]

Merci, mais cette fonction m'impose d'envoyer une requête AJAX supplémentaire il me semble, non ?
=> à moins que j'ai mal compris l'utilisation de la fonction

Je voudrai dans une même requête AJAX récupérer certaines parties de la page Web et récupérer les fonctions javascript.

Aussi j'ai un problème sous IE8, la ligne suivante me renvoi rien :

Code :

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

$.parseHTML(data)

[boboss123]

J'ai enfin trouvé pour que le code JavaScript soit pris en compte dans la fonction parseHTML()

page "toto.html" :

Code :

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

1
2
3
4
5
6
7
8
9
<div id="myDiv2"></div>
	Hello
</div>
 
<script id="scripts" type="text/javascript">
function foo(){
    alert("hello world !");
}
</script>

fonction success de $.ajax():

Code :

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

1
2
3
4
5
6
7
8
 
success: function(data){
  var $div = $("<div>").append($.parseHTML(data, document, true));
  $("#myDiv1").html($div.find("#myDiv2").html());
  var $script = $("#scripts").html($div.find("#scripts").html());
  eval($script);
  foo();
},

Par contre parseHTML() ne fonctionne toujours pas sous IE8

[boboss123]

J'avais une erreur dans le fichier "toto.html" (je n'avais pas mis tout le code)
=> j'avais mal refermé un div

Par contre maintenant j'ai une erreur sur (pour IE8) :

Code :

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

1
2
3
 
var $script = $("#scripts").html($div.find("#scripts").html());
// var $script = $("#scripts").html("function foo(){}"); // génère aussi l'erreur

[boboss123]

J'ai trouvé une solution qui à l'air de focntionner :

Code :

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

1
2
3
4
5
6
7
success: function(data){
  var $div = $("<div>").append($.parseHTML(data, document, true));
  $("#myDiv1").html($div.find("#myDiv2").html());
 
  eval($div.find("#scripts").html());
  foo();
},

Par contre lorsque je vais recharger une autre page Web, comment faire pour vider en mémoire les fonctions que j'ai précédemment crées (vu qu'elles ne servent plus à rien)

[Bovino]

Heu... quand tu changes de page, tout le contexte JavaScript disparait.

Ceci dit, ta solution me semble bancale. Logiquement puisque tu as précisé le dataType: 'html', les scripts contenus dans le HTML reçu devraient être interprétés directement par jQuery (et de façon un peu plus propre qu'un eval()).
As-tu essayé

Code :

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

1
2
3
4
success: function(data){
  $("#myDiv1").html(data);
  foo();
},

[boboss123]

Bonjour,

As-tu essayé

Code :

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

1
2
3
4
success: function(data){
  $("#myDiv1").html(data);
  foo();
},

=> Je ne peux pas utiliser cette solution car dans la page Web récupérée, il y a plusieurs div qui sont dispatchés à des endroits différents de la page web (j'ai un div pour le contenu + un div pour un sous-menu). Le sous-menu dépend donc de la page chargée.

Heu... quand tu changes de page, tout le contexte JavaScript disparait.

=>je ne change pas de page : je n'ai qu'une page principale qui charge des pages secondaires via AJAX.
=> Le principe :
- j'ai une page web principale avec un menu : lorsque je click sur un élément du menu, ça me charge dans ma page le contenu d'un fichier .html chargé via AJAX
- chaque page Web chargées via AJAX contient du code javascript pour la gestion du rafraichissement/construction de celle-ci (récupération des données dans des fichiers .json).

Donc on a :
La page page principale qui charge des pages secondaires qui chargent des fichiers .json

Peut être que l'architecture n'est pas bonne (trop compliquée ?) ...

[SpaceFrog]

Code :

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

$("#myDiv1").html(data);

rien ne t'empeche de recupérer les bouts de code voulus

Code :

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

$("#myDiv1").html(data.find('script'));

[boboss123]

ok merci