SetInnerHTML et balise <script>

**costadelo** · 19/12/2006, 11h30

Bonjour @tous, je reprend le sujet posté hier concernant l'éxécution de <script> au sein d'une page (AJAX_edit_artiste_form.php) appelée par xhr.open().
Le script semble fonctionner à moitié puisqu'il affiche le contenu de AJAX_edit_artiste_form.php, mais sans interpréter les balises <script> présentes sur cette page...
Et lorsque je clique quelque part sur la page, ca fait tout planter, mon navigateur devient tout blanc, et je suis obligé de terminer le processus "firefox.exe", puis redémarrer Firefox pour continuer à l'utiliser...

Que ce passe t'il ? Mon navigateur serait - il allergique

à
setInnerHTML () ?

Merci d'avance pour vos réponses !

Ma page editArtiste.php :

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
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
106
107
108
109
110
111
 
<script language="javascript" type="text/javascript">
 
setInnerHTML = function(divContent, HTML) {
      divContent.innerHTML=HTML; 
      var All=divContent.getElementsByTagName("*");
      for (var i=0; i<All.length; i++) {
        All[i].id=All[i].getAttribute("id")
        All[i].name=All[i].getAttribute("name")
        All[i].className=All[i].getAttribute("class")
      }
      var AllScripts=divContent.getElementsByTagName("script")
      for (var i=0; i<AllScripts.length; i++) {
         var s=AllScripts[i];
         if (s.src && s.src!="") {
            // Précédement asynchrone, mis en synchrone pour éviter des problčmes de dépendances de scripts
            eval(getFileContent(s.src))
         }
         else {
            eval(s.innerHTML)
         }
      }
   }
 
var pickRecentProgID = function (idList){
 
  var bFound = false;
  for(var i=0; i < idList.length && !bFound; i++){
	try{
	      var oDoc = new ActiveXObject(idList[i]);
	      o2Store = idList[i];
	      bFound = true;
	}catch (objException){
 
	};
 };
 
   if (!bFound)
	throw ("Aucun ActiveXObject n'est valide sur votre ordinateur, pensez   mettre  jour votre navigateur");
		idList = null;
 
		return o2Store;
}
 
// Retourne un nouvel objet XmlHttpRequest
var GetXmlHttpRequest_AXO=null;
var GetXmlHttpRequest=function () {
	if (window.XMLHttpRequest) {
	      return new XMLHttpRequest()
	}
	else if (window.ActiveXObject) {
	    if (!GetXmlHttpRequest_AXO) {
						GetXmlHttpRequest_AXO=pickRecentProgID(["Msxml2.XMLHTTP.5.0", "Msxml2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP"]);
	    }
	return new ActiveXObject(GetXmlHttpRequest_AXO)
	}
		return false;
        }
 
 
	getXhr=GetXmlHttpRequest;
 
function getFileContent(url) {
       var Xhr=GetXmlHttpRequest();
       Xhr.open("POST",url,false);
       Xhr.send(null);
       return Xhr.responseText;
 }
 
 
</script>
 
<select name='select_artiste_edit' id='select_artiste_edit'>
<option value='1'>Artiste 1</option>
<option value='2'>Artiste 2</option>
</select>
 
<script language="javascript" type="text/javascript">	
 
 
    function go1(){			
 
      var xhr = getXhr();
 
      xhr.onreadystatechange = function(){
 
	if(xhr.readyState == 4 && xhr.status == 200){
		leselect = xhr.responseText;
 
	setInnerHTML(window.document.getElementById("bloc1"), leselect);
 
	}
     }
 
xhr.open("POST","./AJAX_edit_artiste_form.php",true);
 
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
 
edit_art_id = window.document.getElementById('sel_edit_art_id');
Edit_art_id = edit_art_id.value;
 
xhr.send("edit_art_id="+Edit_art_id);
}
 
 
 
elem = window.document.getElementById('select_type_edit');		
elem.onclick = function() { go1(); };		
 
 
</script>

Ma page AJAX_edit_artiste_form.php :

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
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
106
107
108
109
110
111
112
113
114
115
116
117
 
<script type="text/javascript">
<!--Editeur HTML functions -->
  _editor_url = "http://augoutdujour.fr/solea/soleadmin/editor";
  _editor_lang = "fr";
</script>
<script type="text/javascript" src="./editor/htmlarea.js"></script>
<script type="text/javascript">
var editor = null;
initEditor = function() {
  editor = new HTMLArea("newbio_art");
 
  // comment the following two lines to see how customization works
  editor.generate();
  return false;
 
  var cfg = editor.config; // this is the default configuration
  cfg.registerButton({
    id        : "my-hilite",
    tooltip   : "Highlight text",
    image     : "ed_custom.gif",
    textMode  : false,
    action    : function(editor) {
                  editor.surroundHTML("<span class=\"hilite\">", "</span>");
                },
    context   : 'table'
  });
 
  cfg.toolbar.push(["linebreak", "my-hilite"]); // add the new button to the toolbar
 
  // BEGIN: code that adds a custom button
  // uncomment it to test
  var cfg = editor.config; // this is the default configuration
  /*
  cfg.registerButton({
    id        : "my-hilite",
    tooltip   : "Highlight text",
    image     : "ed_custom.gif",
    textMode  : false,
    action    : function(editor) {
                  editor.surroundHTML("<span class=\"hilite\">", "</span>");
                }
  });
  */
 
clickHandler = function(editor, buttonId) {
  switch (buttonId) {
    case "my-toc":
      editor.insertHTML("<h1>Table Of Contents</h1>");
      break;
    case "my-date":
      editor.insertHTML((new Date()).toString());
      break;
    case "my-bold":
      editor.execCommand("bold");
      editor.execCommand("italic");
      break;
    case "my-hilite":
      editor.surroundHTML("<span class=\"hilite\">", "</span>");
      break;
  }
};
cfg.registerButton("my-toc",  "Insert TOC", "ed_custom.gif", false, clickHandler);
cfg.registerButton("my-date", "Insert date/time", "ed_custom.gif", false, clickHandler);
cfg.registerButton("my-bold", "Toggle bold/italic", "ed_custom.gif", false, clickHandler);
cfg.registerButton("my-hilite", "Hilite selection", "ed_custom.gif", false, clickHandler);
 
cfg.registerButton("my-sample", "Class: sample", "ed_custom.gif", false,
  function(editor) {
    if (HTMLArea.is_ie) {
      editor.insertHTML("<span class=\"sample\">&nbsp;&nbsp;</span>");
      var r = editor._doc.selection.createRange();
      r.move("character", -2);
      r.moveEnd("character", 2);
      r.select();
    } else { // Gecko/W3C compliant
      var n = editor._doc.createElement("span");
      n.className = "sample";
      editor.insertNodeAtSelection(n);
      var sel = editor._iframe.contentWindow.getSelection();
      sel.removeAllRanges();
      var r = editor._doc.createRange();
      r.setStart(n, 0);
      r.setEnd(n, 0);
      sel.addRange(r);
    }
  }
);
 
 
  /*
  cfg.registerButton("my-hilite", "Highlight text", "ed_custom.gif", false,
    function(editor) {
      editor.surroundHTML('<span class="hilite">', '</span>');
    }
  );
  */
  cfg.pageStyle = "body { background-color: #efd; } .hilite { background-color: yellow; } "+
                  ".sample { color: green; font-family: monospace; }";
  cfg.toolbar.push(["linebreak", "my-toc", "my-date", "my-bold", "my-hilite", "my-sample"]); // add the new button to the toolbar
  // END: code that adds a custom button
 
  editor.generate();
}
insertHTML = function() {
  var html = prompt("Enter some HTML code here");
  if (html) {
    editor.insertHTML(html);
  }
}
highlight = function() {
  editor.surroundHTML('<span style="background-color: yellow">', '</span>');
}
<!--END : Editeur HTML functions -->
</script>
 
<textarea name="newbio_art" id="newbio_art" cols="48" rows="15"  /><?php if(isset($bio) && $bio!="") echo $bio; ?></textarea>

Ma page AJAX_edit_artiste_form.php s'affiche correctement, la seule chose est que l'editeur HTML n'est pas initialisé

**Matthieu2000** · 19/12/2006, 11h52

fais l'appel de tes script dans la fonction

xhr.onreadystatechange = function() {...}

...
il y a un sous forum ajax plus haut!

**FremyCompany** · 19/12/2006, 12h07

Code :

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

<script type="text/javascript" src="./editor/htmlarea.js"></script>

Quelle est la taille de se fichier ?

Si il est trop important, mets-le directement dans la page principale

En effet, le navigateur attend d'avoir recu tout le script du serveur avant de continuer l'execution

Si le script est volumineux, et que la connection est lente, cela prend du temps, et peut entrainer des problèmes de performances/stabilbité...

De plus, je te conseille de mettre

Code :

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

<textarea ...></textarea>

avant le script, pour que cela marche correctement

SetInnerHTML et balise <script>

JavaScript

Discussions similaires

Partager

Partager