Topic: Translate my code from Prototype to Jquery...

I everybody,

I'm working on a SaaS application and I need to use Jquery instead of Prototype due to some extra plugins integration. My code that was wotking a charm with Prototype is not running anymore with Jquery and I'm not used to write in this framework...

Is there someone to help me in "translating" this one:

Thanks a lot for your help.



var rates = new Array();
<% for tva_rate in @tva_rates -%>
  rates.push(new Array(<%= tva_rate.id %>, '<%=h tva_rate.taux %>', '<%=h tva_rate.compte_id %>' ));
<% end -%>

function tvaSelected() {
  tva_id = $('journal_tva_id').getValue();
  show = 1;
  if (tva_id > 0){
    rates.each(function(rate) {
        if (rate[0] == tva_id) {
            $('journal_taux').setValue(rate[1]);
            $('journal_compte_tva').setValue(rate[2]);
            show = 2;
        }
    });
}


  if (show == 1) {
    $('tva_taux_field').hide();
  } else {
    $('tva_taux_field').show();
  }
}

document.observe('dom:loaded', function() {
  tvaSelected();
  $('journal_tva_id').observe('change', tvaSelected);
});

Re: Translate my code from Prototype to Jquery...

First you just have to put a pound sign (#) in front of id selectors.

Then  replace getValue with val()
The next step depends on what the elements who's ids are journal_taux  and journal_compte_tva actually are.

Say they are div's,  and you want to replace the contents of the divs,  you'd use html()

function tvaSelected() {
  tva_id = $('#journal_tva_id').val();
  show = 1;
  if (tva_id > 0){
    rates.each(function(rate) {
        if (rate[0] == tva_id) {
            $('#journal_taux').html(rate[1]);
            $('#journal_compte_tva').html(rate[2]);
            show = 2;
        }
    });
}
Joe got a job, on the day shift, at the Utility Muffin Research Kitchen, arrogantly twisting the sterile canvas snout of a fully charged icing anointment utensil.

Re: Translate my code from Prototype to Jquery...

Hi Brad and thanks for your help,

To make it short I have another table (model) named "tva" and when the user choose a tva_id (with a collection_select in the form) the application needs to automatically get the "taux" and "tva_compte" from this table and feed the corresponding fields of the formular (journal_taux that is tva.rate.taux and journal_compte_tva that is tva_rate.compte_id).

I've just tried to use your bit of code and nothing happen in the form.

Is this part correct?

document.observe('dom:loaded', function() {
  tvaSelected();
  $('journal_tva_id').observe('change', tvaSelected);
});

Re: Translate my code from Prototype to Jquery...

Nope, in jquery it would be

$(document).ready(function()
{
  tvdSelected();
  $('#journal_tva_id').bind('change',tvaSelected);
});

Instead of observe, you'd use bind

Joe got a job, on the day shift, at the Utility Muffin Research Kitchen, arrogantly twisting the sterile canvas snout of a fully charged icing anointment utensil.

Re: Translate my code from Prototype to Jquery...

Thanks for your reply Brad, I've managed to make it 95% work with following code:

var rates = new Array();

<% for tva_rate in @tva_rates -%>

  rates.push(new Array(<%= tva_rate.id %>, '<%=h tva_rate.taux %>', '<%=h tva_rate.compte_id %>' ));

<% end -%>

function tvaSelected() {


  tva_id = $('#journal_tva_id').val(); // use id selector and val()

  show = 1;
  if (tva_id > 0){
    jQuery.each(rates, function(idx,rate) {
        if (rate[0] == tva_id) {
            $('#journal_taux').val(rate[1]); // use id selector and val()
            $('#journal_compte_tva').val(rate[2]); // use id selector and val()
            show = 2;
        }
    });
}

  if (show == 1) {
    $('#tva_taux_field').hide(); // use id selector
  } else {
    $('#tva_taux_field').show(); // use id selector
  }
}

$(function() { // use short-hand for document.ready() instead of onload event observer
  tvaSelected();
  $('#journal_tva_id').change(tvaSelected); //use id and set up change handler
});


But still a problem with the hide/show part... Any idea?

Re: Translate my code from Prototype to Jquery...

hide/show looks correct???

is tva_taux_field perhaps a class ?

the class selector looks like:

$('.tva_taux_field').hide();

Joe got a job, on the day shift, at the Utility Muffin Research Kitchen, arrogantly twisting the sterile canvas snout of a fully charged icing anointment utensil.

Re: Translate my code from Prototype to Jquery...

I seem to remember early when I started with JQuery I had some issues with hide/show,  I think the issue was that there had to be an initial

style="display:none"

on the element if you wanted to have it hidden initially,  and then show it with jquery .show()

But again,  that was a while ago, I'm not positive!

Joe got a job, on the day shift, at the Utility Muffin Research Kitchen, arrogantly twisting the sterile canvas snout of a fully charged icing anointment utensil.