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 1 of 1
  1. #1
    Regular Coder
    Join Date
    Nov 2010
    Location
    Washington DC
    Posts
    341
    Thanks
    22
    Thanked 1 Time in 1 Post

    Need help with this js/php configuration

    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 Code:
    <?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:



    PHP Code:
    <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:

    PHP Code:
    $(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--
    Last edited by mbarandao; 05-26-2012 at 08:46 PM.


 

Posting Permissions

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