Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    May 2009
    Posts
    164
    Thanks
    75
    Thanked 1 Time in 1 Post

    Add new table row on action

    Hi guys. Just wanted to start a new thread as I have most things working (besides one thing), but mainly I want to try and clean things up because I think I am over doing things. If you have seen my previous threads, you will know I have a table
    Code:
    <table class="table1">
      <tr>
        <td class="title">1:</td>
        <td><input type="text" placeholder="Giving" class="selector" name="giving2" autocomplete="off"/></td>
        <td><input type="text" placeholder="Getting" class="selector" name="getting2" autocomplete="off"/></td>
        <td><input type="text" name="popupdate2" id="popupdate2" class="popupdate" value="When" /></td>
      </tr>
    
      <tr>
        <td class="title">2:</td>
        <td><input type="text" placeholder="Giving" class="selector" name="giving2" autocomplete="off"/></td>
        <td><input type="text" placeholder="Getting" class="selector" name="getting2" autocomplete="off"/></td>
        <td><input type="text" name="popupdate2" id="popupdate2" class="popupdate" value="When" /></td>
      </tr>
    </table>
    I then have a couple of methods to add and remove rows to this table
    Code:
    var stdContent = "<td class='tabletitle'>xx:</td>\n" +
        "<td><input type='text' placeholder='Giving' class='giving_selector' name='giving1[]' autocomplete='off'/></td>\n" +
        "<td><input type='text' placeholder='Getting' class='giving_selector' name='getting1[]' autocomplete='off'/></td>\n" +
        "<td><input type='text' name='popupdate2[]' id='popupdatexx' class='popupdatepicker' value='when' /></td>\n";
    var newno = 5;
    
    function addTableRow() {
    	if(newno>20){
    		alert("Max row limit");
    		return;
    	}
        var newrow = document.createElement('tr');
        var theTable = document.getElementById('table1');
        var tbody = theTable.getElementsByTagName("tbody")[0];
    	
        tbody.appendChild(newrow);
        var newcontent = stdContent.replace('xx', newno);
        newrow.innerHTML = newcontent;
        newno++;
    	$("input.giving_selector").autocomplete({
    			source: 'http://www.example.com/form_ajax.php?function=giving_selector',
    			minLength: 2
    	});
    	$('.popupdatepicker').datepicker({
    			numberOfMonths: 2,
    			showButtonPanel: false,
    			dateFormat: 'dd/mm/yy',
    			minDate: 0,
    			maxDate: '+2Y'
    	});
    }
    Now I kind of cheated and added the giving_selector and datepicker into this function, but it seems to work (although I dont think it is the best way). Now somewhere else in my code, I have another datepicker thing, which is used for the fields in the original table.
    Code:
    $('.popupdatepicker').datepicker({
    	onSelect: function() {
    		addTableRow();
    	},
    
    	numberOfMonths: 2,
    	showButtonPanel: false,
    	dateFormat: 'dd/mm/yy',
    	minDate: 0,
    	maxDate: '+2Y'
    });
    I added an onSelect function to this, because my aim was to get it to add a new row automatically to the table whenever the last date is selected. So, initially there are 2 rows in the table, if the date in the second row is selected, the event should fire and add a new row. If two new rows are then added, the fourth calandar will be the only one which can now fire this event. The way I have it at the moment, it adds a new row on every date, because I have no idea how to do it only to the date in the last row.

    So really, I am just looking for advise on this, and generally on the code as a whole and what I can do to make it better. I come from a java background where everything is very OO, and to me, I feel my code at the moment is really messy, and I really want to tidy it up.

    Cheers

    Nick

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,728
    Thanks
    6
    Thanked 1,015 Times in 988 Posts
    Currently you are addressing all elements with the class “popupdatepicker”. One simple approach would be to assign a specific class to the newest (last) datepicker and remove that class upon selecting. And you would only address the element with the specific class to execute the addition.

    So, say you have this:
    Code:
    <input type="text" name="popupdate2" id="popupdate2" class="popupdatepicker last" value="When" />
    You would do:
    Code:
    $('.popupdatepicker.last').datepicker({
    	onSelect: function() {
    		addTableRow();
    		$(this).removeClass('last');
    	},
    
    	numberOfMonths: 2,
    	showButtonPanel: false,
    	dateFormat: 'dd/mm/yy',
    	minDate: 0,
    	maxDate: '+2Y'
    });
    I hope “this” works in this context. And of course, in the code for the to-be-added table row you need to add that class name to the input, too. So, now every new row includes the “last” class while you are removing it from the currently selected which results in the datepicker function to not apply for any row but the last one.

  • Users who have thanked VIPStephan for this post:

    nick2price (09-27-2012)

  • #3
    Regular Coder
    Join Date
    May 2009
    Posts
    164
    Thanks
    75
    Thanked 1 Time in 1 Post
    Kool. I can see where you are going with this, and it is definately something I can work on. I think it may help though if you could quickly advise me on something. I need all the added rows to have a unique id in order for the date to display. From the original post you can see I have
    Code:
    id='popupdatexx'
    And then underneath
    Code:
    var newcontent = stdContent.replace('xx', newno);
    Now if you look at the tabletitle, them values change successfully, I am know the replace works somewhat. However, the id's for the date does not change. When I check in firefox, they are all listed as popupdatexx. Is there any specific reason why it doesnt work on this?

    Cheers

    Nick


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •