We help IT Professionals succeed at work.
Get Started

Could you point what is preventing this code to correctly fire a javascript function when a 2nd input box is added ?

Eduardo Fuerte
on
178 Views
Last Modified: 2018-01-16
Hi Experts

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>

Open in new window


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!
Comment
Watch Question
Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2020
Commented:
This problem has been solved!
Unlock 1 Answer and 20 Comments.
See Answer
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE