jQuery is not working

Question

0.00/5 (No votes)

See more:

hi,

I have an ASP.NET application. the first page contains some radio buttons and text boxes.
i was using a jquery to change the enable property of the text boxes according to option buttons selection. it was working fine but, i changed the application to have a master page then the script stopped working. note that when i put alert('show me'); inside the $(document).ready function the alert appeared.

the script:

JavaScript

$(document).ready(function () {
    $("#num").attr("disabled", "disabled");
    $("#num").css({ "background-color": "LightGray" });
    $("#num").val("");
    $("#fam").attr("disabled", "disabled");
    $("#fam").css({ "background-color": "LightGray" });
    $("#fam").val("");
    $("#vrc").attr("disabled", "disabled");
    $("#vrc").css({ "background-color": "LightGray" });
    $("#vrc").val("");
    $("#name1").attr("disabled", "disabled");
    $("#name1").css({ "background-color": "LightGray" });
    $("#name1").val("");
    $("#name2").attr("disabled", "disabled");
    $("#name2").css({ "background-color": "LightGray" });
    $("#name2").val("");
    $("#name3").attr("disabled", "disabled");
    $("#name3").css({ "background-color": "LightGray" });
    $("#name3").val("");
    $("#gov").attr("disabled", "disabled");
    $("#gov").css({ "background-color": "LightGray" });

    $("#RadioButton1").change(function () {
        if ($(this).is(":checked")) {
            $("#fam").val("");
            $("#vrc").val("");
            $("#name1").val("");
            $("#name2").val("");
            $("#name3").val("");
            $("#gov").val("");
            $("#num").attr("disabled", false);
            $("#num").css("background-color", "White");
            $("#fam").attr("disabled", "disabled");
            $("#fam").css({ "background-color": "LightGray" });
            $("#vrc").attr("disabled", "disabled");
            $("#vrc").css({ "background-color": "LightGray" });
            $("#name1").attr("disabled", "disabled");
            $("#name1").css({ "background-color": "LightGray" });
            $("#name2").attr("disabled", "disabled");
            $("#name2").css({ "background-color": "LightGray" });
            $("#name3").attr("disabled", "disabled");
            $("#name3").css({ "background-color": "LightGray" });
            $("#gov").attr("disabled", "disabled");
            $("#gov").css({ "background-color": "LightGray" });
        }
    });

    $("#RadioButton2").change(function () {
        if ($(this).is(":checked")) {
            $("#num").val("");
            $("#fam").val("");
            $("#name1").val("");
            $("#name2").val("");
            $("#name3").val("");
            $("#gov").val("");
            $("#num").attr("disabled", "disabled");
            $("#num").css({ "background-color": "LightGray" });
            $("#fam").attr("disabled", false);
            $("#fam").css({ "background-color": "White" });
            $("#vrc").attr("disabled", false);
            $("#vrc").css({ "background-color": "White" });
            $("#name1").attr("disabled", "disabled");
            $("#name1").css({ "background-color": "LightGray" });
            $("#name2").attr("disabled", "disabled");
            $("#name2").css({ "background-color": "LightGray" });
            $("#name3").attr("disabled", "disabled");
            $("#name3").css({ "background-color": "LightGray" });
            $("#gov").attr("disabled", "disabled");
            $("#gov").css({ "background-color": "LightGray" });
        }
    });
    $("#RadioButton3").change(function () {
        if ($(this).is(":checked")) {
            $("#num").val("");
            $("#fam").val("");
            $("#vrc").val("");
            $("#num").attr("disabled", "disabled");
            $("#num").css({ "background-color": "LightGray" });
            $("#fam").attr("disabled", false);
            $("#fam").css({ "background-color": "White" });
            $("#vrc").attr("disabled", "disabled");
            $("#vrc").css({ "background-color": "LightGray" });
            $("#name1").attr("disabled", false);
            $("#name1").css({ "background-color": "White" });
            $("#name2").attr("disabled", false);
            $("#name2").css({ "background-color": "White" });
            $("#name3").attr("disabled", false);
            $("#name3").css({ "background-color": "White" });
            $("#gov").attr("disabled", false);
            $("#gov").css({ "background-color": "White" });
        }

    });

});

the web page code:

ASP.NET

<%@ Page Title="Home Page" Language="vb" MasterPageFile="~/Site.Master" AutoEventWireup="false"
    CodeBehind="Default.aspx.vb" Inherits="WebSearch._Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<title>
واجهة البحث عن معلومات الناخب
</title>
    <script type="text/javascript" src="Scripts/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="Scripts/optionButton.js"></script>
  </asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <h2>
        واجــــهة البــــحث عـــن مـــعلــومــات الــناخب
    </h2>
    <h4>
    عزيزي الناخب تستطيع البحث عن بياناتك من خلال الخيارات التالية
    </h4>
   
    <div id="left">
			<table class="SearchTable"> 
                <tr >
                <td> 
                     <asp:Label ID="Label4" runat="server" Text="رقــم النـاخـب" cssclass="labels" ></asp:Label> 
                     </td>
                      <td>
                      
                    <asp:TextBox ID="num" runat="server" CssClass="input"></asp:TextBox> 
                      <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" 
                              ErrorMessage="*" ControlToValidate="num" ForeColor="Red"></asp:RequiredFieldValidator>
             <asp:CompareValidator ID="CompareValidator1" runat="server" 
                        ControlToValidate="num" ErrorMessage="يجب ادخال ارقام فقط" Operator="DataTypeCheck" 
                        Type="Integer" Font-Size="Medium" ForeColor="Red"></asp:CompareValidator>
                     </td>
                    
                     </tr>   
               <tr >
               <td>
                <asp:Label ID="Label5" runat="server" Text="رقم البطاقة التموينية" cssclass="labels"></asp:Label>  
                </td>
                <td> 
                    <asp:TextBox ID="fam" runat="server" CssClass="input"></asp:TextBox>
                     <asp:RequiredFieldValidator ID="RequiredFieldValidator6" runat="server" 
                    ErrorMessage="*" ControlToValidate="fam" ForeColor="Red"></asp:RequiredFieldValidator>
            <asp:CompareValidator ID="CompareValidator2" runat="server" 
                       ControlToValidate="fam" ErrorMessage="يجب ادخال ارقام فقط" Font-Size="Medium" 
                       Operator="DataTypeCheck" Type="Integer" Height="20px" Width="109px" 
                        ForeColor="Red"></asp:CompareValidator>
                </td>
                </tr>
                <tr>
                <td><asp:Label ID="Label6" runat="server"   Text="رقم مركز التموين" cssclass="labels" ></asp:Label>  
                     </td>
                     <td>
                      <asp:TextBox ID="vrc" runat="server" CssClass="input"></asp:TextBox>
                      
                <asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" 
                    ErrorMessage="*" ControlToValidate="vrc" ForeColor="Red"></asp:RequiredFieldValidator>
                      <asp:CompareValidator ID="CompareValidator3" runat="server" 
                        ControlToValidate="vrc" ErrorMessage="يجب ادخال ارقام فقط" Font-Size="Medium" 
                        Operator="DataTypeCheck" Type="Integer" ForeColor="Red"></asp:CompareValidator>
                     </td>
               
                     </tr>
                 <tr>
                <td>
                   <asp:Label ID="Label7" runat="server" Text= "اسم الناخب" cssclass="labels" ></asp:Label>  </td>
                    
                 <td >
                  <asp:TextBox ID="name1" runat="server" CssClass="input"></asp:TextBox> 
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" 
                    ErrorMessage="*" ControlToValidate="name1" ForeColor="Red"></asp:RequiredFieldValidator>
                   </td>
                  
                   </tr>
                    <tr >
   <td>
                      <asp:Label ID="Label11" runat="server" Text="اسم الاب" cssclass="labels" ></asp:Label>  </td>
                   
                <td>
                  
                     <asp:TextBox ID="name2" runat="server" CssClass="input"></asp:TextBox> 
                      <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" 
                    ErrorMessage="*" ControlToValidate="name2" ForeColor="Red"></asp:RequiredFieldValidator>
                      </td>
                     
                     </tr>
   <tr>
     <td> <asp:Label ID="Label8" runat="server" Text="اسم الجد" cssclass="labels" ></asp:Label>  </td>
                   
                <td>
                 
                     <asp:TextBox ID="name3" runat="server" CssClass="input"></asp:TextBox>
                      <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" 
                    ErrorMessage="*" ControlToValidate="name3" ForeColor="Red"></asp:RequiredFieldValidator>
                       </td>
                   
                      </tr>    
                 <tr>
                  <td>  <asp:Label ID="Label9" runat="server" 
                    Text="المحافظة" cssclass="labels"  ></asp:Label>  </td>
                         
                      <td>    
                            <asp:DropDownList ID="gov" runat="server" CssClass="input">
                                <asp:ListItem Value="1">بغداد_رصافة</asp:ListItem>
                                <asp:ListItem Value="4">دهوك</asp:ListItem>
                                <asp:ListItem Value="5">اربيل</asp:ListItem>
                                <asp:ListItem Value="6">سليمانية</asp:ListItem>
                                <asp:ListItem Value="12">نينوى</asp:ListItem>
                                <asp:ListItem Value="14">كركوك</asp:ListItem>
                                <asp:ListItem Value="21">ديالى</asp:ListItem>
                                <asp:ListItem Value="22">الانبار</asp:ListItem>
                                <asp:ListItem Value="23">بغداد_الكرخ</asp:ListItem>
                                <asp:ListItem Value="24">بابل</asp:ListItem>
                                <asp:ListItem Value="25">كربلاء</asp:ListItem>
                                <asp:ListItem Value="26">واسط</asp:ListItem>
                                <asp:ListItem Value="27">صلاح الدين</asp:ListItem>
                                <asp:ListItem Value="28">النجف</asp:ListItem>
                                <asp:ListItem Value="31">القادسية</asp:ListItem>
                                <asp:ListItem Value="32">المثنى</asp:ListItem>
                                <asp:ListItem Value="33">ذي قار</asp:ListItem>
                                <asp:ListItem Value="34">ميسان</asp:ListItem>
                                <asp:ListItem Value="35">البصرة</asp:ListItem>
                </asp:DropDownList> 
                 </td>
                        
                   
                     </tr>
                   <tr>
                   
                   <td> 
                               
                     <asp:Button ID="search" runat="server" 
                           Text="بـــحث" cssclass="buttons" />  
                               
                       </td>
                       <td style="padding-removed5px">
                            <asp:Button ID="new_search" runat="server" 
                                Text="بـحث جديد" 
                                cssclass="buttons"/>  
                            </td > 
                              
                          
                       
                       
                   </tr>
                  
                </table>
			
		</div>
		 <div id="right">
			<table class="SearchTable">
            <tr>
            <td>
             <asp:RadioButton ID="RadioButton1" GroupName="options" runat="server" Text="البـــحث بــواســطة رقــم النـــاخــب" cssclass="labels" />
            </td>
            </tr>
            <tr>
             <td>
                 <asp:RadioButton ID="RadioButton2" GroupName="options" runat="server" Text="البحث بواسطة رقم البطاقة التموينية ورقم مركز التمـوين" cssclass="labels" />
            </td>
            </tr>
            <tr>
             <td>
                <asp:RadioButton ID="RadioButton3" GroupName="options" runat="server" Text="البحث بواسطة الاسم الثلاثي ورقم البطاقة التموينية <br/>     والمحافظة" cssclass="labels" />
            </td>
            </tr>
                    
            </table>
			<div style="margin-removed145px; margin-removed 20px" >
            <a href="Guide.aspx" class="labels">للمزيد من المعلومات انقر هنا لقراءة الدليل</a>
			
            </div>
			</div>
           
            <div>
            
       <asp:GridView ID="gvResult" runat="server" AutoGenerateColumns="False" CssClass="grid">
                    <Columns>
                        <asp:BoundField DataField="PER_ID" 
                            HeaderText="رقم الناخب" />
                        <asp:BoundField DataField="PER_FULLNAME" 
                            HeaderText="الاسم الثلاثي" />
                        <asp:BoundField DataField="PER_FAMNO" 
                            HeaderText="رقم البطاقة التموينيه" />
                        <asp:BoundField DataField="VRC_NAME_AR" 
                            HeaderText="اسم مركز التموين" />
                        <asp:BoundField DataField="VRC_OID" 
                            HeaderText="رقم مركز التموين" />
                        <asp:BoundField DataField="VRC_ID" 
                            HeaderText="رقم مركز التسجيل" />
                        <asp:BoundField DataField="PCNO" 
                            HeaderText="رقم مركز الاقتراع" />
                        <asp:BoundField DataField="PC_NAME" 
                            HeaderText="اسم مركز الاقتراع" />
                        <asp:BoundField DataField="PC_ADDRESS" 
                            HeaderText="عنوان مركز الاقتراع" />
                        <asp:BoundField DataField="GOV_NAME_AR" 
                            HeaderText="اسم المحافظه" />
                        <asp:BoundField DataField="PSNO" 
                            HeaderText="رقم محطة الاقتراع" />
                    </Columns>
        </asp:GridView> 
            </div>
            <div id="footer">
            <p>
             <asp:Label ID="lblCount" runat="server" Text="عدد الزائرين" CssClass="labels"></asp:Label>
            </p>
            </div>
</asp:Content>

Can anyone tell me what is going wrong?
why the script stopped working while it was working fine before?

Thank you,

missa

Posted 13-Feb-13 23:40pm

Brainy Girl

Add a Solution

3 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

BallaviKrishna · Answer 1 · 2015-11-15T21:17:00

Solution 2

HI,
if you are using Master page then you can not access Id of controls directly by giving ID name in the jquery.
you have to write like this.

JavaScript

$('#<%=num.ClientID%>').attr("disabled", "disabled");

Posted 15-Nov-15 21:17pm

BallaviKrishna

Comments

Afzaal Ahmad Zeeshan 16-Nov-15 3:41am

Doesn't master page get rendered by ASP.NET?

BallaviKrishna 23-Nov-15 0:51am

Sorry,I can not Understand your question, can u please say it briefly.

F-ES Sitecore · Answer 2 · 2015-11-15T22:04:00

jQuery works on the html sent to the browser, view the source of the page and look at the ids, you'll see they have been changed by .net from what they are in your aspx page. You need to use ClientID as advised to get the correct IDs to use in your javascript.

http://forums.asp.net/t/2034467.aspx?Accessing+controls+via+jQuery+when+using+master+pages[^]

Bandi Ramesh · Answer 3 · 2013-02-14T00:03:00

Solution 1

instead of

JavaScript

$("#num").attr("disabled", "disabled");

try this

JavaScript

$("id$=num").attr("disabled", "disabled");

i think it helps you.

Posted 14-Feb-13 0:03am

Bandi Ramesh

Comments

Brainy Girl 14-Feb-13 13:48pm

no its not :(
the weird thing is that the same code is working on the old version but after adding the master page it stopped working. i don't understand what is happening.