Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Why links are calling same content in div.

Posted on 2012-03-12
4
Medium Priority
?
359 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 2000 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

Build and deliver software with DevOps

A digital transformation requires faster time to market, shorter software development lifecycles, and the ability to adapt rapidly to changing customer demands. DevOps provides the solution.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
OverviewThis article demonstrates a simple search form using AJAX. The purpose of the article is to demonstrate how to use the same code to render a page and javascript (JQuery) and AJAX to make subsequent calls to refine the results. The princip…
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…

688 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