Discussion :

[Sharcoux]

Bonjour,

J'ai une question très bête. Attention :

J'aimerais insérer du code xml dans un fichier html à partir d'un fichier javascript.

Pour le moment j'ai ça :
index.html : contient notamment une balise <truc id="machin">
js.js : $(#machin).append( monXML );

jusque là, tout va bien. Mon problème vient maintenant :

Code :

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

1
2
3
4
5
6
7
 
monXML = "<balise>....\n\
    ligne....\n\
    ligne2....\n\
    ....    \n\
    ligne100...\n\
<\balise>"

voilà.

Mon problème, évidemment, c'est ces tonnes de \n\ que je compte pas m'amuser à taper. Sans compter que cette méthode m'oblige à changer tous les "attributs" en 'attributs'. Bref, c'est moche.

Une solution serait de créer un fichier xml externe, mais comme le xml que je vais insérer sera modulé par des variables, du genre :

Code :

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

monXML = "<balise>..."+variable1+"...codeHTML..."+variable2+...etc...</balise>"

Du coup, comment je fais?

Merci

[Watilin]

Bonjour,

J'ai une question très bête.

J'aimerais pas être là le jour où tu poseras une question compliquée

Bon. Je suis pas sûr d'avoir compris ta question, mais essaye ceci :

Code JS :

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

monXML.replace(/$/gm, '\\n\\')

[Sharcoux]

Merci. Malheureusement, le navigateur est incapable d'interpréter 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
 
monXML = "<tr class="your_listbox-data-line-5 DataB">
 
                                                            <td class="listbox-table-select-cell">
                                                                <input type="checkbox"
                                                                        id="your_listbox_cb_8700"
                                                                        name="uids:list" value="8700" />
                                                            </td>
 
                                                            <td class="listbox-table-data-cell">
                                                                <a href="...">Web Table</a>
                                                            </td>
 
                                                             ...
 
                                                        </tr>";

Du coup, je doute que monXML.replace(/$/gm, '\\n\\') ait un quelconque effet...
Mais merci déjà pour l'idée, ça pourrait resservir

[Watilin]

Ah oui d'accord. Il suffit d'échapper les guillemets (et les sauts de ligne, bien sûr) :

Code JS :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var monXML = "<tr class=\"your_listbox-data-line-5 DataB\">\
	<td class=\"listbox-table-select-cell\">\
		 <input type=\"checkbox\"\
					id=\"your_listbox_cb_8700\"\
					name=\"uids:list\" value=\"8700\" />\
	</td>\
 \
	<td class=\"listbox-table-data-cell\">\
		 <a href=\"...\">Web Table</a>\
	</td>\
 \
	 ...\
 \
</tr>";

Sinon pour ton histoire de XML avec variables, ça me semble plus adapté de faire un traitement XSL côté serveur, et de récupérer le résultat avec AJAX.

[Sharcoux]

Le problème, c'est que sur 100 lignes de codes, je vais péter un câble bien avant d'avoir atteint la fin du xml...

Bon, tant pis. Je vais essayer de décomposer le xml en fragments dans un fichier externe, et de caler mes variables dans tout ça.

Merci pour le coup de main.

[sekaijin]

Salut

encore une fois pourquoi en passer par des chaînes de caractères ?

il est plus simple d'utiliser DOM est d'ajouter des éléments
avec un petite lib ad hoc (ou même avec les méthodes DOM)

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
document.Html(
    {
      lang:'fr',
      xmlns:'http://www.w3.org/1999/xhtml',
      'xml:lang':'fr'
    },null,
    {
      prepare: function() {
        alert(this.nodeName + ': ' + this.clientWidth + ' X ' + this.clientHeight);
      }
    })
    .Head({'xmlns:x':'urn:org.truc.nc'})
      .Title('Test de page  DOM').parentNode.parentNode
    .Body(null,{backgroundColor: 'rgb(128,0,0)'})
      .H1('Hello',null,{margin:'auto', width:'150px', textAlign:'center', backgroundColor: 'rgb(255,255,255)'}).parentNode
      .P({
        'class':'corpus',
        id:'150',
        title:'corps',
        lang:'fr',
        'xml:lang':'fr',
        dir:'rtl'
      },{
        margin:'auto',
        padding:'15px',
        width:'90%',
        height:document.body.clientHeight - 100,
        textAlign:'left',
        backgroundColor: 'rgb(255,255,255)'
      },{
        onclick: function() {
          document.html.prepare();
        }
      }).B('World');

sinon l'utilisation de ' et " suffit à éviter un certain nombre de \\

Code :

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

1
2
3
4
5
6
7
8
monXML = '<tr class="your_listbox-data-line-5 DataB">
  <td class="listbox-table-select-cell">
    <input type="checkbox" id="your_listbox_cb_8700" name="uids:list" value="8700" />
  </td>
  <td class="listbox-table-data-cell">
    <a href="...">Web Table</a>
  </td>
</tr>';

A+JYT

[Sharcoux]

pourquoi en passer par des chaînes de caractères ?

parce que le but est de pouvoir faire un copier/coller. Si je dis que je vais péter un cable si je dois ajouter \ à la fin de chaque ligne parce que j'en ai une centaine, t'imagines bien que je vais pas m'amuser à recréer tout le html de zéro avec des commandes DOM !

sinon, pour ton autre remarque, c'est vrai, mais le code exact serait plutôt :

Code :

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

1
2
3
4
5
6
7
8
monXML = '<tr class="your_listbox-data-line-5 DataB">\
  <td class="listbox-table-select-cell">\
    <input type="checkbox" id="your_listbox_cb_8700" name="uids:list" value="8700" />\
  </td>\
  <td class="listbox-table-data-cell">\
    <a href="...">Web Table</a>\
  </td>\
</tr>';

Merci quand même pour ta réponse

[sekaijin]

parce que le but est de pouvoir faire un copier/coller. Si je dis que je vais péter un cable si je dois ajouter \ à la fin de chaque ligne parce que j'en ai une centaine, t'imagines bien que je vais pas m'amuser à recréer tout le html de zéro avec des commandes DOM !
...

Ben si c'est extrêmement pratique et efficace
tu charge ça

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
document.HtmlTag = function(tagname, attributes) {
  var tag = document.extendElement(document.createElement(tagname));
  if (this != document) {
    this.appendChild(tag);
  }
  return tag.set(attributes);
};
 
document.Text = function(text) {
  var tag = document.createTextNode(text);
  if (this != document) {
    this.appendChild(tag);
  }
  return this;
};
 
document.extendElement = function(node) {
  node.set = function(attributes) {
     if (typeof(attributes) != 'undefined') {
        for (key in attributes) {
           this.setAttribute(key, attributes[key]);
        }
     }
     return this;
  };
  node.HtmlTag = document.HtmlTag;
  node.InlineTag = function(tagname, text, attributes) {
    var tag = this.HtmlTag(tagname, attributes);
    if ((typeof(text) != 'undefined') && (text != null)) {
       tag.Text(text);
    }
    return tag;
  };
  node.Text = document.Text;
  node.NoBreakSpace  = function() {
    return this.Text(String.fromCharCode(160));
  };
  return node;
};

et ensuite tu n'a qu'à faire

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
var aVar='ceci est un test pour montrer comment inclure une variable dans le code xml généré sans pb de "'
 
xml = document.HtmlTag('xml')
xml
  .HtmlTag('tr',{class:'your_listbox-data-line-5 DataB'})
    .HtmlTag('td')
      .HtmlTag('input', {id: 'your_listbox_cb_8700', name: 'uids:list', value: '8700'}).parentNode
      .parentNode
  .parentNode
  .HtmlTag('tr', {class: 'listbox-table-data-cell'})
    .Text('la variable dans un attribut du tag')
    .InlineTag('a', 'Web Table', {href: '...', att: aVar}).parentNode
    .Text('La variable directement dans le xml ')
    .Text(aVar)
 
a = xml.innerHTML
console.log(a)

et voici ce que ça donne

Code xml :

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

1
2
3
4
5
6
7
8
9
<tr class="your_listbox-data-line-5 DataB">
  <td>
    <input id="your_listbox_cb_8700" name="uids:list" value="8700"></td>
</tr>
<tr class="listbox-table-data-cell">
  la variable dans un attribut du tag
  <a href="..." att="ceci est un test pour montrer comment inclure une variable dans le code xml généré sans pb de & quot;">Web Table</a>
  La variable directement dans le xml ceci est un test pour montrer comment inclure une variable dans le code xml généré sans pb de "
</tr>

A+JYT