[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

jquery - creating dynamic tables...

Posted on 2011-10-08
4
Medium Priority
?
235 Views
Last Modified: 2012-05-12
The following code works, in so much that it creates the table and appends the rows.  

However, I've attached a click event to the dynamically created button that resides in <tfoot> and it doesn't work.  It doesn't seem to call the createNewIssue function and it doesn't generate any Firebug errors.  I altered it to just throw up a simple alert, but that doesn't work either.

I'm pretty new to jquery, so if there's a better way to do this, then great, but hoping someone will at least be able to help me understand why my tfoot button isn't working...

First...
    $(document).ready(function() {
      //add-section works
      $('#add-section').click(function() {
    	createNewSection();
      });
    
      //this does not work		
      $('input[id^=add-issue-]').click(function() {
    	alert($(this).attr('id')); //put this in and it fails
    
            //this is what I really want it to do:
            var issueid = $(this).attr('id');
            createNewIssue(issueid);
      });
    
    });

Open in new window


This is the createNewSection function, which works:
    function createNewSection() {
    	var sectioncount = $('input.section-title').length;
    	var issuecount = $('input.issue-title').length;
    	var newsection = $('input#add-section-textfield').val();
    
    	//Add section entry to table
    	var sinput = document.createElement("input");
    	sinput.setAttribute("type", "text");
    	sinput.setAttribute("name", "section["+sectioncount+"][title]");
    	sinput.setAttribute("id", "section-"+sectioncount+"-title");
    	sinput.setAttribute("value", newsection);
    
    	//Issue title input
    	//Add section entry to table
    	var iinput = document.createElement("input");
    	iinput.setAttribute("type", "text");
    	iinput.setAttribute("name", "add_issue_"+sectioncount);
    	iinput.setAttribute("id", "add-issue-"+sectioncount);
    	iinput.setAttribute("value", "");
    	
    	//Button to add issue entry to table
    	var issuebutton = document.createElement("input");
    	issuebutton.setAttribute("type", "button");
    	issuebutton.setAttribute("name", "add_issue_"+sectioncount);
    	issuebutton.setAttribute("id", "add-issue-"+sectioncount);
    	issuebutton.setAttribute("value", "Add Issue");
    			
    	var sTable = $('<table>').attr('id', 'section-'+sectioncount).appendTo('#sections');
    	var sTbody = $('<tbody>').appendTo(sTable);
    	var sTrow = $('<tr>').appendTo(sTbody);
    	var sTcell = $('<td>').attr('colspan', 2).html(sinput).appendTo(sTrow);
    	var sTfoot = $('<tfoot>').appendTo(sTable);
    	var sTfootRow = $('<tr>').appendTo(sTfoot);
    	var sTfootCell = $('<td>').html(iinput).appendTo(sTfootRow);
    	var sTfootCell2 = $('<td>').html(issuebutton).appendTo(sTfootRow);
    }

Open in new window

Eventually, I'm trying to get the createNewIssue function to add a row (containing a nested table) to <table id="section-...>, but for now, I'm just trying to get it to throw an alert with the id of the parent table...
    function createNewIssue(issueid) {
    	var sTable = $(id).parent().parent().attr('id');
    	alert(sTable);
    }

Open in new window

0
Comment
Question by:n00b0101
  • 2
4 Comments
 
LVL 83

Accepted Solution

by:
leakim971 earned 2000 total points
ID: 36937659
replace :       $('input[id^=add-issue-]').click(function() {
by :       $('input[id^=add-issue-]').live("click",function() {

more info : http://api.jquery.com/live/

you should use distinct id for text and button, currently the id are the same
id must be unique in a document : http://www.w3.org/TR/html401/struct/global.html#h-7.5.2
This attribute assigns a name to an element. This name must be unique in a document.

test page : http://jsfiddle.net/yFUyS/
0
 
LVL 15

Expert Comment

by:Eyal
ID: 36937734
or you could change a little bit the code

$(document).ready(function() {
      //add-section works
      $('#add-section').click(function() {
          createNewSection();
     
   
      //this does not work            
      $('input[id^=add-issue-]').click(function() {
          alert($(this).attr('id')); //put this in and it fails
   
            //this is what I really want it to do:
            var issueid = $(this).attr('id');
            createNewIssue(issueid);
      });
     });
    });
0
 

Author Comment

by:n00b0101
ID: 36937834
Thanks for this, but when I use live, it throws up the alert box as soon as the markup is appended instead of waiting for a click event... Is there something I can do to prevent that from happening?
0
 
LVL 83

Expert Comment

by:leakim971
ID: 36938506
>Thanks for this, but when I use live, it throws up the alert box as soon as the markup is appended instead of waiting for a click event... Is there something I can do to prevent that from happening?

you've a typo error somewhere
check again the test page : test page : http://jsfiddle.net/yFUyS/
there's no error when appening the markup

don't forget :
<<
you should use distinct id for text and button, currently the id are the same
id must be unique in a document : http://www.w3.org/TR/html401/struct/global.html#h-7.5.2
This attribute assigns a name to an element. This name must be unique in a document.
>>


0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

867 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question