Jump to content

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


saravanataee

Recommended Posts

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

post-135603-0-67642000-1366283245_thumb.png

post-135603-0-92253100-1366283257_thumb.png

post-135603-0-40031300-1366283267_thumb.png

post-135603-0-18082700-1366283278_thumb.png

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.