troubleshooting Question
Could you point what is preventing this code to correctly fire a javascript function when a 2nd input box is added ?
Eduardo Fuerte
asked on
asked on
Hi Experts
Could you point what is preventing this code to correctly fire a javascript function when a 2nd input box is added ?
Runs OK when the 2nd input box is ommmited
![img001]()
The function insn't fired when the 2nd input box exists
![img002]()
Thanks in advance!
Could you point what is preventing this code to correctly fire a javascript function when a 2nd input box is added ?
<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>
Runs OK when the 2nd input box is ommmited
The function insn't fired when the 2nd input box exists
Thanks in advance!
Learn from the best
Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.
Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 20 Comments.
Try for 7 days”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.