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

}

rfunduk · Accepted Answer · 2009-11-06 15:58:44Z

3

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

answered Nov 6, 2009 at 15:58

rfunduk

30.5k5 gold badges61 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

shin Over a year ago

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 Over a year ago

I don't follow your second question here. I just ported your code. Why do you need to refresh any page?

shin Over a year ago

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 Over a year ago

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 Over a year ago

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.

|

Soufiane Hassou · Accepted Answer · 2009-11-06 00:03:03Z

0

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.

answered Nov 6, 2009 at 0:03

Soufiane Hassou

17.8k2 gold badges42 silver badges76 bronze badges

Comments

Brother Erryn · Accepted Answer · 2009-11-06 16:45:08Z

0

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.

answered Nov 6, 2009 at 16:45

Brother Erryn

8411 gold badge5 silver badges9 bronze badges

Collectives™ on Stack Overflow

Changing from Prototype to jQuery

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related