Hello:
Not sure if this the right forum for this question --my apology if I'm posting in error:
However, I need to achieve the following implementation. I have complete php and ajax content file to outputs a multi-dropdown boxes with description to each items in the boxes. The code is as follows: (code constructed with the great help of one of Daniweb's "super" moderator Diafol --thanks again!)
<?php
//db connection
$r = mysql_query("SELECT sc.cat_id, sc.category_label, ss.cat_id, ss.item_id, ss.subcat_label, ss.invt, ss.product_desc, ss.invt, ss.qty, ss.cost FROM service_cat AS sc INNER JOIN service_subcat AS ss ON sc.cat_id = ss.cat_id ORDER BY sc.category_label, ss.subcat_label");
//$result = mysql_query($r);
if(mysql_num_rows($r)){
$dd1 = "\n<select id=\"categories\">\n\t<option value=\"0\">--select One--</option>";
$catname = '';
while($d = mysql_fetch_array($r)){
if($catname != $d['category_label'])$dd1.= "\n\t<option value=\"{$d['cat_id']}\">{$d['category_label']}</option>";
$array[$d['cat_id']][$d['item_id']] = array('subcat_label'=>$d['subcat_label'], 'invt' =>$d['invt'], 'product_desc' =>$d['product_desc'], 'qty'=>$d['qty'], 'cost'=>$d['cost']);
$catname = $d['category_label'];
}
$dd1 .= "\n</select>\n";
}
$arr = json_encode($array);
?>
<!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" xml:lang="en" lang="en">
<title></title>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var data = <?php echo $arr;?>;
var id;
function getData(passCatID){
var content = '';
var product_desc = '';
var invt = '';
var qty = '';
var cost = '';
id = passCatID;
$.each(data[id], function(key,value) {
if(invt == '')invt = value['invt'];
if(product_desc == '')product_desc = value['product_desc'];
if(cost == '')cost = value['cost'];
content += '<option value="' + key + '">' + value['subcat_label'] + '</option>';
});
$('#service_subcat').html(content);
$('#descbox').html('<p>' + product_desc + '</p>');
$('#invtbox').html('<p>' + invt + '</p>');
$('#qtybox').html('<p>' + qty + '</p>');
$('#costbox').html('<p>' + cost + '</p>');
}
function getDesc(passItemID){
var itemID = passItemID;
var invt = data[id][itemID]['invt'];
$('#invtbox').html('<p>' + invt + '</p>');
var product_desc = data[id][itemID]['product_desc'];
$('#descbox').html('<p>' + product_desc + '</p>');
var cost = data[id][itemID]['cost'];
$('#costbox').html('<p>' + cost + '</p>');
}
$('#categories').change(function(){
id = $('#categories').val();
getData(id);
});
$('#service_subcat').change(function(){
var itemID = $('#service_subcat').val();
getDesc(itemID);
});
});
</script>
</head>
<body>
<form name="services">
<table border=1px style="visibility:visible"><tr>
<td>Services/Product</td><td>Sub Category</td><td>Availability</td><td>Description</td><td>Quantity</td><td>Cost</td></tr>
<tr>
<td><?php echo $dd1;?></td>
<td><select id="service_subcat"><option>Select Category</option></select></td>
<td><div id="invtbox"></div></td>
<td><div id="descbox" style="border-top: 1px solid red"></div></td>
<td><input type=text id="qtybox" style="border-top: 1px solid red" size=4></td>
<td><div id="costbox" style="border-top: 1px solid red" ></div></td>
</tr></table>
</form>
</body>
</html>
Now, I have interagted the output into form and the totality of the above file is within a table cell like this:
<tr class="item-row">
<td valign='top' align=center style='border-left: 0px solid #cccccc;' width='100%' class="item-name"><div class="delete-wpr">
<?php echo $dd1;?> <!-- main service list-->
<a class="delete" href="javascript:;" title="Remove row">X</a></div></td><!-- end of item selection-->
<td valign='top' align=center ><select id="service_subcat" style='color:#003399; text-align:justify; font-size:1.0em; border-left: none; border-right: none; border-bottom: none'><option>Select Category</option></select></td> <!-- secondary service list-->
<td valign='top' align=center><div id="invtbox">---</div></td>
<td><textarea id='descbox' name='mytextarea' rows='8' cols='40' class='expand80-1000' style='color:#003399; text-align:justify; font-size:1.0em; border-left: none; border-right: none; border-bottom: none'>Make A Service or Production Selection
Here is my challenge: I want to be able to offer an option to add an addition cell with the same content as above. This would be for the purpose of adding additional products within the form. I have constructed an ajax function which add the a cell, but at the moment, I'm only able to add static content. I need to add dynamic content as noted above.
My ajax function to add is:
$(document).ready(function() { $('input').click(function(){ $(this).select(); }); $('#addrow').click(function(){ $('.item-row:last').after('//CONTENT GOES HERE'); if ($('.delete').length > 0) { $('.delete').show(); }
bind(); });
Sorry for the lenghty post, but I do trust I'm able to explain correctly.
I would appreciate some thoughts on this.
Mossa--