Solved

Why links are calling same content in div.

Posted on 2012-03-12
4
351 Views
Last Modified: 2012-03-13
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
Comment
Question by:searchsanjaysharma
  • 2
  • 2
4 Comments
 
LVL 13

Expert Comment

by:ansudhindra
ID: 37713224
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
 

Author Comment

by:searchsanjaysharma
ID: 37713281
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
 
LVL 13

Accepted Solution

by:
ansudhindra earned 500 total points
ID: 37713327
add below line to the basic.css file

#anotherdiv {display:none;}

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

Author Closing Comment

by:searchsanjaysharma
ID: 37713995
Thanx
0

Featured Post

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now