Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 362
  • Last Modified:

Why links are calling same content in div.

I have two links, Student Profile and Father details.
Both the links are calling same div.

This is HTML file.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link type='text/css' href='css/demo.css' rel='stylesheet' media='screen' />
<!-- Page styles -->


<!-- Contact Form CSS files -->

<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/jquery.simplemodal.js'></script>
<script type='text/javascript' src='js/basic.js'></script>




<!-- Contact Form CSS files -->
<link type='text/css' href='css/basic.css' rel='stylesheet' media='screen' />
 
 
<!-- IE6 "fix" for the close png image -->
<!--[if lt IE 7]>
<link type='text/css' href='css/basic_ie.css' rel='stylesheet' media='screen' />
<![endif]-->


</head>
 

<body>
    <form id="form1" runat="server">
   
   


<div id='container'>
      
      <div id='content'>
            <div id='basic-modal'>
            <table>
            <tr>
            <td><a href='#' class='basic'>Student Details</a></td>
            <td><a href='#' class='basic'>Father Details</a></td>
            
            </tr>
            </table>
            <!-- modal content -->
            <div id="basic-modal-content">
                   <table width="500" border="0" cellspacing="0" class="main_table_report">
       <tr >
       
        <td>
        <div align="left">
            <asp:Label ID="Label78" runat="server" Text="UIN"></asp:Label>
        </div>
        </td>
       
       
        <td>
        <div align="left">
            <asp:TextBox ID="txtuin" runat="server"  Width="200px"></asp:TextBox>            
        </div>
        </td>
        </tr>
             
      <tr >
       
        <td>
        <div align="left">
            <asp:Label ID="Label4" runat="server" Text="Name of the candidate"></asp:Label>
        </div>
        </td>
       
       
        <td>
        <div align="left">
            <asp:TextBox ID="Txtname" runat="server"  Width="200px"></asp:TextBox>            
        </div>
        </td>
        </tr>
             
         
      <tr>
        <td>
        <div align="left">
            <asp:Label ID="Label5" runat="server" Text="Gender"></asp:Label>
           </div></td>
           <td><div align="left">
               <asp:RadioButton ID="rbmale" runat="server" Text="Male" GroupName="sex"/>
               <asp:RadioButton ID="rbfemale" runat="server" Text="Female" GroupName="sex" />
               </div>
        </td>
      </tr>
     <tr >
      <td>
        <div align="left">
         
            <asp:Label ID="Label6" runat="server" Text="Date of Birth(dd/mm/yy)"></asp:Label>
            </div>
            </td>
            <td>
        <div align="left">
       
                 <asp:TextBox ID="txtdate" runat="server"  width="200px"></asp:TextBox>
                 
             </div>
             </td>
             </tr>
           <tr >
       <td>
        <div align="left">
       
            <asp:Label ID="Label7" runat="server" Text="Blood Group"></asp:Label>
            </div>
            </td>
            <td>
        <div align="left">
       
                 <asp:DropDownList ID="ddlblood" runat="server" Width="200px">
                 
                 </asp:DropDownList>
             </div>
             </td>
             </tr>  
     <tr >
        <td>
        <div align="left">
           
            <asp:Label ID="Label8" runat="server" Text="Email-ID"></asp:Label>
            </div>
            </td>
            <td>
        <div align="left">
       
                 <asp:TextBox ID="Txtemail" runat="server" Width="200px"></asp:TextBox>
             </div>
             </td>
             </tr>
           
           <tr >
        <td>
        <div align="left">
           
            <asp:Label ID="Label9" runat="server" Text="Mobile no."></asp:Label>
            </div>
            </td>
           <td>
        <div align="left">
       
                <asp:TextBox ID="txtmobile" runat="server" Width="200px">
                      </asp:TextBox>
                 
             </div>
             </td>
             </tr>
           
            <tr >
       
        <td class="td_style  report_color" colspan="4">
       
            <div align="center">
                <asp:Label ID="Label62" runat="server" Text=" Contact Details" Font-Size="Small"></asp:Label>
               
             
             </div></td>
      </tr>
             <tr>
           
            <td>
        <div align="right">
            <asp:Label ID="Label33" runat="server" Text="Address for correspondance"></asp:Label>
            </div>
            </td>
             
            <td class="td_style report_color" colspan="3">
        <div align="left">
            <asp:TextBox ID="Txtcorradd" runat="server" Width="400px" TextMode="MultiLine"></asp:TextBox>
           </div>
           </td>
 
            </tr>
            <tr>
            <td>
        <div align="right">
            <asp:Label ID="Label35" runat="server" Text="State"></asp:Label>
            </div>
           
             </td>
            <td class="td_style report_color" >
        <div align="left">
            <asp:DropDownList ID="ddlstates" runat="server"  Width="150px">
            </asp:DropDownList>
           </div>
           </td>
              <td>
        <div align="right">
            <asp:Label ID="Label34" runat="server" Text="District"></asp:Label>
            </div>
           
             </td>
            <td>
        <div align="left" >
            <asp:DropDownList ID="ddldistricts" runat="server"  Width="150px">
            </asp:DropDownList>
           </div>
           </td>
           
           </tr>
           <tr>
              <td>
        <div align="right">
            <asp:Label ID="Label36" runat="server" Text="Pin Code"></asp:Label>
            </div>
           
             </td>
            <td class="td_style report_color" colspan="3">
        <div align="left">
            <asp:TextBox ID="txtpin" runat="server" Width="60px" CausesValidation="True" AutoPostBack="True"></asp:TextBox>        
           
           </div>
           </td>
           
           </tr>
         
           
               
         
          <tr>
             
            <td>
        <div align="right">
            <asp:Label ID="Label37" runat="server" Text="Permanent Address"></asp:Label>        
           </div>
           </td>
           <td class="td_style report_color" colspan="3">
        <div align="left">
            <asp:TextBox ID="txtpermadd" runat="server" Width="400px" TextMode="MultiLine"></asp:TextBox>        
           </div>
           </td>
            </tr>
             <tr>
              <td>
        <div align="right">
            <asp:Label ID="Label39" runat="server" Text="Pin Code"></asp:Label>
            </div>
           
             </td>
            <td class="td_style report_color" colspan="3">
        <div align="left">
            <asp:TextBox ID="txtpincode" runat="server" Width="60px"></asp:TextBox>        
           </div>
           </td>
            </tr>
            <tr>
              <td>
        <div align="right">
            <asp:Label ID="Label38" runat="server" Text="Land line(with STD code)"></asp:Label>
            </div>
           
             </td>
            <td class="td_style report_color" colspan="3">
        <div align="left">
            <asp:TextBox ID="txtstdcodelandline" runat="server" Width="50px"></asp:TextBox>
            <asp:TextBox ID="txtland" runat="server" Width="150px"></asp:TextBox>
           </div>
           </td>
            </tr>
            </table>
            </div>

      
      </div>

</div>
<!-- Load jQuery, SimpleModal and Basic JS files -->
</form>
</body>
</html>
css.zip
js.zip
images.zip
0
searchsanjaysharma
Asked:
searchsanjaysharma
  • 2
  • 2
1 Solution
 
ansudhindraCommented:
In the basic.js file, you have onload function which adds listner to the DOM element.

$('#basic-modal .basic').click(function (e) {
            $('#basic-modal-content').modal();

            return false;
      });

the above function adds onclick event to the elements with in the container with id as "basic-modal" and with class "basic".

In your html, you have "basic-modal" div and it contains 2 elements with class as "basic"

<td><a href='#' class='basic'>Student Details</a></td>
            <td><a href='#' class='basic'>Father Details</a></td>

So on window load the jquery calls the same function (modal) when you click both "Student  Details" and "Father Details".

To call different you have to create another div, say with id "anotherdiv" and add the following block to the basic.js file.

$('#basic-modal .basic2').click(function (e) {
            $('#anotherdiv').modal();

            return false;
      });

and change the father details link class to "basic2".
0
 
searchsanjaysharmaAuthor Commented:
I did something like this, but it displays the content on the page. which i dont want i want it on click event only.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link type='text/css' href='css/demo.css' rel='stylesheet' media='screen' />
<!-- Page styles -->


<!-- Contact Form CSS files -->

<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/jquery.simplemodal.js'></script>
<script type='text/javascript' src='js/basic.js'></script>




<!-- Contact Form CSS files -->
<link type='text/css' href='css/basic.css' rel='stylesheet' media='screen' />
 
 
<!-- IE6 "fix" for the close png image -->
<!--[if lt IE 7]>
<link type='text/css' href='css/basic_ie.css' rel='stylesheet' media='screen' />
<![endif]-->


</head>
 

<body>
    <form id="form1" runat="server">
   
   


<div id='container'>
      
      <div id='content'>
            <div id='basic-modal'>
            <table>
            <tr>
            <td><a href='#' class='basic'>Student Details</a></td>
            <td><a href='#' class='basic2'>Father Details</a></td>
            
            </tr>
            </table>
            <!-- modal content -->
            <div id="basic-modal-content">
                   <table width="500" border="0" cellspacing="0" class="main_table_report">
       <tr >
       
        <td>
        <div align="left">
            <asp:Label ID="Label78" runat="server" Text="UIN"></asp:Label>
        </div>
        </td>
       
       
        <td>
        <div align="left">
            <asp:TextBox ID="txtuin" runat="server"  Width="200px"></asp:TextBox>            
        </div>
        </td>
        </tr>
             
      <tr >
       
        <td>
        <div align="left">
            <asp:Label ID="Label4" runat="server" Text="Name of the candidate"></asp:Label>
        </div>
        </td>
       
       
        <td>
        <div align="left">
            <asp:TextBox ID="Txtname" runat="server"  Width="200px"></asp:TextBox>            
        </div>
        </td>
        </tr>
             
         
      <tr>
        <td>
        <div align="left">
            <asp:Label ID="Label5" runat="server" Text="Gender"></asp:Label>
           </div></td>
           <td><div align="left">
               <asp:RadioButton ID="rbmale" runat="server" Text="Male" GroupName="sex"/>
               <asp:RadioButton ID="rbfemale" runat="server" Text="Female" GroupName="sex" />
               </div>
        </td>
      </tr>
     <tr >
      <td>
        <div align="left">
         
            <asp:Label ID="Label6" runat="server" Text="Date of Birth(dd/mm/yy)"></asp:Label>
            </div>
            </td>
            <td>
        <div align="left">
       
                 <asp:TextBox ID="txtdate" runat="server"  width="200px"></asp:TextBox>
                 
             </div>
             </td>
             </tr>
           <tr >
       <td>
        <div align="left">
       
            <asp:Label ID="Label7" runat="server" Text="Blood Group"></asp:Label>
            </div>
            </td>
            <td>
        <div align="left">
       
                 <asp:DropDownList ID="ddlblood" runat="server" Width="200px">
                 
                 </asp:DropDownList>
             </div>
             </td>
             </tr>  
     <tr >
        <td>
        <div align="left">
           
            <asp:Label ID="Label8" runat="server" Text="Email-ID"></asp:Label>
            </div>
            </td>
            <td>
        <div align="left">
       
                 <asp:TextBox ID="Txtemail" runat="server" Width="200px"></asp:TextBox>
             </div>
             </td>
             </tr>
           
           <tr >
        <td>
        <div align="left">
           
            <asp:Label ID="Label9" runat="server" Text="Mobile no."></asp:Label>
            </div>
            </td>
           <td>
        <div align="left">
       
                <asp:TextBox ID="txtmobile" runat="server" Width="200px">
                      </asp:TextBox>
                 
             </div>
             </td>
             </tr>
           
            <tr >
       
        <td class="td_style  report_color" colspan="4">
       
            <div align="center">
                <asp:Label ID="Label62" runat="server" Text=" Contact Details" Font-Size="Small"></asp:Label>
               
             
             </div></td>
      </tr>
             <tr>
           
            <td>
        <div align="right">
            <asp:Label ID="Label33" runat="server" Text="Address for correspondance"></asp:Label>
            </div>
            </td>
             
            <td class="td_style report_color" colspan="3">
        <div align="left">
            <asp:TextBox ID="Txtcorradd" runat="server" Width="400px" TextMode="MultiLine"></asp:TextBox>
           </div>
           </td>
 
            </tr>
            <tr>
            <td>
        <div align="right">
            <asp:Label ID="Label35" runat="server" Text="State"></asp:Label>
            </div>
           
             </td>
            <td class="td_style report_color" >
        <div align="left">
            <asp:DropDownList ID="ddlstates" runat="server"  Width="150px">
            </asp:DropDownList>
           </div>
           </td>
              <td>
        <div align="right">
            <asp:Label ID="Label34" runat="server" Text="District"></asp:Label>
            </div>
           
             </td>
            <td>
        <div align="left" >
            <asp:DropDownList ID="ddldistricts" runat="server"  Width="150px">
            </asp:DropDownList>
           </div>
           </td>
           
           </tr>
           <tr>
              <td>
        <div align="right">
            <asp:Label ID="Label36" runat="server" Text="Pin Code"></asp:Label>
            </div>
           
             </td>
            <td class="td_style report_color" colspan="3">
        <div align="left">
            <asp:TextBox ID="txtpin" runat="server" Width="60px" CausesValidation="True" AutoPostBack="True"></asp:TextBox>        
           
           </div>
           </td>
           
           </tr>
         
           
               
         
          <tr>
             
            <td>
        <div align="right">
            <asp:Label ID="Label37" runat="server" Text="Permanent Address"></asp:Label>        
           </div>
           </td>
           <td class="td_style report_color" colspan="3">
        <div align="left">
            <asp:TextBox ID="txtpermadd" runat="server" Width="400px" TextMode="MultiLine"></asp:TextBox>        
           </div>
           </td>
            </tr>
             <tr>
              <td>
        <div align="right">
            <asp:Label ID="Label39" runat="server" Text="Pin Code"></asp:Label>
            </div>
           
             </td>
            <td class="td_style report_color" colspan="3">
        <div align="left">
            <asp:TextBox ID="txtpincode" runat="server" Width="60px"></asp:TextBox>        
           </div>
           </td>
            </tr>
            <tr>
              <td>
        <div align="right">
            <asp:Label ID="Label38" runat="server" Text="Land line(with STD code)"></asp:Label>
            </div>
           
             </td>
            <td class="td_style report_color" colspan="3">
        <div align="left">
            <asp:TextBox ID="txtstdcodelandline" runat="server" Width="50px"></asp:TextBox>
            <asp:TextBox ID="txtland" runat="server" Width="150px"></asp:TextBox>
           </div>
           </td>
            </tr>
            </table>
            </div>
            

      
      </div>
      <div id='anotherdiv' visible="false">
       <table width="805" border="0" cellspacing="0" class="main_table_report">
             <tr >
       
        <td class="td_style  report_color" colspan="4">
       
            <div align="center">
                <asp:Label ID="Label1" runat="server" Text=" Father Details" Font-Size="Small"></asp:Label>
               
             
             </div></td>
      </tr>
              <tr >
       
             <td class="td_style report_color">
             <div align="right">
                 <asp:Label ID="Label10" runat="server" Text="Father's Name"></asp:Label>
             </div>
             </td>
             <td class="td_style report_color" colspan="3">
             <div align="left">
                 <asp:TextBox ID="Texfathername" runat="server" Width="200px"></asp:TextBox>
                 </div>
             </td>
             </tr>
             <tr >
        <td class="td_style report_color">
        <div align="right">
            <asp:Label ID="Label11" runat="server" Text="Occupation"></asp:Label>    
         </div>
         </td>
         <td class="td_style report_color" colspan="3">
         <div align="left">
         
             <asp:TextBox ID="Txtfatherocc" runat="server" Width="200px"></asp:TextBox>
         </div>
         </td>
         </tr>
         <tr >
        <td class="td_style report_color">
        <div align="right">
            <asp:Label ID="Label12" runat="server" Text="Official address"></asp:Label>
            </div>
            </td>
            <td class="td_style report_color" colspan="3">
        <div align="left">
            <asp:TextBox ID="Txtoffaddress" runat="server" TextMode="MultiLine"
                Width="400px"></asp:TextBox>
           
         </div>
         </td>
         </tr>
        <tr >
        <td class="td_style report_color">
        <div align="right">
            <asp:Label ID="Label13" runat="server" Text="Contact details" ></asp:Label>
            </div>
            </td>
            <td class="td_style report_color" colspan="3">
        <div align="left">
            <asp:TextBox ID="Txtcontact" runat="server"  TextMode="MultiLine" Width="400px"
               ></asp:TextBox>
         </div>
         </td>
         </tr>
         <tr >
        <td class="td_style report_color">
        <div align="right">
            <asp:Label ID="Label14" runat="server" Text="Office(with STD code)"></asp:Label>
            </div>
            </td>
             <td class="td_style report_color">
        <div align="left">
       
            STD code
           
            <asp:TextBox ID="Txtstd" runat="server"  Width="50px" ></asp:TextBox>
           
            Office no
           
           
            <asp:TextBox ID="txtoffno" runat="server"></asp:TextBox>
            </div>
            </td>
           
           
           
        <td class="td_style report_color">
        <div align="right">
            <asp:Label ID="Label15" runat="server" Text="Mobile No."></asp:Label>  
            </div>
            </td>
            <td class="td_style report_color">
        <div align="left">
            <asp:TextBox ID="Txtfathermobno" runat="server" Width="200px"></asp:TextBox>
            </div>
            </td>
            </tr>
             <tr >
        <td class="td_style report_color">
        <div align="right">
            <asp:Label ID="Label16" runat="server" Text="E-mail ID"></asp:Label>
            </div>
            </td>
            <td class="td_style report_color" colspan="3">
        <div align="left">
            <asp:TextBox ID="Txtfatheremail" runat="server" Width="200px"></asp:TextBox>
            </div>
            </td>
             </tr>
             </table>
      </div>

</div>
<!-- Load jQuery, SimpleModal and Basic JS files -->
</form>
</body>
</html>


And the basic.js has been modified like this.
jQuery(function ($) {
      // Load dialog on page load
      //$('#basic-modal-content').modal();

      // Load dialog on click
      $('#basic-modal .basic').click(function (e) {
            $('#basic-modal-content').modal();

            return false;
      });
      $('#basic-modal .basic2').click(function (e) {
            $('#anotherdiv').modal();

            return false;
      });


});
0
 
ansudhindraCommented:
add below line to the basic.css file

#anotherdiv {display:none;}

or change div start tag with
<div id="anotherdiv" style="display:none;">
0
 
searchsanjaysharmaAuthor Commented:
Thanx
0

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now