Impossibilité d'afficher le contenu HTML d'une requête AJAX via Smarty
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:
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:
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:
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:
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:
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:
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...
