Changing from Prototype to jQuery

Question

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

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

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

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 );
 }
} );

• shin: Thanks. It works, except it will load the index page instead of the same page which is cart page. What do you suggest to change in order to reload the same page?
• rfunduk: I don't follow your second question here. I just ported your code. Why do you need to refresh any page?
• shin: Original code takes me the page where I was. But your code takes me to index page. I thought it might be related to your code. I have to see my php.
• shin: I am sorry. Update works. My problem is that I changed function jsRemoveProduct to the following and it takes me to index. function jsRemoveProduct(id){ var params = 'id='+id; $.ajax({ type: "POST", url: "127.0.0.1/codeigniter_shopping/index.php/welcome/…", data: params, success: function( r ) { $('#ajax_msg').html( r ); location.reload( true ); } }); }
• shin: I found the problem. Delete uses a link. HTML is like this. <a href='#' onclick='jsRemoveProduct(8)'>delete</a> And update uses INPUT. <input type='button' name='update' value='update' onclick='jsUpdateCart()'/> If I use input for delete it works. But I'd like to know how to do it with a link.

Answer 2

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 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.