Fichier externe HTML en Javascript ?

[FRANCKYIV]

Bonjour les gens

Alors voilà j'explique mon problème.

Je suis l'un des webmasters de ce site : www.toutes-les-solutions.fr

C'est un forum que nous avons tellement modulé qu'il ressemble en partie à un site web aussi.

Adresse Web :
http://www.toutes-les-solutions.fr/phpbb/hacks_list.php

(plus de 150 modifications)


Bref ... le forum comporte des rubriques comme par exemple les fiches de téléchargement.

Nous avons rajouté un module qui permet d'insérer du code HTML dans les messages.
Ce qui veut donc dire que je peux mettre du HTML, CSS ou encore Javascript dans les messages.

Maintenant voici mon problème.

Prenons cet exemple de fiche :

Adresse Web :
http://www.toutes-les-solutions.fr/phpbb/topic361.html

Elle commence par une barre de partage vers les réseaux sociaux (facebook, twitter, etc).

Voici le code mis dans la page :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<table class="partage">
<tr>
<td>
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style addthis_32x32_style" align="center">
<a class="addthis_button_favorites" title="Créer un Marque page"></a>
<a class="addthis_button_facebook" title="Partager sur Facebook"></a>
<a class="addthis_button_twitter" title="Partager sur Twitter"></a>
<a class="addthis_button_myspace" title="Partager sur Myspace"></a>
<a class="addthis_button_wordpress" title="Partager sur Wordpress"></a>
<a class="addthis_button_blogger" title="Partager sur Blogger"></a>
<a class="addthis_button_netvibes" title="Partager sur Netvibes"></a>
<a class="addthis_button_email" title="Partager par Email"></a>
<a class="addthis_button_compact" title="Partager sur d'autres choses"></a>
<a class="addthis_counter addthis_bubble_style"></a>
<a class="addthis_button_google_plusone" title="Partager sur Google Plus One"></a>
<script type="text/javascript">var addthis_config = {"data_track_clickback":true};</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4d6e18ae4d9e688b"></script>
<!-- AddThis Button END -->
</td>
</tr>
</table>

Le problème, c'est qu'il m'arrive de modifier ce code pour réarranger les icônes (rajouter google plus one par exemple).

Je me demandais s'il n'était pas possible de mettre ce code dans un fichier externe, et ainsi n'avoir à modifier qu'un seul fichier au lieu de la centaine de fiches de téléchargements.

Je me pose la question en Javascript, puisque c'est le seul langage que je peux utiliser dans les messages.

Voilà ... si quelqu'un peut me trouver une piste ;-)

[FRANCKYIV]

Plus je regarde, et plus je me dis que c'est mal barré ... :-P

Je vais voir s'il n'est pas possible de créer un bbcode pour php afin de pouvoir executer du php.

Ca serait bien plus simple d'utiliser le php je pense.

[Bovino]

Tu me fais peur là...

Tu veux dire que dans les messages, il est déjà possible de mettre du JavaScript qui sera interprété et que tu comptes en plus ajouter du PHP qui sera exécuté sur le serveur ???

[Sharcoux]

Il faut mettre ton html dans un fichier xml puis faire une requête ajax avec dataType = "html".
Ensuite, évidemment, tu récupère la partie du xml qui t'intéresse (càd le html), et tu l'insère où tu veux dans ta page avec innerHTML ou $.html()

testé et approuvé

[FRANCKYIV]

Envoyé par Bovino

Tu me fais peur là...

Tu veux dire que dans les messages, il est déjà possible de mettre du JavaScript qui sera interprété et que tu comptes en plus ajouter du PHP qui sera exécuté sur le serveur ???

Oui tout à fait :-)

Pour l’interprétation du HTML qui se fait via un bbcode [html] [/html] cela ne fonctionne que pour les administrateurs du forum (on est deux) ... + un groupe d'utilisateur que je peux définir.

Maintenant, je vais voir pour faire la même chose avec PHP

[FRANCKYIV]

Envoyé par Sharcoux

Il faut mettre ton html dans un fichier xml puis faire une requête ajax avec dataType = "html".

testé et approuvé

Ah je ne connaissais pas cette piste, je vais tester

[FRANCKYIV]

Envoyé par Sharcoux

Il faut mettre ton html dans un fichier xml puis faire une requête ajax avec dataType = "html".
Ensuite, évidemment, tu récupère la partie du xml qui t'intéresse (càd le html), et tu l'insère où tu veux dans ta page avec innerHTML ou $.html()

testé et approuvé

Bon ben c'est pas évident :-P

Tu n'aurais pas un exemple à me montrer ?

[Sharcoux]

lol

ok. Déjà, est-xe que tu utilises jQuery? (ca m'arrangerait pour les exemples.. )

[FRANCKYIV]

Envoyé par Sharcoux

lol

ok. Déjà, est-xe que tu utilises jQuery? (ca m'arrangerait pour les exemples.. )

Heu à priori nan :-D

[FRANCKYIV]

Adresse Web :
http://blog.jquery.com/2011/06/30/jquery-162-released/

Je télécharge lequel ?

- minified
- regular

[SpaceFrog]

le minified

les deux fonctionnent, l'une est lisible, l'autre compressée

[FRANCKYIV]

Envoyé par SpaceFrog

le minified

les deux fonctionnent, l'une est lisible, l'autre compressée

ok marchi

[Sharcoux]

ok, alors ensuite, tu peux faire comme ça pour charger ton fichier en jQuery :

Code :

1
2
3
4
5
6
7
8
    $.ajax({
        url: "monFichier.xml",
        type: "GET",
        dataType: "html",
	success: function(data) {$("div.addthis_toolbox").html($(data).find("div.addthis_toolbox"));
        error: function(type) {alert("Error "+type.status+" : fail while trying to load "+address);}
 
    });

demande si tu veux des explications ou si tu as toujours du mal à l'implémenter

[FRANCKYIV]

Bon ben j'dois être une buze car ça marche toujours 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
<?xml version="1.0"?>
<page>
<![CDATA[
<table class="partage">
<tr>
<td>
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style addthis_32x32_style" align="center">
<a class="addthis_button_favorites" title="Créer un Marque page"></a>
<a class="addthis_button_facebook" title="Partager sur Facebook"></a>
<a class="addthis_button_twitter" title="Partager sur Twitter"></a>
<a class="addthis_button_myspace" title="Partager sur Myspace"></a>
<a class="addthis_button_wordpress" title="Partager sur Wordpress"></a>
<a class="addthis_button_blogger" title="Partager sur Blogger"></a>
<a class="addthis_button_netvibes" title="Partager sur Netvibes"></a>
<a class="addthis_button_email" title="Partager par Email"></a>
<a class="addthis_button_compact" title="Partager sur d'autres choses"></a>
<a class="addthis_counter addthis_bubble_style"></a>
<a class="addthis_button_google_plusone" title="Partager sur Google Plus One"></a>
<script type="text/javascript">var addthis_config = {"data_track_clickback":true};</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4d6e18ae4d9e688b"></script>
<!-- AddThis Button END -->
</td>
</tr>
</table>
]]>
</page>

Peut-être à cause de mon XML qui ne serait pas bon ?
Il faut dire qu'il y a du javascript dans mon xml, peut-être pour ça ?
D'un autre côté, je peux laisser ça dans les fiches.
C'est pas ça qui est génant, mais plutôt la liste que j'aimerai modifier.

[Sharcoux]

ta balise est pas fermée :

Code :

<div class="addthis_toolbox addthis_default_style addthis_32x32_style" align="center">

ensuite, à mon avis, vire le CDATA qui risque de poser un problème.
Après, il faut adapter mon code, par exemple

Code :

1
2
3
4
5
6
7
8
    $.ajax({
        url: "monFichier.xml",
        type: "GET",
        dataType: "html",
	success: function(data) { $("sélecteurCSS de l'élément où insérer le html").html($(data).find("table.partage").html());
        error: function(type) {alert("Error "+type.status+" : fail while trying to load "+address);}
 
    });

Si tu as encore des problèmes, n'hésites pas, mais donne nous un peu plus d'éléments pour t'aider (code de la page, code xml, javascript utilisé, erreur rencontrée, ou ce que tu veux obtenir au final par exemple)

edit: OUPS, j'avais oublié un .html() dans le code

[FRANCKYIV]

Oh ben oui merde ma balise n'est même pas fermé :-P

Bon ça fonctionne toujours pas.

Je me suis dis, c'est peut-être à cause du système du forum.

J'ai donc testé en HTML pure.
Et ça ne marche toujours pas.

Voilà exactement ce que j'ai mis :

Pour le fichier XML :

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
<?xml version="1.0"?>
<page>
<![CDATA[
<table class="partage">
<tr>
<td>
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style addthis_32x32_style" align="center">
<a class="addthis_button_favorites" title="Créer un Marque page"></a>
<a class="addthis_button_facebook" title="Partager sur Facebook"></a>
<a class="addthis_button_twitter" title="Partager sur Twitter"></a>
<a class="addthis_button_myspace" title="Partager sur Myspace"></a>
<a class="addthis_button_wordpress" title="Partager sur Wordpress"></a>
<a class="addthis_button_blogger" title="Partager sur Blogger"></a>
<a class="addthis_button_netvibes" title="Partager sur Netvibes"></a>
<a class="addthis_button_email" title="Partager par Email"></a>
<a class="addthis_button_compact" title="Partager sur d'autres choses"></a>
<a class="addthis_counter addthis_bubble_style"></a>
<a class="addthis_button_google_plusone" title="Partager sur Google Plus One"></a>
<script type="text/javascript">var addthis_config = {"data_track_clickback":true};</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4d6e18ae4d9e688b"></script>
<!-- AddThis Button END -->
</div>
</td>
</tr>
</table>
]]>
</page>

Et pour le fichier HTM :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<html>
 
<head>
<script src="http://www.toutes-les-solutions.fr/phpbb/js/jquery.js" type="text/javascript"></script>
<link rel="stylesheet" title="defaut" href="http://www.toutes-les-solutions.fr/phpbb/css/tutos.css" type="text/css"></link>
</head>
 
<body>
 
<script language="Javascript"> 
$.ajax({
        url: "http://www.toutes-les-solutions.fr/phpbb/xml/partage.xml",
        type: "GET",
        dataType: "html",
	success: function(data) { $("sélecteurCSS de l'élément où insérer le html").html($(data).find("table.partage").html());
        error: function(type) {alert("Error "+type.status+" : fail while trying to load "+address);}
 
    });
</script>
 
</body>
 
</html>

Je teste ceci à cette adresse :

Adresse Web :
http://www.toutes-les-solutions.fr/test

Désolé d'être aussi noob ... et merci de ta patience

[Sharcoux]

"All text in an XML document will be parsed by the parser. But text inside a CDATA section will be ignored by the parser."

Si j'étais toi, j'enlèverais la balise CDATA avant de mettre le contenu dans le fichier xml...

ah, et ça : $("sélecteurCSS de l'élément où insérer le html") c'était à remplacer par ça, par exemple : $("body")

[FRANCKYIV]

Fichier XML :

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
<?xml version="1.0"?>
<page>
<table class="partage">
<tr>
<td>
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style addthis_32x32_style" align="center">
<a class="addthis_button_favorites" title="Créer un Marque page"></a>
<a class="addthis_button_facebook" title="Partager sur Facebook"></a>
<a class="addthis_button_twitter" title="Partager sur Twitter"></a>
<a class="addthis_button_myspace" title="Partager sur Myspace"></a>
<a class="addthis_button_wordpress" title="Partager sur Wordpress"></a>
<a class="addthis_button_blogger" title="Partager sur Blogger"></a>
<a class="addthis_button_netvibes" title="Partager sur Netvibes"></a>
<a class="addthis_button_email" title="Partager par Email"></a>
<a class="addthis_button_compact" title="Partager sur d'autres choses"></a>
<a class="addthis_counter addthis_bubble_style"></a>
<a class="addthis_button_google_plusone" title="Partager sur Google Plus One"></a>
<script type="text/javascript">var addthis_config = {"data_track_clickback":true};</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4d6e18ae4d9e688b"></script>
<!-- AddThis Button END -->
</div>
</td>
</tr>
</table>
</page>

Fichier HTML :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<html>
 
<head>
<script src="http://www.toutes-les-solutions.fr/phpbb/js/jquery.js" type="text/javascript"></script>
<link rel="stylesheet" title="defaut" href="http://www.toutes-les-solutions.fr/phpbb/css/tutos.css" type="text/css"></link>
</head>
 
<body>
 
<script language="Javascript"> 
$.ajax({
        url: "http://www.toutes-les-solutions.fr/phpbb/xml/partage.xml",
        type: "GET",
        dataType: "html",
	success: function(data) { $$("body").html($(data).find("table.partage").html());
        error: function(type) {alert("Error "+type.status+" : fail while trying to load "+address);}
 
    });
</script>
 
</body>
 
</html>

Toujours pas ...

[Sharcoux]

courage, t'y es presque. Il faut mettre le script dans le head et utiliser document.onload ou son équivalent $.ready :

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
<html>
 
<head>
<script src="http://www.toutes-les-solutions.fr/phpbb/js/jquery.js" type="text/javascript"></script>
<link rel="stylesheet" title="defaut" href="http://www.toutes-les-solutions.fr/phpbb/css/tutos.css" type="text/css"></link>
 
<script language="Javascript"> 
init = function() {
    $.ajax({
        url: "http://www.toutes-les-solutions.fr/phpbb/xml/partage.xml",
        type: "GET",
        dataType: "html",
	success: function(data) { $("body").html($(data).find("page").html());
        error: function(type) {alert("Error "+type.status+" : fail while trying to load "+address);}
 
    });
}
$(document).ready(init);
</script>
 
 
</head>
 
<body>
 
</body>
 
</html>

edit : attention, petite correction dans le selecteur

[FRANCKYIV]

OK marchi

Je teste ça demain (lundi).

La c'est le week-end, et je travaille avec mon collègue justement sur le dit forum (optimisation du forum, du serveur, etc).

J'te dis quoi demain