• 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
[SOLVED]Jquery puzzler - Form input is not recognized

#1
[eluser]Cgull[/eluser]
Hi,

I have a very strange issue here, I don't think it's a codeigniter problem, but hope someone can help me.

It is going to be a bit hard for me to explain but going to do my best.

I have a site for ordering coffee online.

I have a view called: orderpanel_view with 4 buttons on it, representing the four coffee blends we are selling.

Each button calls the same ajax query, which loads the view: selectQty_view into a div with class: weightBody.

On the selectQty_view, the user should put a quantity next to the type of grind he wants to buy, for example:

filter
espresso
plunger

I set a validation rule for the espresso quantity field, to check if it is numeric.

The problem is, if I call the selectQty_view from the first button (Espresso Blend), I get the error, but if I call it from the other blend buttons, I get no error.

I put an alert on the form.submit function on the selectQty_view, to display the value of the field I am validating.

If I call the form from the first button, I get the field's value, if I call it from the second button, I get a blank message, and of course no validation error, since the field had no value in it.

I tried to attach the files but I get an error, so here is the code:
orderpanel_view:
Code:
<div id="orderPanel">
<p>Select the weight you wish to order.</p>
&lt;!--250g--&gt;
<div class="weightPanel">
<ul>
  <li><a href="#" class="weight" id="g">250g</a>
    </li>
    <li><a href="#" class="weight" id="k">1kg</a>
    </li>
  </ul>
  &lt;input type="hidden" name="productId" id="productId" value="&lt;?php echo $id; ?&gt;" /&gt;
  &lt;input type="hidden" name="weight" id="selectedWeight" /&gt;
  
  <div class="weightBody"></div>&lt;!-- end weightBody--&gt;

</div>&lt;!-- end weightPanel--&gt;
<div class="clear"></div>
</div>
<div class="clear"></div>

[removed]
$('.weight').click(function() {
var productId = $('#productId').val();            
var id = $(this).attr('id');
if(id == 'g')
{
  $('#selectedWeight').val('0.25');
  $('#k').hide();
}
else
{
  $('#selectedWeight').val('1');
  $('#g').hide();
}

var weight = $('#selectedWeight').val();
$.ajax({
   type: "POST",
   url: "&lt;?php echo base_url();?&gt;order/orderonline/selectQty",
   data: {productId: productId, weight: weight },
   success: function(data){
    /*$(".weightBody").html(data);
   $(".weightBody").slideDown();
   */
   $('.weightBody').html(data);
   $('.weightBody').slideDown();
   }
});
return false;
});
[removed]

selectQty_view:
Code:
<div class="dets">
&lt;form class="grindform"&gt;
&lt;?php
$espresso = array('name'=>'espresso', 'size'=>'1', 'maxlength'=>'3', 'id'=>'espresso' . $productId);
$filter = array('name'=>'filter', 'size'=>'1', 'maxlength'=>'3', 'value'=>'');
$plunger = array('name'=>'plunger', 'size'=>'1', 'maxlength'=>'3', 'value'=>'');
$turkish = array('name'=>'turkish', 'size'=>'1', 'maxlength'=>'3', 'value'=>'');
$beans = array('name'=>'beans', 'size'=>'1', 'maxlength'=>'3', 'value'=>set_value('beans'));
   echo '<div class="error">' . validation_errors() . '</div>';
  ?&gt;
      &lt;input type="hidden" name="weight" id="selectedWeight" value="&lt;?php echo $weight; ?&gt;" /&gt;
      &lt;input type="text" name="productId" id="productId" value="&lt;?php echo $productId; ?&gt;" /&gt;
    <table cellpadding="0" cellspacing="0" border="0">
    <tr>
          <td class="title">Qty</td>
     <td class="title">Grind</td>
    </tr>
    <tr>
     <td>
     &lt;?php
           echo form_input($espresso);
      
     ?&gt;</td>
     <td>Espresso</td>
    </tr>
    <tr>
     <td>&lt;?php echo form_input($filter); ?&gt;</td>
     <td>Filter</td>
    </tr>
    <tr>
     <td>&lt;?php echo form_input($plunger); ?&gt;</td>
     <td>Plunger</td>
    </tr>
    <tr>
     <td>&lt;?php echo form_input($turkish); ?&gt;</td>
     <td>Turkish</td>
    </tr>
    <tr>
     <td>&lt;?php echo form_input($beans); ?&gt;</td>
     <td>No Grind - Beans</td>
    </tr>
   </table>
      <p>&lt;?php echo form_submit(array('name'=>'addtocart', 'class'=>'submit'), 'Add to Cart'); ?&gt;</p>
&lt;/form&gt;
</div>
[removed]
$(".grindform").submit(function() {
var productId = $('#productId').val();

//var selected = $(this);
var weight = $('#selectedWeight').val();
var espresso = $('#espresso'+productId).val();
alert(espresso);
$.ajax({
   type: "POST",
   url: "&lt;?php echo base_url();?&gt;order/orderonline/addCartItem",
   data: {productId: productId, weight: weight, espresso: espresso, ajax: '1'},
   success: function(data){
     if(data == 'true')
    {
       $.get("&lt;?php echo base_url(); ?&gt;order/orderonline/showCart", function(cart)
     {
       $("#cartContent").html(cart);
     });
     $('#k').show();
     $('#g').show();
     $('.weightBody').slideUp();
      }
    else if(data != 'error')
    {
     $('.dets').html(data);
    }
    else
    {
       alert("Product does not exist");
      }
   }
});
return false;
});//End grindform submit
[removed]

Can someone please try and help?

#2
[eluser]Cgull[/eluser]
The solution:

In the view with the 4 buttons, I had this code:

Code:
foreach($products as $p)
   {
    $id = $p['id'];
    $name = $p['name'];
    $img = $p['img'];
    $view = $p['view'];
    
    echo '
       <li>
     <div class="productHead">
      <div>
      <img src="' . base_url() . 'assets/images/products/' . $img . '" /><br />
      </div>
      <div>
         <a href="#" class="btn icon order" id="' . $id . '">span>Order</span></a>
      </div>
      <div>'; if($name != 'Decaf') echo '<a href="' . base_url() . 'main/blend" id="' . $view . '" class="info">Info</a>';
      echo '</div>
      <div class="clear"></div>
     </div>
        <div class="body">/div>
        </li>';
   }

I moved this line: "<div class="body">/div>" out of the foreach and everything works fine now.


Digg   Delicious   Reddit   Facebook   Twitter   StumbleUpon  


  Theme © 2014 iAndrew  
Powered By MyBB, © 2002-2020 MyBB Group.