I need some help with Jquery Ajax with CI

[eluser]Unknown[/eluser]
Alright So I'm creating this application to measure volume of merchandise that fit into all the different size freighters.

This is my first attempt at making a web application with codeigniter and for the most part has been a smooth process. I hit a little bump with jquery where i need the user to type an amount of product he wants in an order. But since the company works mostly with master cartons (meaning if we want 30 of productA and productA MC is 15 then we want to submit 2 boxes are needed).

I tried to solve this little form with Jquery/Ajax and codeigniter.

I need to enter the amount of products on the left field and show how many boxes that is on the right field with ajax. If the number inst an integer( or whole number) then show an error.

my view

Code:

<?php if(isset($records)) : foreach($records as $row) :
echo "<tr>";
echo "<td>".$row->upc."</td>";
  echo "<td>".$row->desc."</td>";
   echo "<td>".$row->model."</td>";
    echo "<td>".$row->product_MC."</td>";
    echo "<td>";
      $data = array(
              'name'        => "perProd",
              'id'          => "perProd",
              'size'        => '5'
            );

    echo form_input($data);
    $hidden = array('productID' => $row->id, 'orderID' => $id);
      echo form_open("start/addProduct/$id", '', $hidden);
    echo "</td>";
    echo "<td>";
    
    $data = array(
              'name'        => "amount",
              'id'          => "amount",
              'size'        => '5'
            );
    echo form_input($data);
    echo "</td>";
    echo "<td>";
  echo form_submit('submit', 'Add to Order');
echo form_close();    
echo "</td>";
echo "</tr>";
endforeach;
else : ?&gt;    
    <br/><br/><tr>No records were returned.</tr> <br/>
    &lt;?php endif; ?&gt;

this is the controller for the ajax call so far just to return the value back to the other field.

Code:

function perProduct(){
    $amount = $this->uri->segment(3);
    $success = true;
    //if the validation was a success
    if ((IS_AJAX && $success) || (!IS_AJAX && $success)) { echo $amount; }else{echo "error";}

    }

This is the jquery I'm working with right now.

Code:

$(document).ready(function() {
    $('#perProd').blur(function() {
        $.ajax({
            url: '../perProduct/' + $(this).val(),
            type: 'post',
            success: function(result) {
                $('#amount').val(result);
            }
        });
    });
});

Im a fairly new developer so I apologize if this seems like a simple problem :/

[eluser]danmontgomery[/eluser]
ID is a unique identifier, you shouldn't have multiple elements on the same page sharing an ID... Not sure if that's specifically causing your problem (you don't really say what the problem is), but it can cause problems.

Are you using firebug? You can use the console to see any ajax calls (as well as the response and any errors)

[eluser]Unknown[/eluser]
Well my main problem is when I type a value on the first left input field it work on the amount next to it.
But its not the case with the next Fields. I imagine I need to differentiate the input fields somehow.

I tried the approach of putting the jquery in my foreach so that it get the unique id of each line but that seems redundant. when i have 300 products having 300 jquery in each line doesn't seem right.

(edit) the green one works but nothing comes in for the other 4 fields

[eluser]cahva[/eluser]
As Noctrum pointed out, you can't use the same id many times.

Jquery is very flexible and you can do DOM traversing quite easily.
Heres a small example how you can do this.

From that example you should be able to get an idea how you can use Jquery in many ways.

As you can see, I used 1 hidden form instead one form per row. Why? Because thats actually not valid code to put form around tr tags. So its either one big form around the table and use different technique, or like I made in my example.

BTW, there might be better way to do the jquery stuff. I aint a javascript- / jquery-wizard by any means but usually I get the job done

There was something else on my mind, but I have to go to sleep now as its almost 4a.m and I have to be at work by 9 :-)

[eluser]pickupman[/eluser]
As stated you need to have different ID's otherwise jQuery will get confused which dom element your are fetching the value for. Remove or rename the id's differently. The add [] after the name for the input (ie. prodName[]). For the jQuery part, you can target the index of the input using:

Code:

$(document).ready(function() {
    $("input[name='prodName[]']").blur(function() {
       var index = $(this).index();
        $.ajax({
            url: '../perProduct/' + $(this).val(),
            type: 'post',
            success: function(result) {
                $("input[name='amount[]']").eq(index).val(result);
            }
        });
    });
});

Add the [] after a input name allows inputs of the same type throughout a form. When submitted it creates and array of values.