SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    May 2008
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Updating a div content with a click event

    I' m not sure what am doing wrong, I am trying to populate the title and date of step 1 and 2 with that of the meetings content, when a register button is clicked.
    But nothing happens when is clicked, so i guess am not getting the contents right or something.


    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <meta charset=utf-8 />
    <title>test</title>
    
    
    <script>
    
    $(document).ready(function() {
    
    $(".button").click(function() {	
    var date = $(this).closest(".meetings").children(".meeting-date").text();
    var title = $(this).closest.(".meetings").(".title").text();
         
       $(".date").text(date);
       $(".title").text(title);
    });
    });
    </script>
    </head>
    
    <body>
      
    <article class="meetings">
    <header>
    <div class="meeting-type">
        General Meeting / New York
    </div>
    <h3><a href="" class="title">New York Conference</a></h3>
    </header>
    
    <section class="meeting_description">
        <div class="speaker">
          Sarah
          David
        </div>
    
         <span class="meeting-date">February 28, 2012</span>
    
    </section>
    
    <p class="register">
        <a class="button register first" href="#">Register</a>
    </p>
    </article>
    
    <h3>===============================================================</h3>
    
     <!-- step 1 -->
     <div id='first-modal' class='modal'>
          <h4>Confirm Registration</h4>
    
        <p>
       Please click the confirm button below to complete your registration for the event;<br /> 
         <span class="title"></span>
         <span class="date"></span>
      </p>
    
    </div>
    
    <!-- step 2 -->
    <div id='second-modal' class='modal'>
        <h4>Registration Complete</h4>
    
      <p>You have successfully registered for the event;<br /> 
         <span class="title"></span>
         <span class="date"></span>
      </p>
    
    </div></body>
    </html>

  2. #2
    SitePoint Zealot behati's Avatar
    Join Date
    Feb 2012
    Location
    Copenhagen, Denmark
    Posts
    152
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I'm not sure but isnt your button class "button register first" and not just .button?

  3. #3
    SitePoint Addict
    Join Date
    May 2008
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There are 3 classes, but I am using the button class, is that a problem? I thought is possible to use more than one class on an element

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,717
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by parkerproject View Post
    There are 3 classes, but I am using the button class, is that a problem? I thought is possible to use more than one class on an element
    Yes, that is no problem once you get beyond IE6.

    Look at the meeting title line - there is your problem.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,162
    Mentioned
    153 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    Yes, that is no problem once you get beyond IE6.

    Look at the meeting title line - there is your problem.
    To give a bit more of a hint, look at
    Code:
    var title = $(this).closest.(".meetings").(".title").text();
    I'm by no means a jQuery expert, but I don't think that shorthand is allowed

  6. #6
    SitePoint Enthusiast OMGCarlos's Avatar
    Join Date
    Apr 2012
    Location
    Boston, MA
    Posts
    91
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Like cpradio said, you can't do
    Code:
    $(this).closest.(".meetings").(".title").text();
    Not to mention that even if you could, you wouldn't get what you want. Replace that line with this instead:
    Code:
    var title = $('.title', $(this).closest(".meetings")).text();
    Here's the demo: http://jsfiddle.net/aZC8d/

    [EDIT]
    This is what's going on:

    * I'm using the child selector for jQuery, which is $( [child], [parent] )
    * I find the closest parent using your method, $(this).closest(".meetings")
    * I want the child of .meetings, not the parent or whatever is before it...which is what closest gets. The child would be '.title'
    * So, $('.title', $(this).closest('.meetings'))
    * I then get the text of that $('.title', $(this).closest('.meetings')).text();


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •