views:

1469

answers:

2

Okay I'm totally confused on this one.

I have a script that receives a bunch of values from a JSON object and creates a bunch of checkboxes and either checks or unchecks a these checkboxes based on their values.

This script treats me like a woman treats me...

"If you don't know what's wrong, then I'm not going to tell you..."

The script works correctly in IE8, Firefox3, etc... etc...

However...

In IE7 the script fails to check off the checkboxes. It displays no errors and from what I can tell, the script runs just fine. I just doesn't check any of the checkboxes, and I don't know why...

shoppingCart['Update_Stock_Item_0_NRD%5FHAT2'] = {
   'propeller': {
       'label'          : 'propeller',        
       'optionValues'   : {             
             'on' : {
             'selected': 'selected'
              },
              'off' : {
               'selected': ''
                      },
              '' : new String()
            }
      },
   'sunLogo': {
       'label'          : 'sunLogo',        
       'optionValues'   : {             
             'on' : {
             'selected': 'selected'
              },
              'off' : {
               'selected': ''
                      },
              '' : new String()
            }
      },
   'MSLogo': {
       'label'          : 'sunLogo',
       'optionValues'   : {             
             'on' : {
             'selected': 'selected'
              },
              'off' : {
               'selected': ''
                      },
              '' : new String()
            }
      }       
};

function stockInit() { alert("BEGIN: stockInit()"); // TODO: You will recieve an "on" and an "off" option, // One will have a "selected" attribute of "selected", // and the other will have a "selected" attribute of "" // // The option that has the "selected" attribute of "" // will generate a checkbox that is not checked. // // The option that has the "selected attribute of "selected" // will generate a checkbox that is checked. //
// Why? You ask...because that's just the way the thing is // setup. for(var item in shoppingCart) { // // console.log("processing item: " + item);

  var optionContainer = document.getElementById(item + "_optionContainer");

  for(var option in shoppingCart[item])
  {
   if(option != "blank")
   {
    // // console.log("option: " + option);

    var currentOption = shoppingCart[item][option]['optionValues'];

    // // console.log("currentOption['on']['selected']: " + currentOption['on']['selected']);
    // // console.log("currentOption['off']['selected']: " + currentOption['off']['selected']);

    // Really you only have to check the one, but just to be through-o
    var selected = (currentOption['on']['selected'] == 'selected') ? true : false;
    selected = (currentOption['off']['selected'] == 'selected') ? false : true;

    var label = document.createElement("LABEL");
    var labelText = document.createTextNode(shoppingCart[item][option]['label']);
    var optionInput = document.createElement("INPUT");

    var hiddenInput = document.createElement("INPUT");

    optionInput.setAttribute("type", "checkbox");
    optionInput.checked = selected;

    optionInput.setAttribute("id", option);
    alert(optionInput.id);
    alert(optionInput.checked);

    hiddenInput.setAttribute("type", "hidden");
    hiddenInput.setAttribute("name", option);
    hiddenInput.setAttribute("id", option + "_hiddenValue");
    hiddenInput.setAttribute("value", (optionInput.checked) ? "on" : "off");

    label.appendChild(optionInput);
    label.appendChild(labelText);
    label.appendChild(hiddenInput);

    (function(id)
    {
     optionInput.onclick = function() {

      var hiddenInput = document.getElementById(id + "_hiddenValue");

      hiddenInput.setAttribute("value", (this.checked == true) ? "on" : "off");
      alert("this.id: " + this.id);
      alert("this.checked: " + this.checked);
     }
    })(optionInput.id);

    optionContainer.appendChild(label);


   }
  }
  // // console.log("processing item of " + item + " complete");
 }
 alert("END: stockInit()");
}

And please don't ask why I'm doing things this way...all I can really tell you is that I don't have access to the backend code...so I get what I get...

+6  A: 

I guess this is your problem

basically the solution is to additionally do this:

optionInput.defaultChecked = selected;

or alternatively set the checked parameter after inserting the checkbox into the DOM

Ramuns Usovs
heh, interesting... I was going to say "set .checked after its been appended to the DOM", and it looks like that would have worked... but he can't really do that in this case anyway since its within a loop
Allen
Wow that was obscure.
leeand00
well I thought that I had a similar issue some time ago, and yes - this was it :)
Ramuns Usovs
applies to radio buttons too
scunliffe
A: 

thx... to post a defaultChecked attributes info.

Hariharan