www.webdeveloper.com
Results 1 to 3 of 3

Thread: Help with using AJAX jQuery

  1. #1
    Join Date
    May 2012
    Posts
    82

    Help with using AJAX jQuery

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

  2. #2
    Join Date
    May 2004
    Location
    chennai, tamil nadu, India
    Posts
    451
    If you need to select using class name then it should be

    Code:
    $('.letter').click(function(event){
    instead of

    Quote Originally Posted by Jerrell_B View Post
    Code:
    	$('#letter').click(function(event){

  3. #3
    Join Date
    May 2012
    Posts
    82
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles