xml et javascript

Version imprimable

27/06/2011, 18h53
Sharcoux

xml et javascript
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:

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:

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

Du coup, comment je fais?

Merci
27/06/2011, 19h32
Watilin

Citation:

Envoyé par Sharcoux

Bonjour,

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

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

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

Code:

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

;)

Merci. Malheureusement, le navigateur est incapable d'interpréter ceci :

Code:

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

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

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.

28/06/2011, 10h22
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.

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:

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:

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

Citation:

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 ! :aie:

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

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

Citation:

Envoyé par Sharcoux

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 ! :aie:
...

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

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
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:

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:

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