Nouveau sur le forum ? Voici votre case départ pour bien débuter.

Liens contextuels :

Forum Alsacréations : CSS et Standards Web · Applications Web en ligne · Soucis pour inclure une page !?!
Rechercher dans le sujet :
Auteur
freaky
# 22 Feb 2008 - 22:14:39
Citer
6 Posts
 Hello !
C'est mon tout premier post lol

Je vous explique mon "petit" soucis.

J'ai une page index.htm



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />



<title>titre</title>



<!-- Inclus la feuille CSS -->

<link href="style.css" rel="stylesheet" type="text/css">



<!-- Inclusion de page dans certain div par l'Ajax -->

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



<!-- Inclusion de ma page de fonction javascript -->

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



</head>



<body onload="chargeFichier('info.htm');">

<!-- ===============================================================================================================

	MENU

================================================================================================================ -->

<div id="menu">

  <ul>

    <li onclick="chargeFichier('task.htm');">Tâches</li>

    <li onclick="chargeFichier('user.htm');">Utilisateurs</li>

    <li onclick="chargeFichier('account.htm');">Mon compte</li>

    <li onclick="chargeFichier('manage.htm');">Administration</li>

  </ul>

</div>

<!-- ===============================================================================================================

	CONTENU

================================================================================================================ -->

<div id="content"><!-- Contenu afficher par appel de page/fichier --></div>



</body>

</html>


dans laquelle j'utilise la fonction chargeFichier()



var remplirChamp = function (obj)

{

        document.getElementById('content').innerHTML = obj.responseText;

}



function chargeFichier(file) {

	// Création de l'objet

	var XHR = new XHRConnection();

		

	// Chargement de la page

	// Natures des paramètres			

	// 	+ string, fichier à charger

	// 	+ string, GET ou POST

	// 	+ ref, nom de la fonction de callBack

	XHR.sendAndLoad(file, "GET", remplirChamp);

	return true;

}


Le fichier chargé est task.htm



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">

<head>

	<title>jQuery plugin: Tablesorter 2.0 - Pager plugin</title>

	<link rel="stylesheet" href="css/jq.css" type="text/css" media="print, projection, screen" />

	<link rel="stylesheet" href="themes/blue/style.css" type="text/css" media="print, projection, screen" />

	<script type="text/javascript" src="jquery-latest.js"></script>

	<script type="text/javascript" src="jquery.tablesorter.js"></script>

	<script type="text/javascript" src="addons/pager/jquery.tablesorter.pager.js"></script>

	<script type="text/javascript" src="js/chili/chili-1.8b.js"></script>

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

	<script type="text/javascript">

	$(function() {

		$("table")

			.tablesorter({widthFixed: true, widgets: ['zebra']})

			.tablesorterPager({container: $("#pager")});

	});

	</script>

</head>

<body>

<div id="main">

<h1>Demo</h1>

<table cellspacing="1" class="tablesorter">

	<thead>

		<tr>

			<th>Name</th>

			<th>Major</th>

			<th>Sex</th>

			<th>English</th>

			<th>Japanese</th>

			<th>Calculus</th>

			<th>Geometry</th>



		</tr>

	</thead>

	<tfoot>

		<tr>

			<th>Name</th>

			<th>Major</th>

			<th>Sex</th>

			<th>English</th>

			<th>Japanese</th>

			<th>Calculus</th>

			<th>Geometry</th>



		</tr>

	</tfoot>

	<tbody>

		<tr>

			<td>Student01</td>

			<td>Languages</td>

			<td>male</td>



			<td>80</td>

			<td>70</td>

			<td>75</td>

			<td>80</td>

		</tr>

		<tr>

			<td>Student02</td>



			<td>Mathematics</td>

			<td>male</td>

			<td>90</td>

			<td>88</td>

			<td>100</td>

			<td>90</td>



		</tr>

		<tr>

.

.

.

.

.

.

.

.

etc...


J'ai inclus la page tel quel d'un script tous fait. Le truc c'est qu'il charge pas les fonctions javascript quand je clique sur le menu qui affiche cette page...
Je connais pas mal le PHP, et mon défi est de m'en passer un max, donc je connait pas encore bien la syntaxe DOM, l'AJAX et le javascript. J'apprends.

Vous auriez une idée ? Ca doit pas être une grosse erreur... ohwell

Merci !

Edit : J'ai oublié de préciser que les chemins aux fichier son correct. task.htm et index.htm sont dans le même dossier, donc le chemin ne change pas. task.htm fonctionne très bien si je le lance tout seul.
Modifié par freaky (22 Feb 2008 - 22:24)
^
dew
# 22 Feb 2008 - 22:23:18
Citer
Administrateur
674 Posts
 C'est certainement hors-sujet, mais je ne vois pas très bien l'intérêt du "défi".
PHP est conçu pour cela, Ajax beaucoup moins. Il vaut mieux utiliser les bons outils cligne

Attention aussi à ne pas inclure de page complète avec un nouveau header / tag body, dans la page principale.
^
freaky
# 22 Feb 2008 - 22:28:30
Citer
6 Posts
 Disons que j'en ai marre de bourrer mes pages de PHP. J'aimerais rendre mes page beaucoup plus dynamique. C'est plus un défis personnel biggrin

Ok pour la page complète, merci du conseil.
Mais je dois quand même mettre un header pour inclure mes fichier et un body non ?
Modifié par freaky (22 Feb 2008 - 22:28)
^
dew
# 23 Feb 2008 - 01:05:34
Citer
Administrateur
674 Posts
 D'accord pour le défi, mais beware, il y a quand même certaines contre-indications importantes (notamment en terme de référencement, ce qui n'est pas négligeable).

Dans les fichiers qui sont inclus, non, il ne faut jamais placer de tag ou header superflu, si celui-ci existe déjà dans la page principale qui englobe le reste.
^
freaky
# 23 Feb 2008 - 11:39:23
Citer
6 Posts
 Donc même si je mets pas de balise <head> l'inclusion des fichier de fonction devrait fonctionné ?
Mais n'empêche que j'ai toujours mon problème...
^
freaky
# 23 Feb 2008 - 17:39:12
Citer
6 Posts
 Bon ok maintenant ça fonctionne... sweatdrop

Par contre ça fonctionne à une seule condition qui commence à me saouler...
J'avais mis un alert dans la fonction pour contrôler si je rentrais bien dedans.
Maintenant quand j'enlève le alert ça ne fonctionne plus !!! eek 



function chargeFichier(file) {

	// Création de l'objet

	var XHR = new XHRConnection();		

	// Zone à remplir

	XHR.setRefreshArea('content');

	// Chargement de la page

	// Natures des paramètres			

	// 	+ string, fichier à charger

	// 	+ string, GET ou POST

	// 	+ ref, nom de la fonction de callBack

	XHR.sendAndLoad(file, "GET");

	

	alert("fonction");

	

	 $("table") 

    .tablesorter({widthFixed: true, widgets: ['zebra']}) 

    .tablesorterPager({container: $("#pager")}); 

	return true;

}


C'est quand même super bizarre non ?!?
^
Julien Royer
# 24 Feb 2008 - 13:24:18
Citer
Coin coin
Modérateur
3602 Posts
 Hello,
freaky a écrit :
C'est quand même super bizarre non ?!?

Pas vraiment, non. smile

Il ne faut pas oublier que l'on utilise en général que des appels asynchrones en AJAX. Cela signifie que tu n'as aucune garantie sur le moment auquel tu vas recevoir la réponse.

Or dans ton cas, tu supposes à la fin de ta fonction que le fichier a été chargé... Il se trouve que dans le cas où tu as utilisé alert ça fonctionne, puisque ça laisse un petit délai.
...
^
freaky
# 25 Feb 2008 - 10:29:20
Citer
6 Posts
 Aaah ok !
Mais ça veux dire qu'on ne peut pas inclure une page dans un div si celle-ci contient du javascript ?
^
koala64
# 25 Feb 2008 - 10:39:24
Citer
Modérateur
3884 Posts
 Salut,

Si bien sûr ! Tu peux remplacer tout le contenu d'une div, quoiqu'il y ait dedans. Qu'est-ce qui t'en empêcherait ? sweatdrop

PS : Comme te l'a précisé dew, ce n'est pas une page que tu importes mais uniquement les données nécessaires. Il ne faut pas s'attendre au même résultat qu'avec une frame mais plutôt à ce que tu obtiendrais avec une include. cligne

^
freaky
# 25 Feb 2008 - 14:37:01
Citer
6 Posts
 Ok mais alors comment je peux faire pour que la fonction
function chargeFichier(file) {

	// Création de l'objet

	var XHR = new XHRConnection();		

	// Zone à remplir

	XHR.setRefreshArea('content');



	XHR.sendAndLoad(file, "GET");

	

	 $("table") 

        .tablesorter({widthFixed: true, widgets: ['zebra']}) 

        .tablesorterPager({container: $("#pager")}); 

	return true;

}

S'applique à mon tableau.

J'ai donc :
index.htm avec mon div.
task.htm, avec mon tableau, qui est inclue dans le div par la fonction.
func.js avec la fonction montrée plus haut.

Parce que là je rame...

En fait c'est surtout cette partie (qui faisait partie d'une autre fonction à la base) qui ne s'éxecute pas... decu 


$("table") 

.tablesorter({widthFixed: true, widgets: ['zebra']}) 

.tablesorterPager({container: $("#pager")});


^
Prévenir un modérateur
Répondre au sujet
Aller à

référencesLes références web : openweb.eu.org - opquast.com - webmaster-hub.com - webrankinfo.com - salemioche.net - web-pour-tous.org - webonorme.org

Nos partenaires : Editions Eyrolles - Location vacances France - Location vacances Europe

Nikozen : Hébergement - Réalisation : Alsacreations.fr

Powered by Phedio v3.7.9 © dew
Contacter l'administrateur - 14.9 ms - Charte