Java script not working in any except IE 8 +

4 posts, 1 answers
  1. Wired_Nerve
    Wired_Nerve avatar
    163 posts
    Member since:
    Oct 2007

    Posted 17 Jan 2013 Link to this post

    I have a bit of java script on a master page that is checking a user control nested inside a grid (edit mode) that ensures the user has at-least selected one of the template items in a drop-down list.  
    The template in the combo box contains a Check box and label....

    If the user tries to submit the edited or new record, a custom validator with a client side event fire and should check to see if they user actually selected at-least 1 of the template check boxes, otherwise it displays an error and the validation control stops the post back to the server...

    So if I run this in IE, I have no problems... But it does not seem to validate in chrome, safari and firefox.. I suspect it has to do with the line of code:
    items.getItem(i).get_element().innerHTML.indexOf("CHECKED") > 0


    Now I can get it  to work if I use a server postback, but I would like to avoid a trip to the server... (see server method c# at the end of the post...)

    MASTER PAGE Javascript
    <script type="text/javascript">
             function ClientListBoxItemsCountValidate(source, arguments) {
                var listbox = $find(source.controltovalidate);
                var itemsCount = listbox.get_items().get_count();
      
                if (itemsCount < 1)
                    arguments.IsValid = false;
                else if (itemsCount > 0)
                    arguments.IsValid = true;
            }
      
            function ClientComboCountValidate(source, arguments) {
                var comboBox = $find(source.controltovalidate);
                var items = comboBox.get_items();
      
                for (var i = 0; i < items.get_count(); i++) {
                    if (items.getItem(i).get_element().innerHTML.indexOf("CHECKED") > 0) {
                        arguments.IsValid = true;
                    } else {
                        arguments.IsValid = false;
                     }
                 }
            }      
         </script>


    ComboBox and Validator in usercontrol nested in a radgrid 
    <telerik:RadComboBox ID="RadComboDepartments" runat="server" DataTextField="DepartmentName"
        DataValueField="DepartmentUid" EmptyMessage="Please select" CausesValidation="True">
            <ItemTemplate>
                <asp:CheckBox ID="CheckBox" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.DepartmentName") %>' />
             </ItemTemplate>
     </telerik:RadComboBox>
         <asp:CustomValidator ID="CustomValidator2" ValidateEmptyText="true" ControlToValidate="RadComboDepartments"
             Display="Dynamic" ClientValidationFunction="ClientComboCountValidate" ErrorMessage="<br />One department must be selected"
             CssClass="Error" runat="server"  />



    Not the desired solution:  Server Side Validation...
    protected void CustomValidator2_ServerValidate(object source, ServerValidateEventArgs args)
            {
                foreach (RadComboBoxItem item in RadComboDepartments.Items)
                {
                    CheckBox chk = (CheckBox)item.FindControl("CheckBox");
                    if (chk.Checked)
                    {
                        args.IsValid = true;
                        return;
                    }
                }
     
                args.IsValid = false;
            }


  2. Answer
    Nencho
    Admin
    Nencho avatar
    1864 posts

    Posted 22 Jan 2013 Link to this post

    Hello Warren,

    I can suggest you to access the CheckBox object and determine its check state. In addition, you could add a CssClass to the checkbox, in order to access it with jQuery in the following manner:

    //MasterPage
    function ClientComboCountValidate(source, arguments) {
               var comboBox = $find(source.controltovalidate);
               var items = comboBox.get_items();
     
               for (var i = 0; i < items.get_count() ; i++) {
                   var checkBox = $telerik.$(items.getItem(i).get_element()).find(".foo")[0];
                   if (checkBox.checked) {
                       arguments.IsValid = true;
                   } else {
                       arguments.IsValid = false;
                   }
               }
           }

    //ComboBox declaration
    <telerik:RadComboBox ID="RadComboBox1" runat="server" DataTextField="DepartmentName"
          DataValueField="DepartmentUid" EmptyMessage="Please select" CausesValidation="True">
          <ItemTemplate>
              <asp:CheckBox ID="CheckBox" CssClass="foo" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.DepartmentName") %>' />
          </ItemTemplate>
      </telerik:RadComboBox>




    Regards,
    Nencho
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. Wired_Nerve
    Wired_Nerve avatar
    163 posts
    Member since:
    Oct 2007

    Posted 22 Jan 2013 Link to this post

    I will give this a try and report back the results... Thanks for the input...


    Warren
  4. Nencho
    Admin
    Nencho avatar
    1864 posts

    Posted 25 Jan 2013 Link to this post

    Hello Warren,

    Please take your time and let us know if it's works properly at your end.

    Kind regards,
    Nencho
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top