Impossibilité d'afficher le contenu HTML d'une requête AJAX via Smarty

**nimizrule** · 07/12/2015, 16h45

Bonjour,
je suis face à un problème depuis quelques temps maintenant.

Je travaille sur un projet scolaire qui comprend le développement d'une appli web. Cette appli est basé sur le moteur de templates Smarty et intègre un pattern MVC pour organiser les sources. Quelques appels sont également fait en AJAX pour dynamiser certaines parties de template.

En exécutant ma requête AJAX depuis un bouton de l'application et en la débuggant avec Firebug sous Firefox, j'arrive à voir le contenu du template qui doit être chargé avec la requête mais celui ci ne s'affiche pas à la place de l'ancien pourquoi ?

Je met les sources à dispo.

Le template général: layout.tpl

Code html :

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
<!DOCTYPE html>
<html lang="fr">
	<head>
		<title>{block name=title}NAOBOX{/block}</title>
		<meta charset="utf-8">
		<link rel="stylesheet" href="{$settings.bootstrap}" >
		<link rel="stylesheet" type="text/css" href="{$settings.css}" media="screen">	
		<script type="text/javascript" src="{$settings.jquery}"></script>	
	</head>
	<body>	
		<section class="container">
			<section class="header-container">
				{include file="./header.tpl"}
			</section>
			<section class="page-container">
				{block name=content}{/block}
			</section>
		</section>
		<script type="text/javascript" src="{$settings.functions}"></script>		
	</body>
</html>

Le template chargé en début: controls.tpl

Code html :

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
{extends file="./layout.tpl"}
{block name=title}NAOBOX - contrôles{/block}
{block name=content}
	<section id="page-row1" class="row">
		<div id="content-blockTabControl" class="col-xs-12">			
			<div class="content-blockTab1">
				<a href="#action" alt="Contrôle par actions" class="controlRender">
					<div class="content-blockTab_e" id="controlFull">Contrôle par actions</div>
				</a>
			</div>
			<div  class="content-blockTab2">
				<a href="#pas" alt="Contrôle pas à pas" class="controlRender">
					<div class="content-blockTab_d" id="controlStep">Contrôle pas à pas</div>
				</a>
			</div>
			<hr />
			<section id="content-blockTabPage" class="controlTraitment">
				{include file="./controls-content.tpl"}
			</section>
		</div>
	</section>
{/block}

Le template chargé par la requête: controls-content.tpl

Code php :

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
{if $content == "full"}
	{foreach from=$controls item=control}
		<div id="content-blockControlActions" class="col-xs-12 col-sm-3">
			<div>
				<a href="{$control.link}" alt="{$control.desc}">
					<div>{$control.name}</div>
				</a>
			</div>
		</div>
	{/foreach}
{else}
	<div class="table-responsive">
		<table id="controls-step">
			<tr>
				<td>
					<a href="">
						<img src="{$settings.img}/steps/arrow-tl.png" alt="top left arrow"/>
					</a>
				</td>
				<td>
					<a href="">
						<img src="{$settings.img}/steps/arrow-t.png" alt="top arrow"/>
					</a>
				</td>
				<td>
					<a href="">
						<img src="{$settings.img}/steps/arrow-tr.png" alt="top right arrow"/>
					</a>
				</td>
			</tr>
			<tr>
				<td>
					<a href="">
						<img src="{$settings.img}/steps/arrow-l.png" alt="left arrow"/>
					</a>
				</td>
				<td></td>
				<td>
					<a href="">
						<img src="{$settings.img}/steps/arrow-r.png" alt="right arrow"/>
					</a>
				</td>
			</tr>
			<tr>
				<td>
					<a href="">
						<img src="{$settings.img}/steps/arrow-bl.png" alt="bottom left arrow"/>
					</a>
				</td>
				<td>
					<a href="">
						<img src="{$settings.img}/steps/arrow-b.png" alt="bottom arrow"/>
					</a>
				</td>
				<td>
					<a href="">
						<img src="{$settings.img}/steps/arrow-br.png" alt="bottom right arrow"/>
					</a>
				</td>
			</tr>
		</table>
	</div>
{/if}

La fonction javascript: functions.js

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
$(document).ready(function() {
 
	$(".controlRender").click(function() {
 
		var data = {
			"query": $(this).children("div").attr("id")
		};
 
		data = $(this).serialize() +"&"+ $.param(data);
 
		$.ajax("./views/templates/scripts/ajax.php", {
			type: "POST",
			data: data,
			dataType: "text",
			sucess: function(html) {
				$(".controlTraitment").html(html);
			},
			error: function(XMLHttpRequest, textStatus, errorThrows) {
				alert("Javascript error: "+ errorThrows);
			}
		});
		return false;
	});
});

La fonction php appelée dans la page ajax.php

Code php :

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
private function controlQuery($page) {
			try {
				switch($page) {
					case "controlFull":
						$content = "full";
						$controls = array();
							$controls[0]["link"] = "test";
							$controls[0]["desc"] = "test";
							$controls[0]["name"] = "Test";
							$controls[1]["link"] = "test1";
							$controls[1]["desc"] = "test1";
							$controls[1]["name"] = "Test1";
							$controls[2]["link"] = "test2";
							$controls[2]["desc"] = "test2";
							$controls[2]["name"] = "Test2";
							$controls[3]["link"] = "test3";
							$controls[3]["desc"] = "test3";
							$controls[3]["name"] = "Test3";
							$this->smarty->assign("controls", $controls); 
						break;
					case "controlStep";
						$content = "step";
						break;
					default:
						break;
				}
 
				$this->smarty->force_compile = 1;
				$this->smarty->assign("content", $content);
				$this->smarty->display("../controls-content.tpl");
 
			} catch (Exception $e) {
				throw new Exception($e->getMessage());
			}
		}

Je vous met également l'appel au template au premier chargement de la page dès fois que ça puisse aider ($this->tpl_name = controls)

Code php :

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

1
2
3
$this->smarty->assign("content", "full");
$this->smarty->assign("controls", $controls); 
$this->smarty->display(DIR_TEMPLATES."/".$this->tpl_name.".tpl");

Tout porte à croire que ce n'est pas une erreur de chemins car tout se charge et s'exécute correctement. Je pense à une erreur avec les assign ou autre mais j'en suis pas sûr ou ne sais pas trop comment faire.

Je tiens à préciser que je me suis basé sur ce tuto pour faire mes codes: http://www.ibm.com/developerworks/library/wa-aj-smarty/

Merci pour vos réponses.
Bonne journée...

**nimizrule** · 07/12/2015, 23h48

Je ne trouve pas beaucoup de tutos sur ça et encore moins de topic faisant état de problèmes: j'ose croire que faire de l'AJAX avec Smarty est possible car c'est la base selon moi.
Quelqu'un a une idée ?

**nimizrule** · 15/12/2015, 17h52

Une simple erreur dans la fonction javascript: sucess au lieu de success.
Bonjour les débogueurs!!!

Impossibilité d'afficher le contenu HTML d'une requête AJAX via Smarty

AJAX

Discussions similaires

Partager

Partager