Question

I have HTML table with 10 rows and which has a “Current Value” column and a “Price” column.

Q: The first row has 1000 dollars and 5 th row as 10000 dollars.

If a user has changed the price column to GBP, how can I make an ajax call through jQuery and update the current value.

What’s the best approach here?

Answer 1

So the steps you are going to need to take (assuming PHP for now)….

bind a handler to your currency selector. (assuming multiple currencies in a select for now). include a jQuery ajax call in this handler. Set a variable to equal the currency selected.

 window.onload=function(){
     $('#select_id').change(function(){
         var currency = $(this).val();
         $.ajax({
            type: "POST",
            dataType: "json",
            url: "/ajaxpage.php",
            data: {
               currency:currency
            }
            success: function(data){
               $.each($('#table tr ',function(index,value){
                   $(this).find('.price_col').html(data[index]);   
               });
            },
            failure: function(){
               alert('failed');
            }            
         });              
     });    
 }

So here we have an ajax call to ajaxpage.php with the post data, currency. Let’s imagine that we are going to be returned an json encoded string with the new currency values. In the success handler, we iterate through the table rows, and update the appropriate table cell with its respective value. This is probably slightly backwards, so make sure the datasets match up.

On the server side, all we have to do is return a json_encoded array that looks like

 array(

       [0] => '1234'
       [1] => '5555'
       // and so on
 )

Once you have your new prices calculated (let me know if you need to send all the old prices also, I just assume you already know since they got there in the first place, but the situation may not be exactly as you describe), all you have to do to complete the magic ajax is….

 echo json_encode($array);

I just saw that you are using Java…. you can use

 org.json.JSONObject

and

response.getWriter().print(jsonObject.toString());

for this last part, and change the filename in the ajax request as appropriate.

Edit: Based on your comment, I suggest giving each select a unique id and have all selects sharing a class. so that we don’t have to split the string in this example, let us say “1”, “2”, etc. And your rows having id row_1, row_2, etc.In this case, it will look something like…

window.onload=function(){
     $('#.selector').change(function(){
         var row_id = $(this).attr('id');
         $.ajax({
            type: "POST",
            dataType: "json",
            url: "/ajaxpage.php",
            data: {
               id:row_id
            }
            success: function(data){
                $('#row_'+data.id).find('.price_col').html(data.cval);
            },
            failure: function(){
               alert('failed');
            }            
         });              
     });    
 }

Your JSON object to be returned in this case should be a single object with id and cval attributes. If you are having problems, to debug,

  console.log(data);

in the first line of the success handler, and also check your dev tools in chrome/firefox under XHR requests. This will give you additional information about the request and the data you are returning.