...

View Full Version : Need help with this js/php configuration



mbarandao
05-25-2012, 02:21 AM
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:



<?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</textarea></td>
<td valign='top' align=center><input type='text' name='qtys' class="qty" size='3' maxlength='3' value='0' class='combo3' rel='code_id' title='' style='color:#003399; text-align:left; font-size:1.1em; border-left: none; border-right: none; border-bottom: none'></td>

<td valign=top><textarea id='costbox' name='costbox' class='costbox'rows='1' cols='5' style='color:#003399; text-align:justify; font-size:1.0em; border-left: none; border-right: none; border-bottom: none' onKeyPress="return(currencyFormat(this,',','.',event))"></textarea></td>
<!--td valign='top' width='17%'><input type='text' id='costbox' name='cost' class="cost" size='6' maxlength='6' class='combo3' rel='code_id' title='' style='color:#003399; text-align:left; font-size:1.1em; border-left: none; border-right: none; border-bottom: none'></td-->
<input type="hidden" name="dimension2_id" value="0">
<td valign='top' align=center style='border-left: 0px solid #cccccc;' width='14%' align='left'> <span class="price" style='color:#003399; text-align:left; font-size:1.4em; border-left: none; border-right: none; border-bottom: none, border-top: 2px gray'>$0</span></td><!--input class="price" id='amount' name='price' class="price" size='7' disabled='true' value='0.00' style='color:#003399; text-align:left; font-size:1.1em; border-left: none; border-right: none; border-bottom: none'--></td>
<!--td valign='top' style='border-left: 0px solid #cccccc;' width='10%' align='left'> <input id='amount' name='discount' size='8' style='color: #71C671' value='0.00' onChange='updatesum()'></td-->

<!--/td-->
</tr>

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 adds the cell, but at the moment, I'm only able to add static content(hard-coded data). 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--



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum