Ajax and jquery clash or jquery version clash in my form!

[saravanataee]

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 } ?>
 
 

[lemmin]

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.