Updating a Table with JQuery

Question

I am using jQuery to create a table of prices and dates. After some trials and tribulations this is now working well. To further improve it, I want to offer site visitors the possibility of displaying the prices in other currencies. So I need to update the table with most of the data the same, changing only the currency.

The table is initially loaded with this code

function Dates(getresult){
         $.ajax ({
            type: 'post',
            url: '/includes/calendar_price_currency.php',
            data: $("#StartDateCal").serialize(),
            success: function(result) {
             $("#pricePickerResult").html(result);
            }
        });
    }

// Auto load ajax
Dates('getresult');

This takes hidden inputs in the StartDateCal div (including the name of the currency) and runs it through the calendar_price_currency.php file. The result is displayed in the pricePickerResult div.

Just below that div I have added buttons to change the currency. At the moment I have this code to update the table

// Euro currency Link load ajax
$('a#euro').click(function () {
         $.ajax ({
            type: 'post',
            url: '/includes/calendar_price_currency.php',
            data: $("#StartDateCal").serialize(),
            data: {'currency': 'EUR'},
            success: function(result) {
             $("#pricePickerResult").html(result);
            }
        });
    return false;
});

but it doesn't work! Clicking the link reloads the table, but with no content. I presume I am doing something wrong with the "data" lines, but I don't know what. I've tried removing the second line and then nothing visibly happens but I assume the table is reloading with the same data, so there is nothing to see.

Effectively I need most of the data to remain the same and just the currency to change. I had hoped that my second data line would just overwrite the currency element, but it looks like it overwrites everything. Is there a way of mixing "serialize" with another way of loading data?

EDIT

I found a bit of extra info here, and then changed my script to this:

$('a#euro').click(function () {
    var data = $('#StartDateCal').serializeArray();
    data.push({name: 'currency', value: 'EUR'});
    $.ajax ({
            type: 'post',
            url: '/includes/calendar_price_currency.php',
            data: data,
            success: function(result) {
            $("#pricePickerResult").html(result);
            }
        });
    return false;


   });

score 0 · Answer 1 · edited Feb 20 '15 at 19:19

0

You have two data values that you're sending

data: $("#StartDateCal").serialize(),
data: {'currency': 'EUR'},

Remove one.

edited Feb 20 '15 at 19:19

Uyghur Lives Matter

18,820
42
108
144

answered Feb 20 '15 at 18:46

Vishal Wadhawan

1,085
1
9
11

FunkyMonk91 · Answer 2 · 2015-02-20T19:36:43.947

0

If you want to send multiple values to your PHP page you can do

data: {
    'startDateCal': $('#StartDateCal').serialize(),
    'currency': 'EUR'
},

edited Feb 20 '15 at 19:36

answered Feb 20 '15 at 18:50

FunkyMonk91

1,469
1
17
30

This looked as if it made sense. Dreamweaver was happy with it. So I was disappointed to find that it doesn't work. I'm sure it's close though and I will persevere with it. Going back to the last para of my original post, the "serialize" line posts numerous variables including "currency". So then I need the "currency" line to overwrite "currency". – TrapezeArtist Feb 20 '15 at 22:30
Getting closer, but still not quite there. By adding a few temporary "echo" lines, I have been able to check what data gets passed to calendar_price_currency.php. What I have found is that clicking the link to change currency passes the new value of currency but not the other variables which are contained in #StartDateCal. So it seems that only the second part of the data line is working. Odd! – TrapezeArtist Feb 21 '15 at 18:05
You don't really need to override the startDateCal currency. I imagine you are doing some work on the PHP side with the data. Instead of refering to the startDateCal['currency'], just refer to the new one. ie) `$myCurrencyVar = $_POST['currency'];` – FunkyMonk91 Feb 23 '15 at 21:21

Updating a Table with JQuery

2 Answers2