[SOLVED]Jquery puzzler - Form input is not recognized - El Forum - 04-23-2012
[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>
<!--250g-->
<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>
<input type="hidden" name="productId" id="productId" value="<?php echo $id; ?>" />
<input type="hidden" name="weight" id="selectedWeight" />
<div class="weightBody"></div><!-- end weightBody-->
</div><!-- end weightPanel-->
<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: "<?php echo base_url();?>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">
<form class="grindform">
<?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>';
?>
<input type="hidden" name="weight" id="selectedWeight" value="<?php echo $weight; ?>" />
<input type="text" name="productId" id="productId" value="<?php echo $productId; ?>" />
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="title">Qty</td>
<td class="title">Grind</td>
</tr>
<tr>
<td>
<?php
echo form_input($espresso);
?></td>
<td>Espresso</td>
</tr>
<tr>
<td><?php echo form_input($filter); ?></td>
<td>Filter</td>
</tr>
<tr>
<td><?php echo form_input($plunger); ?></td>
<td>Plunger</td>
</tr>
<tr>
<td><?php echo form_input($turkish); ?></td>
<td>Turkish</td>
</tr>
<tr>
<td><?php echo form_input($beans); ?></td>
<td>No Grind - Beans</td>
</tr>
</table>
<p><?php echo form_submit(array('name'=>'addtocart', 'class'=>'submit'), 'Add to Cart'); ?></p>
</form>
</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: "<?php echo base_url();?>order/orderonline/addCartItem",
data: {productId: productId, weight: weight, espresso: espresso, ajax: '1'},
success: function(data){
if(data == 'true')
{
$.get("<?php echo base_url(); ?>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?
[SOLVED]Jquery puzzler - Form input is not recognized - El Forum - 04-25-2012
[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.
|