Updating a div content with a click event

JavaScript
1

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.


<!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>
&#8203;
</body>
</html>
2

I’m not sure but isnt your button class “button register first” and not just .button?

3

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

Yes, that is no problem once you get beyond IE6.

Look at the meeting title line - there is your problem.

5

To give a bit more of a hint, look at

var title = $(this).closest.(".meetings").(".title").text();

I’m by no means a jQuery expert, but I don’t think that shorthand is allowed :stuck_out_tongue:

6

Like cpradio said, you can’t do

$(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:

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