Link to home
Start Free TrialLog in
Avatar of searchsanjaysharma
searchsanjaysharma

asked on

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
Avatar of Sudhindra A N
Sudhindra A N
Flag of India image
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".
Avatar of searchsanjaysharma
searchsanjaysharma

ASKER

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;
      });


});
ASKER CERTIFIED SOLUTION
Avatar of Sudhindra A N
Sudhindra A N
Flag of India image
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of searchsanjaysharma
searchsanjaysharma

ASKER

Thanx