hcx hcx - 25 days ago 7
jQuery Question

Applying google currency converter to all prices on a page

what I am trying to do is convert all prices on a page with jquery, ajax and google currency.

I found this, it's working fine.

$('#submit').click(function(){
//Get the values
var amount = $('#amount').val();
var from = $('#from').val();
var to = $('#to').val();
var params = "amount=" + amount + "&from=" + from + "&to=" + to ;

$.ajax({
type: "POST",
url: "currency-converter.php",
data: params ,
success: function(data){
$('#converted_value').html(amount + from +" is equal to : " +data);

}
});
}) ;


How can i apply this to a div class on a page? Lets say i have a priceEuro class;

<div class="product">
<div class="priceEuro"><?php the_field('price1'); ?></div>
</div>

<div class="product">
<div class="priceEuro"><?php the_field('price2'); ?></div>
</div>

<div class="product">
<div class="priceEuro"><?php the_field('price3'); ?></div>
</div>


Now i want to convert all different prices and add results to products like this,

$('.priceEuro').each(function () {

var amount = $(this).val();
var params = "amount=" + amount + "&from=EUR" + "&to=USD" ;

$.ajax({
type: "POST",
url: "currency-converter.php",
data: params ,
success: function(data){
$(this).append("<div class="priceUsd">'+ data +'</div>");

}
});


I know it's not right these way so what's the solution? Thanks.




Thanks to @UnTechie now i am getting results,

$(document).ready(function() {

$.each($('.priceEuro'), function () {

var amount = $(this).text();
var dataString = "amount=" + amount + "&from=EUR" + "&to=USD";

$.ajax({
type: "POST",
url: "chalo/themes/chalo/ajax_converter.php",
data: dataString,
success: function(data){
console.log(data);
$(this).append('<div class="priceUsd">'+ data +'</div>');
}
});
});

});


but i couldn't append these results after each div, is this wrong?

$(this).append('<div class="priceUsd">'+ data +'</div>');





ok, i found the problem.
this
is not automatically a reference to the right object in the ajax callback.

now it's working like this,

$(document).ready(function() {

$.each($('.priceEuro'), function () {
var $this = $(this);
var amount = $(this).text();
var dataString = "amount=" + amount + "&from=EUR" + "&to=USD";

$.ajax({
type: "POST",
url: "chalo/themes/chalo/ajax_converter.php",
data: dataString,
success: function(data){
console.log(data);
$this.append('<div class="priceUsd">'+ data +'</div>');
}
});
});

});

Answer Source

You need to use jquery.each(http://api.jquery.com/jQuery.each/)

This is how your code should look ..

$.each($('.priceEuro'), function () {
 //Your code goes here ... Use $(this) to access each element

});