Hi:
I was wondering if it is possible for an click() element for jquery to call another document.ready() element from within. Here is what I mean:
I have:
$('#addrow').click(function(){
$('.item-row:last').after('<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 $dd2;?><a class="delete" href="javascript:;" title="Remove row">D</a></div></td><td valign="top" align=center ><select id="service_subcat_1" 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><td valign="top" align=center><div id="invtbox_" name="invtbox_">---</div></td><td><textarea id="descbox_" name="descbox_" 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 Product Selection</textarea></td><td valign="top" align=center><input type="text" id="qtybox_" name="qtybox_" 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"></textarea></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" id="pricebox_" name="pricebox_" 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></td></tr>');
if ($('.delete').length > 0) { $('.delete').show(); }
bind();
});
the select box id (id="service_subcat_1") within the $(.item-row:last).after()) is dependent on the following js to load addition list items:
<!--addform script-->
<script type="text/javascript">
// ajax for multiple dropdown boxes
$(document).ready(function() {
var data_1 = <?php echo $arr1;?>;
var id_1;
function getData_1(pass_CatID){
var content_1 = '';
var content = '<option name="specify id="specify" style="background: url() right no-repeat; width: 20px">------SPECIFY-----</option>';
var product_desc_ = '';
var invt_ = '';
var qty_ = '';
var cost_ = '';
id_1 = pass_CatID;
$.each(data_1[id_1], function(key,value) {
if(invt_ == '')invt_ = value['invt_'];
if(product_desc_ == '')product_desc_ = value['product_desc_'];
if(cost_ == '')cost_ = value['cost_'];
content_1 += '<option value="' + key + '">' + value['subcat_label_1'] + '</option>';
});
$('#service_subcat_1').html(content_1);
$('#descbox_').html( product_desc_ );
$('#invtbox_').html(invt_);
$('#qtybox_').html( qty_);
$('#costbox_').html(cost_);
}
function getDesc_1(pass_ItemID){
var item_ID = pass_ItemID;
var invt_ = data_1[id_1][item_ID]['invt_'];
$('#invtbox_').html(invt_);
var product_desc_ = data_1[id_1][item_ID]['product_desc_'];
$('#descbox_').html( product_desc_ );
var qty_ = data_1[id_1][item_ID]['qty_'];
$('#qtybox_').html( qty_ );
var cost_ = data_1[id_1][item_ID]['cost_'];
$('#costbox_').html( cost_ );
}
$('#categories_1').change(function(){
id_1 = $('#categories_1').val();
getData_1(id_1);
});
$('#service_subcat_1').change(function(){
var item_ID = $('#service_subcat_1').val();
getDesc_1(item_ID);
});
});
</script>
With the current structure, I am unable to achieve the result. May I ask for some thoughts on this?
Mossa