jQuery update does not work with IE7/8

Question

With the help of members from this post, I converted from prototype to jQuery.

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;

   $.ajax({
   type: "POST",
   url: "http://127.0.0.1/codeigniter_shopping/index.php/welcome/ajax_cart",
   data: params,
   success: function( r ) {
    $('#ajax_msg').html( r );
    location.reload( true );
  }
 });

}



function jsRemoveProduct(id){
  var params = 'id='+id;
  $.ajax({
   type: "POST",
   url: "http://127.0.0.1/codeigniter_shopping/index.php/welcome/ajax_cart_remove",
   data: params,
   success: function( r ) {
    $('#ajax_msg').html( r );
    location.reload( true );
  }
 });
}

ajax_cart_remove works in both Firefox and IE, but update works with Firefox, but it doesn't with IE 7/8.

Could anyone give me some suggestions please.

You can see the original prototype code here.

ajax_cart and ajax_cart_remove in controllers are followings.

function ajax_cart(){
    $this->MOrders->updateCartAjax($this->input->post('ids'));  
  }

  function ajax_cart_remove(){
    $this->MOrders->removeLineItem($this->input->post('id'));
  }

And models for MOders are following.

function removeLineItem($id){
    $id = id_clean($id);
    $totalprice = 0;
    $cart = $_SESSION['cart'];
    if (isset($cart[$id])){
     unset($cart[$id]);
     foreach ($cart as $id => $product){
      $totalprice += $product['price'] * $product['count'];
     }  
     $_SESSION['totalprice'] = $this->format_currency($totalprice);
     $_SESSION['cart'] = $cart;

     echo "Product removed.";
    }else{
     echo "Product not in cart!";
    }
}

function updateCartAjax($idlist){
    $cart = $_SESSION['cart'];
    $records = explode(',',$idlist);
    $updated = 0;
    $totalprice = $_SESSION['totalprice'];

    if (count($records)){
     foreach ($records as $record){
      if (strlen($record)){
       $fields = explode(":",$record);
       $id = id_clean($fields[0]);
       $ct = $fields[1];

       if ($ct > 0 && $ct != $cart[$id]['count']){
        $cart[$id]['count'] = $ct;
        $updated++;
       }elseif ($ct == 0){
        unset($cart[$id]);
        $updated++;
       }
      } 
     }

     if ($updated){
      $totalprice=0;
      foreach ($cart as $id => $product){
       $totalprice += $product['price'] * $product['count'];
      }  

      $_SESSION['totalprice'] = $this->format_currency($totalprice);
      $_SESSION['cart'] = $cart;

      switch ($updated){
       case 0:
       $string = "No records";
       break;

       case 1:
       $string = "$updated record";
       break;

       default:
       $string = "$updated records";
       break;
      }
      echo "$string updated";

     }else{
      echo "No changes detected";

     }
    }else{
     echo "Nothing to update";

    }
}

The following is the html output of form

<form action="http://127.0.0.1/codeigniter_shopping_copy2/index.php/welcome/checkout" method="post"><table border='1' cellspacing='0' cellpadding='5'>
<tr valign='top'>
<td><input type="text" name="li_id[10]" value="1" id="li_id_10" class="process" size="5"  /></td>
<td id='li_name_10'>Dress 1</td>
<td id='li_price_10'>33.95</td>
<td id='li_total_10'>33.95</td>
<td><input type='button' name='delete' value='delete' onclick='jsRemoveProduct(10)'></td>
</tr>
<tr valign='top'>

<td><input type="text" name="li_id[6]" value="2" id="li_id_6" class="process" size="5"  /></td>
<td id='li_name_6'>Shoes 1</td>
<td id='li_price_6'>23.95</td>
<td id='li_total_6'>47.90</td>
<td><input type='button' name='delete' value='delete' onclick='jsRemoveProduct(6)'></td>
</tr>
<tr valign='top'>
<td colspan='3'>&nbsp;</td>
<td colspan='2'>81.85 
<input type="hidden" name="name" value="total" />
<input type="hidden" name="id" value="total" />
<input type="hidden" name="value" value="81.85" />
</td>
</tr>

<tr valign='top'>
<td colspan='3'>&nbsp;</td>
<td colspan='2'><input type='button' name='update' value='update' onclick='jsUpdateCart()'/></td>
</tr>
<tr valign='top'>
<td colspan='3'>&nbsp;</td>
<td colspan='2'><input type="submit" name="submit" value="checkout"  /></td>
</tr>
</table>
</form>

Answer 1

I don't think IE supports document.getElementByClassName("")

Try replacing

allNodes = document.getElementsByClassName("process");

with

allNodes = $(".process");

wich is the JQuery way.

Answer 2

In IE8 just bring up the Web Developer Toolkit and put a break point at this line:

$('#ajax_msg').html( r );

I would also put a break point at the .ajax call here:

var params = 'ids='+parameter_string;

   $.ajax({

then see what happens.

This way you can ensure you are getting to it properly, else IE may have a problem before you get here, or, if you get here then you need to see if it goes out to the service and back, which is what the first url will tell you. Then single-step through the success code and see if it jumps out at some point due to an error.

Once you know for a fact that this code is the problem then you can update with what you have learned, but I have used this function in IE7 and 8 so it should work fine.