Having trouble with my CakePHP3 and Ajax code in the add.ctp action. I want to load another div after submitting the form, but for some reason, the script isn't working as expected. The jQuery on the page seems fine, but the console logs inside the script are not showing up. Any help would be appreciated as I'm still new to this.
<?php
echo $this->Form->create($article, ['id' => 'ajaxform']);
echo $this->Form->input('title', array('class'=>'form-control'));
echo $this->Form->input('body', ['rows' => '3','class'=>'form-control']);
echo '<p></p>';
echo $this->Form->button(__('Salvar artigo'), array('class'=>'btn btn-success', 'id' => 'butao'));
echo $this->Form->end();
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
console.log("test");
$(document).ready(function(){
$('#butao').click(function(e){
console.log("teste2");
$("#ajaxform").submit();
e.preventDefault;
$(".content-wrapper").load("main #main");
});
$("#ajaxform").on('submit',function(e)
{
console.log("teste");
var postData = $(this).serializeArray();
var formURL = $(this).attr("action");
$.ajax(
{
url : formURL,
type: "POST",
data : postData,
success:function(data, textStatus, jqXHR)
{
$('#main').html(data);
//data: return data from server
},
error: function(jqXHR, textStatus, errorThrown)
{
//if fails
}
});
e.preventDefault(); //STOP default action
e.unbind(); //unbind. to stop multiple form submit.
});
$("#ajaxform").submit(); //Submit the FORM
});
</script>
ArticlesController:
public function add()
{
$article = $this->Articles->newEntity();
if ($this->request->is('post')) {
$article = $this->Articles->patchEntity($article, $this->request->getData());
// Added this line
$article->user_id = $this->Auth->user('id');
// You could also do the following
//$newData = ['user_id' => $this->Auth->user('id')];
//$article = $this->Articles->patchEntity($article, $newData);
if ($this->Articles->save($article)) {
$this->Flash->success(__('Your article has been saved.'));
return $this->redirect(['action' => 'main']);
}
$this->Flash->error(__('Unable to add your article.'));
}
$this->set('article', $article);
}
--EDIT-- My Main page code which goes to add
<?php foreach ($articles as $article): ?>
<tr>
<td><?= $article->id ?></td>
<td>
<?= $this->Html->link($article->title, ['action' => 'view',
$article->id]) ?>
</td>
<td>
<?= $article->created->format(DATE_RFC850) ?>
</td>
<td>
<?= $this->Form->postLink(
'Apagar',
['action' => 'delete', $article->id],
['confirm' => 'Têm a certeza?','class'=>'btn-danger btn-sm'])
?>
<?= $this->Html->link('Editar', ['action' => 'edit', $article->id],array('class'=>'btn-warning btn-sm')) ?>
<?= $this->Html->link('Copiar', ['action' => 'copy', $article->id],array('class'=>'btn-warning btn-sm')) ?>
</td>
</tr>
<?php endforeach; ?>
</table>
</div>
<button id="add" class="btn btn-primary btn-xs">
<h6>Adicionar Artigo</h6>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$('#add').click(function(){
$("#main").load("add #addctp");
});
});
</script>
</button>