[AJAX] Javascript dans div chargée dynamiquement.

Version imprimable

21/02/2011, 20h28
cr4sh

[AJAX] Javascript dans div chargée dynamiquement.
Bonsoir tout le monde.

J'ai une petite question, qui je pense peut être résolue. J'aborde doucement la conception d'un site utilisant SWFAddress, avec la mise à jour dynamique du contenu dans une "div" en utilisant Ajax.

Voici donc le système que j'utilise actuellement : http://www.asual.com/swfaddress/samples/ajax/

Je me suis basé sur ce gabarit même, mais lors de mes premiers essais, je m'aperçois que le javascript n'est pas pris en charge lors de la mis à jour du contenu. Par exemple, si je créé une page avec à l'intérieur :
Code:

1 2 3 <SCRIPT language=javascript> alert("test"); </SCRIPT>
Le code n'est pas pris en charge. Quelqu'un aurait-il une idée de comment palier à ce problème ?

En vous souhaitant une très bonne soirée,
Amicalement, Moi.

Bonhour,

Citation:

Je me suis basé sur ce gabarit même, mais lors de mes premiers essais, je m'aperçois que le javascript n'est pas pris en charge lors de la mis à jour du contenu.

effectivement lorsque l'on recharge une DIV après une requête, le contenu des scripts, si existe ne sont pas activé, il faut le faire à la mano.
1/ récupération des balises script de la responseText
2/ extraction de la partie code
3/ exécution du code via eval
cela donne une fonction du type
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 function runScript( txt){ var sJs = ""; // recuperation des scripts balises incluses var sScript = "<script[^>]*>([\\S\\s]*?)<\/script>"; var sReg = new RegExp( sScript, 'img'); var oScript = txt.match( sReg); if( oScript){ for(var i = 0; i < oScript.length; i++){ sReg = new RegExp( sScript, 'im'); // recuperation du code des scripts sJs += oScript[i].match( sReg)[1]; } try{ // execution du code eval( sJs); }catch(e){ } } }
en paramètre tu passes oXHR.responseText

Bonsoir NoSmoking, et merci pour cette réponse intéressante et instructive.

Je suis débutant en Javascript (on peut même dire inexpérimenté...) et ta réponse ne me parle qu'à moitié. Dans les fondements, j'ai bien compris le système, mais dans l'application, c'est un peu plus compliqué.

J'ai donc tenté ceci, ce qui ne marche bien sur pas :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
// Custom utility functions
 
function toTitleCase(str) {
    return str.substr(0,1).toUpperCase() + str.substr(1).toLowerCase();
}      
 
function formatTitle(title) {
    return 'SWFAddress Website' + (title != '/' ? ' / ' + toTitleCase(title.substr(1, title.length - 2).replace(/\//g, ' / ')) : '');
}
 
 
// Custom SWFAddress and Ajax handling
 
function getTransport() {
    if (window.XMLHttpRequest) {
        return new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        try {
            return new ActiveXObject('Msxml2.XMLHTTP');
        } catch(e) {
            return new ActiveXObject('Microsoft.XMLHTTP');
        }
    }
}
 
function appear(content, value) {
    if (typeof value == 'undefined') value = 0;
    var property = content.filters ? 'filter' : 'opacity';
    if (value == 100) {
        if (content.style.removeAttribute) {
            content.style.removeAttribute(property);
        } else {
            content.style[property] = 1;
        }
    } else {
        content.style[property] = content.filters ? 'alpha(opacity=' + value + ')' : value/100;
        setTimeout(function () {appear(content, value + 20)}, 50);
    }
}
 
function runScript(txt){
  var sJs = "";
  // recuperation des scripts balises incluses
  var sScript = "<script[^>]*>([\\S\\s]*?)<\/script>";
  var sReg    = new RegExp(sScript, 'img');
  var oScript = txt.match(sReg);
  if(oScript){
    for(var i = 0; i < oScript.length; i++){
      sReg = new RegExp(sScript, 'im');
      // recuperation du code des scripts
      sJs += oScript[i].match(sReg)[1];
    }
    try{
      // execution du code
      eval(sJs);
    }catch(e){ }
  }
}
 
function updateChange(xhr) {
    if (xhr.readyState == 4) {
        if (xhr.status == 200) {
            var content = document.getElementById('content');
			evalScripts: true;
            content.innerHTML = xhr.responseText;
            appear(content);
			runScript(txt);
        } else {
            alert('Error: ' + xhr.status + '!');
        }
    }
}
 
function handleChange(event) {
    var index, rel, links = document.getElementsByTagName('a'), path = event.path;
    if (path.substr(path.length - 1) != '/') {
        path += '/';
    }
    for (var i = 0, l, link; link = links[i]; i++) {
        index = link.rel.indexOf('?');
        rel = (index > -1) ? link.rel.substr(0, index) : link.rel;
        link.className = (rel == path) ? 'selected' : '';
    }
    var parameters = '';
    for (var p in event.parameters) {
        parameters += '&' + p + '=' + event.parameters[p];
    }
    var xhr = getTransport();
    xhr.onreadystatechange = function() {
        updateChange(xhr);
    }
    xhr.open('get', 'datasource.php?swfaddress=' + event.path + parameters, true);
    xhr.send('');
    SWFAddress.setTitle(formatTitle(event.path));
}
 
function copyLink() {
    if (window.clipboardData && clipboardData.setData) {
        clipboardData.setData('Text', SWFAddress.getBaseURL() + SWFAddress.getValue());
    } else {
        alert('Unsupported browser.');
    }
}
 
SWFAddress.addEventListener(SWFAddressEvent.CHANGE, handleChange);

Pourrais-tu me guider un peu plus quant à l'intégration de ton idée dans ce script ?

Mille mercis par avance,
amicalement, Moi.

en pratique

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
function updateChange(xhr) {
  if (xhr.readyState == 4) {
    if (xhr.status == 200) {
      var content = document.getElementById('content');
//      evalScripts: true;
      content.innerHTML = xhr.responseText;
      appear( content);
      runScript( xhr.responseText); // on passe responseText
    } else {
      alert('Error: ' + xhr.status + '!');
    }
  }
}

22/02/2011, 20h04
cr4sh

Excellent ! Le script fonctionne ! (un simple "alert).
Je vais donc me plonger ce soir dans la préparation de ma galerie JQuery, j'intitulerai "résolu" quand tout fonctionnera correctement, car le script en question est beaucoup plus lourd, on se sait jamais :)

Encore merci pour ton temps NoSmoking, je vais enfin pourvoir avancer !

Très bonne soirée à tout le monde.
22/02/2011, 20h24
NoSmoking

Citation:

Envoyé par cr4sh

...Je vais donc me plonger ce soir dans la préparation de ma galerie JQuery...

dans ce cas pourquoi ne pas utiliser jQuery pour la partie AJAX l'eval des scripts est réalisé...
22/02/2011, 23h24
ABCIWEB

Citation:

Envoyé par NoSmoking

dans ce cas pourquoi ne pas utiliser jQuery pour la partie AJAX l'eval des scripts est réalisé...

+1
Si tu utilises jquery par ailleurs, autant l'utiliser pour générer également les requêtes ajax, et plus généralement tout le javascript,tu gagneras en temps et optimisation de code.