plugin jTemplates : exécuter du code à l'intérieur d'un template

**andtwoturtles** · 25/05/2010, 15h09

Bonjour,

Dans mon code jquery, j'utilise des templates par simplicité de manipulation.

Pour situer le but du code est de travailler sur des fichiers avec la possibilité d'uploader de nouveaux fichier et autres.

Dans mon fichier JS principal, j'ai une fonction appelée au retour d'un appel ajax

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
// check and process the file list
function checkFileList(response) {
	if (response == 'e4') {
		$('#infos').html('Error 4, invalid call');
	}
	else if (response == '0') {
		$('#file_list').html('Error 2, file not found');
	}
	else {
		try {
			var oJson = JSON.parse(response);
 
			$('#file_list').processTemplate({'list' : oJson.list,
							'parent' : oJson.parent});
			$('#new_file').processTemplate({'perm' : oJson.write});	
 
		}
		catch(e) {
			$('#infos').html('Error 5, processing<br/>'+response+'<br/>'+e);
		}
	}
}

le premier processTemplate semble fonctionner très bien mais c'est plutôt pour la template associée au div new_file. Ce div contient un formulaire pour charger un fichier ou créer un dossier.

Le formulaire étant différent qu'il s'agisse d'un fichier ou un dossier, j'ai un sélecteur pour choisir lequel on affiche auquel j'essaye d'associer un évenement.

Voici le code de ma template

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
 
{#if $T.perm == 0}
	You do not have the permission to create a file or a folder here
{#else}
 
	<script type="text/javascript">
		$(document).ready(function() {
			try {
				// initial
				$('#type_file_form').show();
				$('#type_folder_form').hide();
 
				// when change the radio box, show the right form
				$('#type_file').change(function(){
					$('#type_file_form').show();
					$('#type_folder_form').hide();
				});
				$('#type_folder').change(function(){
					$('#type_folder_form').show();
					$('#type_file_form').hide();
				});
 
				// reset the two forms
				$('#file_form').reset();
				$('#folder_form').reset();
			} catch(e2) {
				alert(e2);
			}
		});
	</script>
 
	Type :
	 <input type="radio" name="type_f" value="type_file" id="type_file" checked="checked" /> <label for="type_file"><img src="img/file.png" /></label>
	 <input type="radio" name="type_f" value="type_folder" id="type_folder" /> <label for="type_folder"><img src="img/folder.png" /></label>
	<br /><br />
	<div id="type_file_form">
		The file will be created in the current folder.
		<br /><br />
		<form id="file_form" method="POST" action="proceed_files.php?action=newfile" enctype="multipart/form-data">
			File : <input name="new_file" type="file" /><br />
			Public : <input type="radio" name="public" value="yes" id="yes" /> <label for="yes">Yes</label>
			<input type="radio" name="public" value="no" id="no" checked="checked" /> <label for="no">No</label><br />
			Permission : <input type="radio" name="perm" value="r" id="r" /> <label for="r">Read</label>
			<input type="radio" name="perm" value="w" id="w" /> <label for="w">Write</label>
			<input type="radio" name="perm" value="p" id="p" checked="checked" /> <label for="p">Private</label><br />
			Description : <textarea id="desc_file" name="description">description</textarea><br />
			<input type="submit" value="send" /><br />
		</form>
	</div>
	<div id="type_folder_form">
		The folder will be created in the current folder.
		<br /><br />
		<form id="folder_form" method="POST" action="proceed_files.php?action=newfolder" enctype="multipart/form-data">
			<input id="folder_name" name="name" type="text" value="folder's name" /><br />
			Public : <input type="radio" name="public" value="yes" id="yes" /> <label for="yes">Yes</label>
			<input type="radio" name="public" value="no" id="no" checked="checked" /> <label for="no">No</label><br />
			Permission : <input type="radio" name="perm" value="r" id="r" /> <label for="r">Read</label>
			<input type="radio" name="perm" value="w" id="w" /> <label for="w">Write</label>
			<input type="radio" name="perm" value="p" id="p" checked="checked" /> <label for="p">Private</label><br />
			Description : <textarea id="desc_folder" name="description">description</textarea><br />
			<input type="submit" value="send" /><br />
		</form>
	</div>
{#/if}

Seulement le code JS à l'intérieur de la template ne s'exécute visiblement pas et il bloque même l'affichage de la template puisque j'ai une erreur dans mon div infos

Error 5, processing
{"parent":0,"list":[],"write":1}
SyntaxError: missing } after try block

et pas de formulaire

Le problème est visiblement dans le try/catch qui pourtant me semble correct.
Sans ce test la template s'affiche bien mais le code n'est pas exécuté (on voit toujours les deux formulaires, rien ne se passe au changement des boutons...) (c'était la raison pour laquelle j'avais rajouté le try/catch)

ça fait un bout de temps que je suis bloqué dessus, je vois pas trop

merci

**danielhagnoul** · 26/05/2010, 23h39

Bonsoir.

Je ne connais pas ce plug-in ni ses possibilités, mais un rapide coup d'oeil sur la documentation montre qu'il peut y avoir du code JavaScript et des fonctions.

Par contre

Code :

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

$(function(){ ...});

ou

Code :

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

$(document).ready(function(){ ...});

dans sa forme longue, est appelé et exécuté uniquement au chargement de la page web. Il ne peut sans doute pas être inclus dans un template.

**andtwoturtles** · 27/05/2010, 08h53

oui il me semblait aussi que la doc annonçait que l'on pouvait avoir du code à l’intérieur de la template

pour simplifier j'ai ce code :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
       "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="jquery-jtemplates.js"></script>
</head>
 
<body>
    <div id="infos"></div>
    <div id="my_template"></div>
 
    <script type="text/javascript">
        $(document).ready(function() {
 
            $('#my_template').setTemplateURL("my_template.html");
            try {
                $('#my_template').processTemplate({'var' : 1});
            }
            catch (e) {
                $('#infos').html('error : '+e);
            }
            $('#my_button').click(function(){
				alert('it works outside');
            });
 
        });
    </script>
</body>
</html>

et la template

Code :

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

1
2
3
4
5
6
7
8
9
content of the template<br/>
{#if $T.var == 1}
	<script type="text/javascript">
			alert('it works inside');
	</script>
	<input type='submit' id='my_button' value='click me' onclick='alert("onclick");'/>
{#else}
	not working
{#/if}

fonctionne parfaitement. Mais si je change le script en

Code :

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

1
2
3
4
5
	<script type="text/javascript">
		$('#my_button').click(function(){
			alert('it works inside');
		});
	</script>

ça a exactement le même effet que le précédent (popup "it works inside" déclanchée automatiquement).
Si je mets :

Code :

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

1
2
3
4
5
6
7
	<script type="text/javascript">
	$(document).ready(function() {
		$('#my_button').click(function(){
			alert('it works inside');
		});
	}
	</script>

là j'ai un message d'erreur dans la balise infos

error : SyntaxError: missing } after function body

Donc je suis en train de me demander si le problème n'est pas plutôt à l'exécution du jQuery dans la template...

**danielhagnoul** · 27/05/2010, 09h25

Bonjour.

Mais si je change le script en

Code :

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

1
2
3
4
5
	<script type="text/javascript">
		$('#my_button').click(function(){
			alert('it works inside');
		});
	</script>

ça a exactement le même effet que le précédent (popup "it works inside" déclanchée automatiquement).

Suggère d'essayer avec live :

Code :

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

1
2
3
4
5
<script type="text/javascript">
	$('#my_button')live("click", function(){
		alert('it works inside');
	});
</script>

**andtwoturtles** · 27/05/2010, 09h49

je ne connaissais pas la fonction .live
... mais ça a le même effet

j'ai essayé en ajoutant un effet en dom directement plutot qu'en jquery

Code :

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

1
2
3
4
5
6
7
8
	<script type="text/javascript">
		function msg() { 
			 alert('it works inside');
		} 
 
		var myb = document.getElementById("my_button"); 
		myb.onclick = msg;
	</script>

une fois encore, ça fonctionne si je le met à l'extérieur de la fonction mais pas à l'intérieur (où j'ai directement le message qui s'affiche sans qu'il tienne compte des fonctions)

edit : aaaah j'avance
si je met juste

Code :

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

1
2
3
	<script type="text/javascript">
		$('#my_button').live("click", msg);
	</script>

dans la template et la déclaration de la fonction dans la page principale, ça fonctionne !
on est encore loin de ce que je voulais à la base mais ça se rapproche

edit2 : bon j'ai trouvé une solution

ma template est simplement

Code :

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

1
2
3
4
5
6
7
8
content of the template<br/>
{#if $T.var == 1}
 
	<script type="text/javascript" src="fct_template.js"></script>
	<input type='submit' id='my_button' value='click me'/>
{#else}
	not working
{#/if}

et dans le fichier fct_template.js, je peux mettre tout le code jquery que je veux et il a l'air de bien fonctionner

ça règle mon problème même si peut être pas idéal de chaque fois passer par un fichier externe pour chaque tempate.

en tout cas faudra que je contacte le développeur pour faire changer cette page de doc pas clair

edit3 : cette fois ça semble être la bonne solution

Code :

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

1
2
3
4
5
6
7
	<script type="text/javascript">
	{#literal}
		$('#my_button')live("click", function(){
			alert('it works inside');
		});
	{#/literal} 
	</script>

C'est le système de template qui semble avoir des problèmes avec les {} et donc fou en l'air tout mon code...

plugin jTemplates : exécuter du code à l'intérieur d'un template

jQuery

Vue hybride

Discussions similaires

Partager

Partager