www.webdeveloper.com
Results 1 to 2 of 2

Thread: Dynamic linked combo boxes with dynamic table

  1. #1
    Join Date
    Apr 2014
    Posts
    1

    Dynamic linked combo boxes with dynamic table

    Hello i'm relatively new to Javascript, I've got a dynamic table which i can dynamically add and remove rows to which works fine.

    Then i've got two linked combo boxes which access values from MySQL tables which works fine.

    However i'm having trouble putting them together the combo boxes only work on the first row. I'm guessing i need to use an array but i can't seem to get it to work. Any help would be much appreciated.

    Code:
    <?php include("include/conn.inc.php"); ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>www.MyRotaCheck.com | Company Template</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="css/gannt.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="css/addshift.css" media="screen" />
    
    <script type='text/javascript' src='js/jquery-1.3.2.min.js'></script>
    
    
    
    <script type="text/javascript">  
        
        function addRow(tableID) {
    
        var table = document.getElementById(tableID);
    
        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);
    
        var colCount = table.rows[0].cells.length;
    
        for(var i=0; i<colCount; i++) {
    
            var newcell = row.insertCell(i);
    
            newcell.innerHTML = table.rows[0].cells[i].innerHTML;
            //alert(newcell.childNodes);
            switch(newcell.childNodes[0].type) {
                case "text":
                    newcell.childNodes[0].value = "";
                    break;
                case "text":
                    newcell.childNodes[0].value = "";
                    break;
                case "text":
                    newcell.childNodes[0].value = "";
                    break;
                case "text":
                    newcell.childNodes[0].value = "";
                    break;
                case "text":
                    newcell.childNodes[0].value = "";
                    break;
                case "checkbox":
                    newcell.childNodes[0].checked = false;
                    break;
                case "select-one":
                    newcell.childNodes[0].selectedIndex = 0;
                    break;
            }
        }
    }
    
    function deleteRow(tableID) {
        try {
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;
    
        for(var i=0; i<rowCount; i++) {
            var row = table.rows[i];
            var chkbox = row.cells[0].childNodes[0];
            if(null != chkbox && true == chkbox.checked) {
                if(rowCount <= 1) {
                    alert("Cant delete all rows");
                    break;
                }
                table.deleteRow(i);
                rowCount--;
                i--;
            }
    
        }
        }catch(e) {
            alert(e);
        }
    }
    </script>
    
    <!--linked combos-->
    <script type="text/javascript">
    $(document).ready(function()
    {
    $(".job").change(function()
    {
    var id=$(this).val();
    var dataString = 'id='+ id;
    
    $.ajax
    ({
    type: "POST",
    url: "data.php",
    data: dataString,
    cache: false,
    success: function(html)
    {
    $(".staff").html(html);
    } 
    });
    
    });
    
    });
    </script>
    </head>
    <body>
    
      <table id="titlebar" cellspacing="0px">
            <tr>
                <td style="width:20px;">✓</td>
                <td style="width:150px;">Job Role</td>
                <td style="width:150px;">Staff Member</td>
                <td style="width:150px;">Start Time</td>
                <td style="width:150px;">End Time</td>
            </tr>
        </table>
        <form action="add_shifts.php" method="POST">
      <table id="dataTable" width="auto" style="margin:-4px 0 0 0;" cellspacing="0px">
      
        <tr>
          <td style="width:20px;"><INPUT type="checkbox" name="chk" /></td>
          <td >   
    
    
    
    <select name="job" style="width:150px;" class="job">
    <option selected="selected">--Select Job Role--</option>
    <?php
    $sql=mysql_query("select tbl_job_id,tbl_job_title from tbl_job where tbl_job_company ='1'");
    while($row=mysql_fetch_array($sql))
    {
    $id=$row['tbl_job_id'];
    $data=$row['tbl_job_title'];
    echo '<option value="'.$id.'">'.$data.'</option>';
    } ?>
    </select> 
    
    </td>
    <td>
    
    <select name="staff" style="width:150px;" class="staff">
    <option selected="selected">--Vacant--</option>
    </select>
    
    </td>                     
    </tr>
    </table>
      
        <INPUT type="button" value="Add row" onclick="addRow('dataTable')" />
        <INPUT type="button" value="Delete row" onclick="deleteRow('dataTable')" />
        <INPUT type="submit" value="Send" name="submit"/>
        </form>

  2. #2
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    955
    So essentially the issue here is your jQuery sets the event (onchange) for your <select> box when the page loads. However since you are dynamically adding rows with new <select> boxes, the onchange event has not been set for them as they did not exist when jQuery set this event handler.

    Thus the solution is a bit simpler than you think. Each time a row is added you merely need to set the onchange event for the new <select> box so it will behave as the one on the first row does.

    I also feel I should make some notes on your row copy function though, at least in regard to the case/switch you are using. With the code you've provided, the row contains a checkbox input and two <select> boxes. For one, I'm not sure why the case/switch checks for a "text" type 5 times, as that is unnecessary. But more to the point, newcell.childNodes[0].type returns undefined for all cells except the checkbox input. Why? Because <select> boxes do not support the 'type' attribute and the other cells currently don't have anything in them (at least in your sample code here). For the record, if you just want to reset the values for any of these input types when creating a new row the entire case/switch statement isn't needed. They should always be defaulting to their initial values (ie. the value doesn't get copied).


    Anyway, you'll want to add something like what I have below to your code. I'd recommend adding it right after your case/switch statement (or anywhere in your for() loop after the newcell variable has been created and set).
    Code:
    for(var $j = 0; $j < newcell.childNodes.length; $j++) {
    	if(newcell.childNodes[$j].nodeName.toLowerCase() == "select") {
    		$(newcell.childNodes[$j]).change(function() {
    			var id=$(this).val();
    			var dataString = 'id='+ id;
    
    			$.ajax({
    				type: "POST",
    				url: "data.php",
    				data: dataString,
    				cache: false,
    				success: function(html) {
    					$(".staff").html(html);
    				} 
    			});
    		});
    	}
    }
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles