Help with using AJAX jQuery

**Jerrell_B** · 06-28-2012 10:40 PM

Hello, I need help on how to approach solving the problem below.

2.) displaying that whole document at once, create "tooltips" for the
letters in the left column by loading just the appropriate letter's content from
exercises-content.html when the user's mouse is over the letter.

Thanks in Advance for your help

index.html code:

Code:

 
<html>
<body>
 <h2>The Devil's Dictionary</h2>
        <div class="author">by Ambrose Bierce</div>
      </div>

      <div class="letters">
        <div class="letter" id="letter-a">
          <h3><a href="#">A</a></h3>
        </div>
        <div class="letter" id="letter-b">
          <h3><a href="#">B</a></h3>
        </div>
        <div class="letter" id="letter-c">
          <h3><a href="#">C</a></h3>
        </div>
        <div class="letter" id="letter-d">
          <h3><a href="#">D</a></h3>
        </div>
        <div class="letter" id="letter-e">
          <h3>E</h3>
</body>
</html>

content-exercises.html code:

Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Ajax Content</title>
</head>
<body>
  <div class="letter" id="letter-a">
    Abdication, Absolute, Acknowledge...
  </div>
  <div class="letter" id="letter-b">
    Bacchus, Backbite, Beard...
  </div>
  <div class="letter" id="letter-c">
    Calamity, Cannibal, Childhood...
  </div>
  <div class="letter" id="letter-d">
    Dance, Day, Debt...
  </div>
  <div class="letter" id="letter-e">
    Eavesdrop, Edible, Education...
  </div>
  <div class="letter" id="letter-f">
    Faith, Famous, Felon...
  </div>
  <div class="letter" id="letter-g">
    Gallows, Genealogy, Generous...
  </div>
  <div class="letter" id="letter-h">
    Habeas Corpus, Habit, Half...
  </div>
</body>
</html>

jQuery code - I believe I am on the right track?

Code:

// this code will grab the id letter and change depending on what letter is //selected (eg -a, -b, -c)	
$(function(){
	$('#letter').click(function(event){
		if ($(event.target).is('button')){
			var letterSelect = event.target.id.split('-')[1];
			$('letterSelect').mouseOver(function(){
				var tips = $.get('content-exercises.html .letterSelect')
				.attr(tips)

			});
		}
	});
});

**chrisranjana** · 06-29-2012 04:24 AM

If you need to select using class name then it should be

Code:

$('.letter').click(function(event){

instead of

Originally Posted by Jerrell_B

Code:

	$('#letter').click(function(event){

**Jerrell_B** · 06-29-2012 02:53 PM

Hi Chrisranjana,

Thank you for responding to my inquiry.

I am actually targeting the id on both index.html and content-exercises.html and using .split('_')[1] to grab the the ending of the id which is unique with each letter for example (id ="letter-a") and passing it to letterSelect. As usual I am probably making the solution to this problem more difficult than need to be because i don't know what to do after I capture the ending of id.

Code:

var letterSelect = event.target.id.split('-')[1];
	$('letterSelect').mouseOver(function(){

Thread: Help with using AJAX jQuery

Thread Tools

Display

Help with using AJAX jQuery

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions