saravanataee Posted April 18, 2013 Share Posted April 18, 2013 Dear members, I m running with the following problem for more than a week but i m not able to sort out. The scenario is that, in one of my php form i m having two dropdown and a text box related to each other. i.e when i select a product from dropdown1, the values of dropdown2 will be sorted based on the value of dropdown1 and similarly based on the value of dropdown2 , the value of textbox will be shown. This i accomplished with the help of ajax and jquery. And also this one working for me very well(shown in the image 1&2 of attachements). But the issue now is, in my product selection, my product list went very long so i had to bring an auto-suggestion. i brought the jquery selection with auto-complete model which has been shown in the same attachment(image3&4). the issue now is, when i select the product from my first dropdown, the second dropdown value is not loading, with firebug i checked, the values are properly retrieved for second dropdwn based on first drpdown but its not shwn up in the value list of second dropdwn. I don know what exactly the problem is. I m thinking it might be the clash of jquery versions that i m using. So, can some sort me out the problem with my form. I have included the form code here. <link rel="stylesheet" href="<?php echo HOME_URL; ?>chosen/chosen.css" /> <style type="text/css"> td { width:800px; } </style> <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> <script type="text/javascript" charset="utf-8"> $(function(){ $("select#product_id").change(function(){ var get_package_url = '<?php echo HOME_URL; ?>select.php'; $.getJSON(get_package_url,{product_id: $(this).val(), ajax: 'true'}, function(j){ var options = ''; options += '<option value="0"> -- Select -- </option>'; for (var i = 0; i < j.length; i++) { options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>'; } $("select#package_id").html(options); }) }) $("select#package_id").change(function(){ var get_package_url = '<?php echo HOME_URL; ?>select.php'; $.getJSON(get_package_url,{package_id: $(this).val(), ajax: 'true'}, function(j){ for (var i = 0; i < j.length; i++) { var value = j[i].optionDisplay; } $("#package_qty").val(value); }) }) }) </script> <script> $(function() { $( "#datepicker" ).datepicker({ altFormat: "dd-mm-yyyy" }); }); </script> <form action="<?php echo base_url(); ?>purchase_order/add" method="post"> <table border="1"> <tr> <td> <b>Product </b> <select name="product_id" style="width:250px;" data-placeholder="Choose a Supplier..." id="product_id" class="chzn-select"> <option value="0"> -- Select Product -- </option> <?php foreach($get_all_product as $value) { ?> <option value="<?php echo $value['product_id']; ?>"><?php echo $value['product_name']; ?></option> <?php }?> </select> </td> <td> <b>Order Qty </b> <input type="text" name="quantity" value="" style="width:75px;" /></td> <td> <b>Package</b> <select name="package_id" id="package_id"> </select> </td> <td> <b> Qty / Packing</b> <input type="text" name="package_qty" id="package_qty" value="" readonly="readonly" style="width:75px;" /></td> <td colspan="2"> <input type="submit" name="submit" value="Add to Cart" /> </td> </tr> </table> <script src="<?php echo HOME_URL; ?>chosen/chosen.jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(".chzn-select").chosen(); $(".chzn-select-deselect").chosen({allow_single_deselect:true}); </script> </form><br/><br/> <?php if($this->cart->contents()) { ?> <h2>Ordered Cart</h2> <br/> <table border="1"> <tr> <td> <b> Product </b> </td> <td> <b> Order Qty</b> </td> <td> <b>Qty/ Packing</b></td> <td> <b> MRP</b> </td> <td align="right"> <b>Amount </b></td> <td align="right"> <b>Action </b></td> </tr> <?php $grand_total = 0; foreach ($this->cart->contents() as $items) { ?> <tr> <td> <?php echo $items['name']; ?></td> <td> <?php echo $items['qty']; ?></td> <td> <?php echo $items['package_qty']; ?></td> <td> <?php echo $items['price'];//money_format('%!i',$items['price']); ?></td> <td align="right"> <?php echo $items['amount'];//money_format('%!i', $items['amount']); $grand_total = $items['amount']+$grand_total; $discount= $grand_total * 40/100; $gross_amount = $grand_total-$discount; ?></td> <td align="right"> Remove </td> </tr> <?php } ?> <tr> <td colspan="5" align="right"><b>Grand Total</b></td> <td align="right"><b><?php echo $grand_total;//money_format('%!i', $grand_total); ?></b></td> </table> <form method="post" action="<?php echo base_url()."purchase_order/create"; ?>"> <BR/> <BR/> Addtional Details : <textarea rows="5" cols="80" name="info"></textarea> <BR/> Date : <input type="text" name="date" value="<?php echo date('d-m-Y'); ?>" /><br/><br/><br/> <h2> Approximate value of Order</h2><br/> <b>Gross Amount:<b><?php echo $grand_total;?><br/> <b>Less Discount @ 40%:<b><?php echo $discount;?><br/> <b>Net Amount:<b><?php echo $gross_amount;?><br/> <input type="submit" name="submit" value="Create PO" /> </form> <?php } ?> Quote Link to comment Share on other sites More sharing options...
lemmin Posted April 18, 2013 Share Posted April 18, 2013 My guess is that the code you put in for auto-suggest is actually using a different element than the original #product_id. jQuery makes it impossible to find out where the error happens so you just have to start error-tracing. Stick an alert on the first line of your #product_id.change() function and see if it fires. If it does, keep moving it down. If not, I think your auto-suggest code needs to be looked at again. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.