Ajax me retourne le code HTML de ma page + la réponse du controller...
Bonjour, Bonsoir
Voila je rencontre un petit problème avec mon code.
Je souhaite envoyer un formulaire via ajax, mais le probème est que le controller me renvoie bien la réponce que j'attend mais aussi tout le code HTML de ma page...
Voilà mon page HTML
Voilà le formulaire
<div class="row">
<div class="col-md-12">
<!-- BEGIN EXTRAS PORTLET-->
<div class="portlet box blue-hoki">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-gift"></i>Edité le mail de campagne.
</div>
<div class="tools">
<a href="javascript:;" class="collapse">
</a>
<a href="#portlet-config" data-toggle="modal" class="config">
</a>
<a href="javascript:;" class="reload">
</a>
<a href="javascript:;" class="remove">
</a>
</div>
</div>
<div class="portlet-body form">
<?= $this->Form->create('newmail', ['class' => 'form-horizontal form-bordered', 'id' => 'newmail']) ?>
<label>Sujet</label>
<?= $this->Form->input('sujet',['class' => "form-control", 'label' => '', 'id' => 'sujet']) ?>
<label>Edité votre mail ICI</label>
<div class="form-group">
<label class="control-label col-md-1">Default Editor</label>
<div class="col-md-11">
<div name="summernote" id="summernote_1">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<?= $this->Form->end() ?>
<?= $this->Form->button("<i class='fa fa-check'> Envoyer</i>", array('id' => 'okbutton', 'class' => 'btn blue', 'type' => ' ')); ?>Voici mon code PHP dans mon controller
if ($this->request->is('ajax')) {
//debug($this->request->data());
$responce = array(
'type' => 'success',
'message' => 'Terminé !'
);
echo json_encode($responce);
}{"type":"sccesse","message":"Termin\u00e9 !"}
<div class="row">
<div class="col-md-12">
<!-- BEGIN EXTRAS PORTLET-->
<div class="portlet box blue-hoki">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-gift"></i>Edité le mail de campagne.
</div>
<div class="tools">
<a href="javascript:;" class="collapse">
</a>
<a href="#portlet-config" data-toggle="modal" class="config">
</a>
<a href="javascript:;" class="reload">
</a>
<a href="javascript:;" class="remove">
</a>
</div>
</div>
<div class="portlet-body form">
<form method="post" accept-charset="utf-8" class="form-horizontal form-bordered" id="newmail" action="/admin/president/campagnepubs/createmail/6"><div style="display:none;"><input type="hidden" name="_method" value="POST"/></div> <label>Sujet</label>
<div class="input text"><label for="sujet"></label><input type="text" name="sujet" class="form-control" id="sujet" value="vbnvbnv"/></div> <label>Edité votre mail ICI</label>
<div class="form-group">
<label class="control-label col-md-1">Default Editor</label>
<div class="col-md-11">
<div name="summernote" id="summernote_1">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form> <button id="okbutton" class="btn blue" type=" "><i class='fa fa-check'> Envoyer</i></button>
<div class="modal fade draggable-modal ui-draggable" id="previsu" tabindex="-1" role="basic" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header ui-draggable-handle">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title">Prévisualisation de votre E-Mail</h4>
</div>
<h5 class="modal-title">Sujet:</h5>
<div id="sujet1" style="
background-color: whitesmoke;
"></div>
<h5 class="modal-title">Contenu de votre E-Mail</h5>
<div class="modal-body" id="previsu1" style="
background-color: whitesmoke;
"></div>
<div class="modal-footer">
<button type="button" class="btn default" data-dismiss="modal">Modifier</button>
<button type="button" class="btn blue" id="submit">Sauvegarder</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<script type="text/javascript">
jQuery(document).ready(function() {
ComponentsEditors.init();
$("#okbutton").click(function(){
var content = $('.note-editor .note-editable').html();
var sujet = $('#sujet').val();
document.getElementById("previsu1").innerHTML =content;
document.getElementById("sujet1").innerHTML =sujet;
$("#previsu").modal('show');
$("#submit").click(function(){
var form = $('#newmail');
var url = form.attr('action');
console.log(url);
var data = {
"content": content,
"sujet": sujet
};
$.ajax({
type: "POST",
url: url,
data: data,
// serializes the form's elements.
success : function (response){
var data = $.parseJSON(response);
console.log(data.text());
},
error : function(response) {
alert('false');
}
});
});
});
});
</script>Et voilà le retour...
Tout en haut en voie : {"type":"sccesse","message":"Termin\u00e9 !"}
Et c'est tout ce que je demande, mais il me renvoie tout le code html de la page, comment faire ?... :/
Merci par avance
6 réponses
Bonsoir,
Désoler de ne pas avoirs donner suite a vos messages , J’arrête CakePhp je passe sous symphonie 2 XD
Merci pour les votre aide bonne soirée à vous :)
Bonsoir,
Merci :)
Euh le return je le place dans le code PHP ou javascripts ? car je ne c'est pas qu'es qui génére cette erreur :/
Bonsoir.
Tu devrais préciser que tu ne veux pas utiliser de layout.
Par exemple :
if($this->request->is('ajax')) {
$this->layout = false; // ou null (je ne me rappelle plus)
// le reste de ton code
echo json_encode($responce);
return; // c'est comme ceci que Grafikart voulait te dire à mon avis
}Si tu as du rendu de ta page HTML, c'est probablement celui de ton layout.
Bonjour,
Je vous remercie, mais avec le $this->layout = null;
il me retourne :
Deprecated (16384): Controller::$layout is deprecated. Use $this->viewBuilder()->layout() instead. [CORE/src/Controller/Controller.php, line 375]
Ps: le traitement php du formulaire et la fonction ou est le formulaire c'est la même fonction, en vous envoie la fonction du controller et la vue:
Controller:
public function createmail($campagne){
if (empty($campagne)) {
$this->Flash->error(__('Cette campagne n\'existe pas.'));
$this->redirect(['controller' => 'Campagnepubs', 'action' => 'index','prefix' => 'president']);
}else{
$campagneselect = $this->Campagnepubs->find()->where(['id' => $campagne])->toArray();
if (empty($campagneselect)) {
$this->Flash->error(__('Cette campagne n\'existe pas.'));
$this->redirect(['controller' => 'Campagnepubs', 'action' => 'index','prefix' => 'president']);
}else{
if ($this->request->is('ajax')) {
//debug($this->request->data());
$this->layout = null;
$responce = array(
'type' => 'success',
'message' => 'Terminé !'
);
echo json_encode($this->request->data());
return;
# code...
}
}
}
}
La vue:
<div class="row">
<div class="col-md-12">
<!-- BEGIN EXTRAS PORTLET-->
<div class="portlet box blue-hoki">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-gift"></i>Edité le mail de campagne.
</div>
<div class="tools">
<a href="javascript:;" class="collapse">
</a>
<a href="#portlet-config" data-toggle="modal" class="config">
</a>
<a href="javascript:;" class="reload">
</a>
<a href="javascript:;" class="remove">
</a>
</div>
</div>
<div class="portlet-body form">
<?= $this->Form->create('newmail', ['class' => 'form-horizontal form-bordered', 'id' => 'newmail']) ?>
<label>Sujet</label>
<?= $this->Form->input('sujet',['class' => "form-control", 'label' => '', 'id' => 'sujet']) ?>
<label>Edité votre mail ICI</label>
<div class="form-group">
<label class="control-label col-md-1">Default Editor</label>
<div class="col-md-11">
<div name="summernote" id="summernote_1">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<?= $this->Form->end() ?>
<?= $this->Form->button("<i class='fa fa-check'> Envoyer</i>", array('id' => 'okbutton', 'class' => 'btn blue', 'type' => ' ')); ?>
<div class="modal fade draggable-modal ui-draggable" id="previsu" tabindex="-1" role="basic" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header ui-draggable-handle">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title">Prévisualisation de votre E-Mail</h4>
</div>
<h5 class="modal-title">Sujet:</h5>
<div id="sujet1" style="
background-color: whitesmoke;
"></div>
<h5 class="modal-title">Contenu de votre E-Mail</h5>
<div class="modal-body" id="previsu1" style="
background-color: whitesmoke;
"></div>
<div class="modal-footer">
<button type="button" class="btn default" data-dismiss="modal">Modifier</button>
<button type="button" class="btn blue" id="submit">Sauvegarder</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<div class="modal fade draggable-modal ui-draggable" id="erreur" tabindex="-1" role="basic" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header ui-draggable-handle">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title">Une erreur est survenu :(</h4>
</div>
<div class="note note-danger">
<h4 class="block">ERREUR</h4>
<p>
<div id="erreur1"></div>
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn default" data-dismiss="modal">Fermé</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<script type="text/javascript">
jQuery(document).ready(function() {
ComponentsEditors.init();
$("#okbutton").click(function(){
var content = $('.note-editor .note-editable').html();
var sujet = $('#sujet').val();
document.getElementById("previsu1").innerHTML =content;
document.getElementById("sujet1").innerHTML =sujet;
$("#previsu").modal('show');
});
$("#submit").click(function(e){
e.preventDefault(); // J'empêche le comportement par défaut du navigateur, c-à-d de soumettre le formulaire
var $this = $(this); // L'objet jQuery du formulaire
var content = $('.note-editor .note-editable').html();
var sujet = $('#sujet').val();
// Je récupère les valeurs
var form = $('#newmail');
var url = form.attr('action');
var data1 = {
"content": content,
"sujet": sujet
};
// Je vérifie une première fois pour ne pas lancer la requête HTTP
// si je sais que mon PHP renverra une erreur
// Envoi de la requête HTTP en mode asynchrone
if (sujet == '' || sujet == '') {
$("#previsu").modal('hide');
$("#erreur").modal('show');
document.getElementById("erreur1").innerHTML ='Erreur Merci de remplire tout les champs du formulaire !';
}else{
$.ajax({
type: "POST",
url: $this.attr('action'), // Le nom du fichier indiqué dans le formulaire
data: data1, // Je sérialise les données (j'envoie toutes les valeurs présentes dans le formulaire)
success: function(json) {
var retour = $.parseJSON(json);
console.log(retour['content']);
}, error : function(json) {
var retour = $.parseJSON(json);
console.log(retour);
}
});
};
});Sortie de la console:
Uncaught SyntaxError: Unexpected token < VM31715:1
Et quand je clique sur : VM31715:1
je tombe sur sa Oo
<pre class="cake-error"><a href="javascript:void(0);" onclick="document.getElementById('cakeErr56cfb6f8c65ac-trace').style.display = (document.getElementById('cakeErr56cfb6f8c65ac-trace').style.display == 'none' ? '' : 'none');"><b>Deprecated</b> (16384)</a>: Controller::$layout is deprecated. Use $this->viewBuilder()->layout() instead. [<b>CORE/src/Controller/Controller.php</b>, line <b>375</b>]<div id="cakeErr56cfb6f8c65ac-trace" class="cake-stack-trace" style="display: none;"><a href="javascript:void(0);" onclick="document.getElementById('cakeErr56cfb6f8c65ac-code').style.display = (document.getElementById('cakeErr56cfb6f8c65ac-code').style.display == 'none' ? '' : 'none')">Code</a> <a href="javascript:void(0);" onclick="document.getElementById('cakeErr56cfb6f8c65ac-context').style.display = (document.getElementById('cakeErr56cfb6f8c65ac-context').style.display == 'none' ? '' : 'none')">Context</a><pre id="cakeErr56cfb6f8c65ac-code" class="cake-code-dump" style="display: none;"><code><span style="color: #000000"><span style="color: #0000BB"> </span><span style="color: #007700">),</span></span></code>
<span class="code-highlight"><code><span style="color: #000000"><span style="color: #0000BB"> E_USER_DEPRECATED</span></span></code></span>
<code><span style="color: #000000"><span style="color: #0000BB"> </span><span style="color: #007700">);</span></span></code></pre><pre id="cakeErr56cfb6f8c65ac-context" class="cake-context" style="display: none;">$name = 'layout'
$value = null
$deprecated = [
'layout' => 'layout',
'view' => 'template',
'theme' => 'theme',
'autoLayout' => 'autoLayout',
'viewPath' => 'templatePath',
'layoutPath' => 'layoutPath'
]
$method = 'layout'</pre><pre class="stack-trace">Cake\Controller\Controller::__set() - CORE/src/Controller/Controller.php, line 375
App\Controller\President\CampagnepubsController::createmail() - APP/Controller/President/CampagnepubsController.php, line 320
Cake\Controller\Controller::invokeAction() - CORE/src/Controller/Controller.php, line 429
Cake\Routing\Dispatcher::_invoke() - CORE/src/Routing/Dispatcher.php, line 114
Cake\Routing\Dispatcher::dispatch() - CORE/src/Routing/Dispatcher.php, line 87
[main] - ROOT/webroot/index.php, line 37</pre></div></pre>{"content":"bhcfbhnchnchbvch","sujet":"gfcbhgbnf"}
<div class="row">
<div class="col-md-12">
<!-- BEGIN EXTRAS PORTLET-->
<div class="portlet box blue-hoki">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-gift"></i>Edité le mail de campagne.
</div>
<div class="tools">
<a href="javascript:;" class="collapse">
</a>
<a href="#portlet-config" data-toggle="modal" class="config">
</a>
<a href="javascript:;" class="reload">
</a>
<a href="javascript:;" class="remove">
</a>
</div>
</div>
<div class="portlet-body form">
<form method="post" accept-charset="utf-8" class="form-horizontal form-bordered" id="newmail" action="/admin/president/campagnepubs/createmail/6"><div style="display:none;"><input type="hidden" name="_method" value="POST"/></div> <label>Sujet</label>
<div class="input text"><label for="sujet"></label><input type="text" name="sujet" class="form-control" id="sujet" value="gfcbhgbnf"/></div> <label>Edité votre mail ICI</label>
<div class="form-group">
<label class="control-label col-md-1">Default Editor</label>
<div class="col-md-11">
<div name="summernote" id="summernote_1">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form> <button id="okbutton" class="btn blue" type=" "><i class='fa fa-check'> Envoyer</i></button>
<div class="modal fade draggable-modal ui-draggable" id="previsu" tabindex="-1" role="basic" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header ui-draggable-handle">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title">Prévisualisation de votre E-Mail</h4>
</div>
<h5 class="modal-title">Sujet:</h5>
<div id="sujet1" style="
background-color: whitesmoke;
"></div>
<h5 class="modal-title">Contenu de votre E-Mail</h5>
<div class="modal-body" id="previsu1" style="
background-color: whitesmoke;
"></div>
<div class="modal-footer">
<button type="button" class="btn default" data-dismiss="modal">Modifier</button>
<button type="button" class="btn blue" id="submit">Sauvegarder</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<div class="modal fade draggable-modal ui-draggable" id="erreur" tabindex="-1" role="basic" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header ui-draggable-handle">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title">Une erreur est survenu :(</h4>
</div>
<div class="note note-danger">
<h4 class="block">ERREUR</h4>
<p>
<div id="erreur1"></div>
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn default" data-dismiss="modal">Fermé</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<script type="text/javascript">
jQuery(document).ready(function() {
ComponentsEditors.init();
$("#okbutton").click(function(){
var content = $('.note-editor .note-editable').html();
var sujet = $('#sujet').val();
document.getElementById("previsu1").innerHTML =content;
document.getElementById("sujet1").innerHTML =sujet;
$("#previsu").modal('show');
});
$("#submit").click(function(e){
e.preventDefault(); // J'empêche le comportement par défaut du navigateur, c-à-d de soumettre le formulaire
var $this = $(this); // L'objet jQuery du formulaire
var content = $('.note-editor .note-editable').html();
var sujet = $('#sujet').val();
// Je récupère les valeurs
var form = $('#newmail');
var url = form.attr('action');
var data1 = {
"content": content,
"sujet": sujet
};
// Je vérifie une première fois pour ne pas lancer la requête HTTP
// si je sais que mon PHP renverra une erreur
// Envoi de la requête HTTP en mode asynchrone
if (sujet == '' || sujet == '') {
$("#previsu").modal('hide');
$("#erreur").modal('show');
document.getElementById("erreur1").innerHTML ='Erreur Merci de remplire tout les champs du formulaire !';
}else{
$.ajax({
type: "POST",
url: $this.attr('action'), // Le nom du fichier indiqué dans le formulaire
data: data1, // Je sérialise les données (j'envoie toutes les valeurs présentes dans le formulaire)
success: function(json) {
var retour = $.parseJSON(json);
console.log(retour['content']);
}, error : function(json) {
var retour = $.parseJSON(json);
console.log(retour);
}
});
};
});
});
</script>
Voilà :/
Merci par avance :)
Je ne savais pas que tu es sur la V3 et non sur la V2.
D'ailleurs, si tu renvoies des données en json, je te conseille de consulter ceci : Vues JSON et XML.