Changing from Prototype to jQuery

Question

I have the following Prototype code which I want to change to jQuery.

Could anyone help me please?

It seems to me that except Ajax.Updater all other code can be used in jquery. But I most probably wrong.

Thanks in advance.

function jsUpdateCart(){
  var parameter_string = '';
  allNodes = document.getElementsByClassName("process");
  for(i = 0; i < allNodes.length; i++) {
    var tempid = allNodes[i].id;
    var temp = new Array;
    temp = tempid.split("_");
    var real_id = temp[2];
    var real_value = allNodes[i].value;
    parameter_string += real_id +':'+real_value+',';
  }

  var params = 'ids='+parameter_string;
  var ajax = new Ajax.Updater(
    'ajax_msg','http://127.0.0.1/codeigniter_shopping/index.php/welcome/ajax_cart', {method:'post',parameters:params,onComplete:showMessage}
    );

}

function showMessage(req){
  $('ajax_msg').innerHTML = req.responseText;
  location.reload(true);
}


function jsRemoveProduct(id){
  var params = 'id='+id;
  var ajax = new Ajax.Updater(
    'ajax_msg','http://127.0.0.1/codeigniter_shopping/index.php/welcome/ajax_cart_remove', {method:'post',parameters:params,onComplete:showMessage}
    );

}

Answer 1

I might be wrong but it seems to me that except Ajax.Updater and $('ajax_msg') all your code is pure javascript. You'll have to use jquery's ajax and for your selector just use $('.ajax_msg') if it's a class or $("#ajax_msg") if id.

Answer 2

A quick look through the jQuery documentation on the ajax method would make it easy to convert your Ajax.Updater calls into the jQuery equivalent:

$.ajax( {
  type: 'post',
  url: "<your_long_url>/ajax_cart",
  data: params,
  success: function( r ) {
    $('#ajax_msg').html( r );
    location.reload( true );
  }
} );

Answer 3

Untested:

function jsUpdateCart(){
    var parameter_string = '';

    $('.process').each(function(){
     var tempid = this.id, temp = tempid.split('_'), real_id = temp[2], real_value = this.value;
     parameter_string += real_id + ':'+real_value+',';
    });

    var params = 'ids='+parameter_string;
    $('#ajax_msg').load('http://127.0.0.1/codeigniter_shopping/index.php/welcome/ajax_cart',data,
     function(){location.reload(true);});
}

It sounds like you could use a starter course on jQuery. If it's new to you, it's worth reading up on it.