<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.1.6/zepto.min.js"></script>
<script src="../lib/php_crud_api_transform.js"></script>
<script id="PostListTemplate" type="text/mustache">
<ul>
{{#pessoas}}
<li>
<span class="id">{{id}}</span>, <span class="clb_nome">{{clb_nome}}</span> , <span class="email">{{email}}</span>
<a href="javascript:void(0)" class="edit">editar</a>
<a href="javascript:void(0)" class="delete">deletar</a>
</li>
{{/pessoas}}
<li>
<form>
<input name="clb_nome"/>
<!-- Problematic if I add this input box -->
<input name="email"/>
</form>
</li>
</ul>
</script>
<script>
function PostList(element, template) {
var self = this;
var url = '../api.php/pessoas';
self.edit = function() {
// Edition
var li = $(this).parent('li');
var id = li.find('span.id').text();
var clb_nome = li.find('span.clb_nome').text();
clb_nome = prompt('Value',clb_nome);
var email = li.find('span.email').text();
email = prompt('Value',email);
if (clb_nome!==null) {
$.ajax({url:url+'/'+id, type: 'PUT', data: {clb_nome:clb_nome, email:email} , success:self.update});
}
};
self.delete = function() {
var li = $(this).parent('li');
var id = li.find('span.id').text();
if (confirm("Deletando #"+id+". Continua?")) {
$.ajax({url:url+'/'+id, type: 'DELETE', success:self.update});
}
};
//------------------------------------------------------------------------------------------------------------------------------------//
// ------------------------ This doesn't run if the 2nd input box is added ----------------------------------------
self.submit = function(e) {
e.preventDefault();
// Insert
console.log("Inclusao -- 01 --- ");
var clb_nome = $(this).find('input[name="clb_nome"]').val();
//-- If the 2nd input box is ommited the result of it is "undefined" and everything goes right
var email = $(this).find('input[name="email"]').val();
console.log(clb_nome);
console.log(email);
console.log("Inclusao -- 02 --- ");
$.post(url, {clb_nome:clb_nome, email:email}, self.update);
console.log("Inclusao -- 03 --- ");
};
self.render = function(data) {
// Apresenta os dados
element.html(Handlebars.compile(template.html())(php_crud_api_transform(data)));
};
self.update = function() {
$.get(url, self.render);
};
self.post = function() {
$.post(url, {user_id:1,category_id:1,clb_nome:""}, self.update);
};
element.on('submit','form',self.submit);
element.on('click','a.edit',self.edit)
element.on('click','a.delete',self.delete)
self.post();
};
$(function(){ new PostList($('#PostListDiv'),$('#PostListTemplate')); });
</script>
</head>
<body>
<div id="PostListDiv">Carregando...</div>
</body>
</html>
Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.
”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.
Our community of experts have been thoroughly vetted for their expertise and industry experience.
The Distinguished Expert awards are presented to the top veteran and rookie experts to earn the most points in the top 50 topics.