Fichier externe HTML en Javascript ?

Version imprimable

Voir 40 message(s) de cette discussion en une page

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>  <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>  </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 ;-)

03/08/2011, 16h47
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.
03/08/2011, 16h51
Bovino

Tu me fais peur l�... :scarymov:

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 ??? 8O
03/08/2011, 17h44
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�
03/08/2011, 17h45
FRANCKYIV

Citation:

Envoy� par Bovino

Tu me fais peur l�... :scarymov:

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 ??? 8O

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 :ccool:
03/08/2011, 17h45
FRANCKYIV

Citation:

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 :ccool:
03/08/2011, 18h09
FRANCKYIV

Citation:

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 ?
03/08/2011, 18h15
Sharcoux

lol

ok. D�j�, est-xe que tu utilises jQuery? (ca m'arrangerait pour les exemples.. ;) )
03/08/2011, 18h25
FRANCKYIV

Citation:

Envoy� par Sharcoux

lol

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

Heu � priori nan :-D
03/08/2011, 18h27
FRANCKYIV

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

Je t�l�charge lequel ?

- minified
- regular
03/08/2011, 18h36
SpaceFrog

le minified

les deux fonctionnent, l'une est lisible, l'autre compress�e
03/08/2011, 18h42
FRANCKYIV

Citation:

Envoy� par SpaceFrog

le minified

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

ok marchi :)

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

Bon ben j'dois �tre une buze car �a marche toujours pas :cry:

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.

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

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

05/08/2011, 09h56
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... :mouarf:

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

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 ... :mouarf::cry:

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

07/08/2011, 20h50
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 :)

Voir 40 message(s) de cette discussion en une page