Problems of IE when using Jquery

Question

I am acessing the sibling of a checkbox using parentNode.nextElementSibling.value;It will returns value and works fine in Firefox.But in IE it is saying Object is null and saying

Microsoft JScript runtime error: 'parentNode.nextElementSibling.value' is null or not an object

My function is as follows

   function chkEnergy() {
             var inputs = $('.check input');
            var count = 0;var ok = 1;
        for (var i = 0; i < inputs.length; i++) {
            //alert(inputs[i].attr('checked'));
            if (inputs[i].checked == true) {
                var ch = inputs[i];
                var qty=ch.parentNode.nextElementSibling.value;
                if (qty == "0") {
                    ok = 0;
                    showStatus(true, "Please specify the Quantity");
                    return false;
                }
                else {
                    ok = 1;
                    continue;
                }
            }
        }
            if(ok==1)
                return true
            else
              return false;

     }

I uses this way to have dataList where checkbox and textbox were there

     <asp:DataList ID="dlstEnergyItems" runat="server" RepeatColumns="4" RepeatDirection="Horizontal"  Width="100%">
  <ItemTemplate>
   <asp:CheckBox ID="cbEnergyItems" runat="server" CssClass="check" />
    <input type="text" id="txtQty"  style="width:25px" class="hide textbox numbers_only" value="0"  runat="server" /> 
       <asp:HiddenField ID="HdfEnergy" runat="server" />
            <asp:HiddenField ID="HdfEnergyCID" runat="server" />
        </ItemTemplate>
</asp:DataList>

Renederd HTML

<table cellspacing="0" border="0" style="width: 100%;
 border-collapse: collapse;" 
id="ctl00_ContentPlaceHolder1_dlstEnergyItems">
<tbody><tr>
<td>
 <span class="check"><input type="checkbox" name="ctl00$ContentPlaceHolder1$dlstEnergyItems$ctl00$cbEnergyItems" id="ctl00_ContentPlaceHolder1_dlstEnergyItems_ctl00_cbEnergyItems"><label for="ctl00_ContentPlaceHolder1_dlstEnergyItems_ctl00_cbEnergyItems">
Energy-1</label></span>
  <input type="text" value="0" class="textbox numbers_only" style="width: 25px;" id="ctl00_ContentPlaceHolder1_dlstEnergyItems_ctl00_txtQty" name="ctl00$ContentPlaceHolder1$dlstEnergyItems$ctl00$txtQty"> 
  <input type="hidden" value="1" id="ctl00_ContentPlaceHolder1_dlstEnergyItems_ctl00_HdfEnergy" name="ctl00$ContentPlaceHolder1$dlstEnergyItems$ctl00$HdfEnergy">
 <input type="hidden" 
id="ctl00_ContentPlaceHolder1_dlstEnergyItems_ctl00_HdfEnergyCID" name="ctl00$ContentPlaceHolder1$dlstEnergyItems$ctl00$HdfEnergyCID">
 </td></tr></tbody></table>

Answer 1

Your problem is actually not jQuery, but IE-specific.

Internet Explorer does not support nextElementSibling and hence the value of it will not be defined in it.

The solution to your problem is to use jQuery to access elements instead of direct DOM access (as you are actually doing right now).

Answer 2

IE doesn't support nextElementSibling because it's non-standard property inventend by Firefox/Mozilla a standard that IE (unsurprisingly) does't support.

You'll need to use the standard nextSibling instead and if you have possible text nodes between your elements you'll need to loop over it to find the next element.

Most DOM libraries such as jQuery alternatively provide such functionality.

I missed that you are actually using jQuery, so use

var qty = $(ch).parent().next().val();

BTW, it's confusing to mix jQuery and "pure" DOM. That can lead to errors like this.

Answer 3

@jsalonen has the right cause (lack of IE support), but there is a solution here...if you're including jQuery, use it :) Here's a short version of your function that'll work cross-browser:

function chkEnergy() {
  var fails = $('.check:has(input:checked)').next("[value=0]").length;
  if (fails > 0) showStatus(true, "Please specify the Quantity");
  return fails === 0;
}

In this we're using .next() to get that input field and using an attribute-equals selector at the same time to get only those fields that have a value of 0 (failing the quantity check). If the .length of elements we found is more than 0 then we have some failures...show the alert and return false.