7 Replies - 1553 Views - Last Post: 08 October 2013 - 09:54 AM

#1 B0urn3  Icon User is offline

  • New D.I.C Head

Reputation: 4
  • View blog
  • Posts: 21
  • Joined: 24-February 13

How to execute a different function for each link: JQuery?

Posted 06 October 2013 - 03:46 PM

Hello, everyone.

Yes, this is a homework assignment. No, I don't want anyone to do my homework for me.
What I do want so badly is to learn how to code. (In multiple languages). Thus far we've covered Visual Basic, MS SQL Server. The current semester has us learning PHP, JAVA, Javascript/JQuery.

I'm doing excellent in PHP and JAVA but I'm starting to go downhill rapidly with Javascript/JQuery. I'm reasoning that, all things being equal it's mastering the JQuery syntax that's hindering me.

Chap 9: How to use the DOM manipulation and traversal methods

Modify a Placeholder application
1. run the application and notice that when you click on a link in the sidebar, the page is scrolled so the information for the speaker associated with that link is displayed. In other words, this application works even if Javascript is disabled.
2. In the Javascript file, add an event handler for the ready event method. Then, within the function for that event handler, add JQuery code that hides the heading and article for all but the first speaker.

The HTML:
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<title>Placeholders</title>
	<link rel="stylesheet" href="index.css">
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script src="navigation.js"></script>
</head>

<body>
	<header>
		<img src="images/town_hall_logo.gif" alt="Town Hall logo" height="80">
		<hgroup>
			<h1><a id="top">San Joaquin Valley Town Hall</a></h1>
			<h2>Celebrating our <span class="shadow">75<sup>th</sup></span> Year</h2>
		</hgroup>
	</header>
	<section>
		
		<h1><a id="toobin">The Supreme Nine: Black Robed Secrets</a></h1>
		<article>	
			<img src="images/toobin_court.jpg" alt="Jeffrey Toobin">
			<h2>October<br>Jeffrey Toobin</h2>
			<p>Author of the critically acclaimed best seller, The Nine: Inside the Secret World of the 
			Supreme Court, Jeffrey Toobin brings the inside story of one of America's most mysterious 
			and powerful institutions to the Saroyan stage. At the podium, Toobin is an unbiased, deeply 
			analytic expert on American law, politics and procedure and he provides a unique look into the 
			inner workings of the Supreme Court and its influence.</p>
			<p>Inside the Secret World of the Supreme Court was published by Doubleday and spent more than 
			four months on the NY Times best-seller list, earning Toobin the 2008 J. Anthony Lukas Prize 
			for Nonfiction from the Columbia Graduate School of Journalism. Toobin has also written several 
			other best-selling books, including A Vast Conspiracy: The Real Story of the Sex Scandal that 
			Nearly Brought Down a President; The Run of His Life: The People vs. O.J. Simpson; and 
			Too Close to Call: The 36-Day Battle to Decide the 2000 Election.</p>
			<p>Jeffrey Toobin joined CBB from ABC News, where, during his six-year tenure as a legal analyst, 
			he provided legal views on the nation's most provocative and high profile cases, including the O.J. 
			Simpson civil trial and the Kenneth Starr investigation of the Clinton White House. Toobin 
			received a 2001 Emmy Award for his coverage of the Elian Gonzales custody saga.</p>
			<p>Toobin is a staff writer at The New Yorker and has been covering legal affairs for the magazine 
			since 1993. He has written articles on such subjects as Attorney General John Ashcroft, the 2001 
			dispute over Florida's votes for president, the Paula Jones sexual harassment case, and Supreme 
			Court Justice Clarence Thomas.</p>
			<p>Currently a senior analyst for CNN Worldwide, Toobin is based in the network's New York bureau. 
			He graduated from Harvard magna cum laude with a Bachelor of Arts degree in 1982 and earned a 
			Truman scholarship. He is also a 1986 magna cum laude graduate of Harvard Law School, where he 
			was an editor of the Harvard Law Review.</p>
			<p><a href="#top">Back to top</a></p>
		</article>
		
		<h1><a id="sorkin">The Politics of <em>Too Big to Fail</em></a></h1>
		<article>
			<img src="images/sorkin_desk260.jpg" alt="Andrew Ross Sorkin"/>
			<h2>November<br>Andrew Ross Sorkin</h2>
			<p><em>New York Times</em> columnist and author, Andrew Ross Sorkin, 
			has been described as &ldquo;the most famous financial journalist of his generation.&rdquo;  
			A leading voice on Wall Street and corporate America, his <em>New York Times</em> bestseller, 
			<em>Too Big to Fail: The Inside Story of How Wall Street and Washington Fought to Save 
			the Financial System—and Themselves</em>, was the first true, behind-the-scenes, 
			moment-by-moment account of how that financial crisis developed into a global tsunami.</p>
			<p><em>The Economist</em>, <em>The Financial Times</em> and <em>Business Week</em> all named 
			<em>Too Big To Fail</em> one of the best books of the year.  The book was published by 
			Viking October 20, 2009. The book was adapted as a movie by HBO Films and premiered on HBO on 
			May 23, 2011. The film was directed by Curtis Hanson</p>
			<p>and the screenplay was written 
			by Peter Gould.The cast included William Hurt as Hank Paulson, the Treasury Secretary; 
			Paul Giamatti as Ben Bernanke, the chairman of the Federal Reserve; Billy Crudup as 
			Timothy Geithner; and Edward Asner as Warren Buffett.</p>
			<p><em>Too Big to Fail</em> won the 2010 Gerald Loeb Award for best business book of the year, 
			was a finalist for the 2010 <em>Financial Times</em> and Goldman Sachs Business Book of the Year 
			Award, and was on <em>The New York Times</em> Best Seller list (non-fiction hardcover and paperback) 
			for six months.</p>
			<p>Sorkin is a regular guest host of CNBC’s <em>Squawk Box</em> and appears frequently on MSNBC's 
			<em>Morning Joe</em>.  He has appeared on many other programs, including <em>Meet the Press</em>, 
			<em>Good Morning America</em>, <em>The Daily Show</em> with Jon Stewart, and <em>Charlie Rose</em>.</p>
			<p>Andrew Sorkin graduated from Scarsdale High School in 1995 and earned a Bachelor of Science 
			degree from Cornell University in 1999.  Additional accolades for Andrew Sorkin include winning a 
			Society of American Business Editors and Writers Award for breaking news in 2005 and again in 2006.  
			In 2007, the World Economic Forum named him a Young Global Leader.</p>
			<p><a href="#top">Back to top</a></p>			
		</article>
		<h1><a id="chua">Babylon to Beijing: Risks and Rewards of Global Dominance</a></h1>		
		<article>
			<img src="images/chua_220.jpg" alt="Amy Chua" width="145" />
			<h2>January<br>Amy Chua</h2>
			<p>Amy Chua joined the Yale faculty in 2001 after teaching at Duke Law School. 
			Prior to starting her teaching career, she was a corporate law associate at Cleary, Gottlieb, 
			Steen &amp; Hamilton. Her expertise is in international business transactions, law and 
			development, ethnic conflict, and globalization and the law.</p>
			<p>Born in Champaign, Illinois, Amy Chua's parents were ethnic Chinese from the Philippines 
			before immigrating to the United States. Amy's father, Leon O. Chua, is known as  father of 
			the nonlinear circuit theory and cellular neural networks. Amy Chua graduated magna cum laude 
			with an A. B. </p>
			<p>in Economics from Harvard College in 1984. 
			She obtained her J. D. cum laude in 1987 from Harvard Law School.</p>
			<p>Chua's first book, <em>World on Fire: How Exporting Free Market Democracy Breeds Ethnic 
			Hatred and Global Instability </em>was a <em>New York Times</em> bestseller, and was selected 
			by both <em>The Economist</em> and the U. K.'s <em>Guardian</em> as one the the Best Books of 
			2003. Her second book, <em>Day of Empire: How Hyperpowers Rise to Global Dominance- and Why 
			They Fall</em>, was a critically acclaimed Foreign Affairs bestseller.</p>
			<p>This Yale academic was catapulted into the public spotlight in 2011 with publication of 
			the<em> NY Times</em> bestseller, <em>Battle Hymn of the Tiger Mother</em>, a memoir 
			exploring strict parenting the &ldquo;Chinese Way&rdquo; as compared to more lenient western 
			parenting models.</p>
			<p><a href="#top">Back to top</a></p>			
		</article>
		<h1><a id="sampson">Fossil Threads in the Web of Life</a></h1>
		<article>
			<img src="images/sampson_dinosaur.jpg" alt="Scott Sampson">
			<h2>February<br>Scott Sampson</h2>
			<p>What's 75 million years old and brand spanking new? A teenage Utahceratops! Come to the Saroyan, 
			armed with your best dinosaur roar, when Scott Sampson, Research Curator at the Utah Museum of 
			Natural History, steps to the podium. Sampson's research has focused on the ecology and evolution 
			of late Cretaceous dinosaurs and he has conducted fieldwork in a number of countries in Africa.</p>
		    <p>Scott Sampson is a Canadian-born paleontologist who received his Ph.D. in zoology from the 
		    University of Toronto. His doctoral work focused on two new species of ceratopsids, or horned dinosaurs, 
		    from the Late Cretaceous of Montana, as well as the growth and function of certopsid horns and frills.</p>
	        <p>Following graduation in 1993, Sampson spent a year working at the American Museum of Natual History 
	        in New York City, followed by five years as assistant professor of anatomy at the New York College of 
	        Osteopathic Medicine on Long Island. He arrived at the University of Utah accepting a dual position as 
	        assistant professor in the Department of Geology and Geophysics and curator of vertebrate paleontology 
	        at the Utah Museum of Natural History. His research interests largely revolve around the phylogenetics, 
	        functional morphology, and evolution of Late Cretaceous dinosaurs.</p>
	        <p>In addition to his museum and laboratory-based studies, Sampson has conducted paleontological work 
	        in Zimbabwe, South Africa, and Madagascar, as well as the United States and Canada. He was also the 
	        on-the-air host for the Discovery Channel's Dinosaur Planet and recently completed a book, 
	        <em>Dinosaur Odyssey: Fossil Threads in the Web of Life</em>, which is one of the most comprehensive 
	        surveys of dinosaurs and their worlds to date.</p>
			<p><a href="#top">Back to top</a></p>	        
		</article>

	</section>
	<aside>
		<h1 id="speakers">This Year's Speakers</h1>
		<nav id="nav_list">
			<ul>
				<li><a href="#toobin">October<br>Jeffrey Toobin</a></li>
				<li><a href="#sorkin">November<br>Andrew Ross Sorkin</a></li>
				<li><a href="#chua">January<br>Amy Chua</a></li>
				<li><a href="#sampson">February<br>Scott Sampson</a></li>
			</ul>
		</nav>
	</aside>
	<footer>
		<p>&copy; 2012, San Joaquin Valley Town Hall, Fresno, CA 93755"</p>
	</footer>
</body>
</html>




Here's what I came up with to accomplish such a task successfully.
$(document).ready(function() {
	
	//Runs as soon as document loads
	$('#toobin, article:eq(0)').show();
	$('#sorkin,  article:eq(3)').hide();
	$('#chua, article:eq(2)').hide();
	$('#sampson, article:eq(1)').hide();
});



3. Add an event handler for the click event of the <a> elements in the sidebar. Then, within the function for that event handler, add JQuery code that hides all the speaker information, gets the value of the href attribute of the link that was clicked, and then uses that value to display the heading and article for the speaker associated with that link.

 
   var chua = function(){
    	$('#chua, article:eq(2)').show();
    	$('#sorkin, article:eq(3)').hide();
    	$('#sampson, article:eq(1)').hide();
    	$('#toobin, article:eq(0)').hide();
    	
    };
    
      var toobin = function(){
    	$('#toobin, article:eq(0)').show();
		$('#sorkin,  article:eq(3)').hide();
		$('#chua, article:eq(2)').hide();
		$('#sampson, article:eq(1)').hide();
    	
    };
    
      var sorkin = function(){
		$('#sorkin,  article:eq(3)').show();
		$('#chua, article:eq(2)').hide();
		$('#sampson, article:eq(1)').hide();
		$('#toobin, article:eq(0)').hide();
    
    };
    
     var sampson = function(){
    	$('#sampson, article:eq(1)').show();
    	$('#chua, article:eq(2)').hide();
    	$('#sorkin, article:eq(3)').hide();
    	$('#toobin, article:eq(0)').hide();
    };
//add event handler for the click event of the <a> elements in the sidebar.
$('aside a').click(function {()

})



I'm trying to figure out how to pass a function to the link that, when it's clicked, it displays the heading and article for the speaker associated with that link. So I first created functions for each speaker. Each function shows the current speaker's heading and article and hides the others.

Here's what I tried:
$('aside a').click(function(){
		$(this).attr("scr", chua);
	});



What happened was that which ever link that I clicked on in the aside, var function = chua; was returned. How do I connect my functions to their respect links in the aside?

Alternatively, what's an ideal way that this problem could be approached?

Thanks.

Is This A Good Question/Topic? 0
  • +

Replies To: How to execute a different function for each link: JQuery?

#2 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 2875
  • View blog
  • Posts: 9,540
  • Joined: 12-December 12

Re: How to execute a different function for each link: JQuery?

Posted 06 October 2013 - 04:05 PM

$('aside a').click(function(){
		$(this).attr("scr", chua);
	});

You cannot assign a function as the scr-attribute?! (I'm not sure what you are trying to achieve by doing this..) Added: should be "src" anyway.

If you want to call a function within the click event:

$('aside a').click(function(){
		chua();
	});

but I assume you intend to put some logic in there so that it determines which of your functions to call.

This post has been edited by andrewsw: 06 October 2013 - 05:04 PM

Was This Post Helpful? 2
  • +
  • -

#3 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 2875
  • View blog
  • Posts: 9,540
  • Joined: 12-December 12

Re: How to execute a different function for each link: JQuery?

Posted 06 October 2013 - 04:16 PM

<a href="#toobin">

I would also change these to:
<a href="#">

and you'll need to return false; from your click-event so that it doesn't attempt to follow these links. I would add e.preventDefault(); as well, as the first line in your click event.

$('aside a').click(function (e) {
    e.preventDefault();
    // call a function
    return false;
}

Was This Post Helpful? 1
  • +
  • -

#4 B0urn3  Icon User is offline

  • New D.I.C Head

Reputation: 4
  • View blog
  • Posts: 21
  • Joined: 24-February 13

Re: How to execute a different function for each link: JQuery?

Posted 07 October 2013 - 12:49 AM

Thanks, Andrew. As I didn't know what changing href="#...." with href="#" would do, I didn't touch that. However, I did manage to successfully implement conditions to check the value of my links to return functions. It turns out that JQuery supports a familiar syntax that MS SQL Server has to check equality- [href^='value']. Here's my code:

	$("aside").on("click", "a", function(e){
			var $elem = $(this);
			if ($elem.is("[href^='#chua']")){
				chua();	//event.perventDefault();
			}
			else if 
			($elem.is("[href^='#sorkin']")){
				sorkin();
			}
			else if 
			($elem.is("[href^='#toobin']")){
				toobin();
			}
			else if 
			($elem.is("[href^='#sampson']")){
				sampson();
			}
			event.preventDefault();
			
		
	});




Now that this problem is solved, could someone please share with me the more efficient and less tedious way to go about solving this problem? Thanks everyone.

This post has been edited by andrewsw: 07 October 2013 - 11:59 AM
Reason for edit:: Removed previous quote

Was This Post Helpful? 0
  • +
  • -

#5 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 2875
  • View blog
  • Posts: 9,540
  • Joined: 12-December 12

Re: How to execute a different function for each link: JQuery?

Posted 07 October 2013 - 12:11 PM

You don't actually need ^= which means 'starts with', just =. Also, it should be e.preventDefault() not event.preventDefault(), to agree with the argument 'e'. I prefer to put it first but I don't think it matters.

The following will probably work:

$("aside").on("click", "a", function (e) {
    e.preventDefault();
    var $elem = $(this);
    var $elemId = $elem.attr('id');

    window[$elemId]();    // call the function of this name
    return false;
}

..but there are other ways.

This assumes that your variables/functions are globally available, via the window object.
Was This Post Helpful? 2
  • +
  • -

#6 Atli  Icon User is online

  • D.I.C Lover
  • member icon

Reputation: 3635
  • View blog
  • Posts: 5,756
  • Joined: 08-June 10

Re: How to execute a different function for each link: JQuery?

Posted 07 October 2013 - 02:32 PM

Personally I wouldn't feel comfortable calling the functions blindly from the window element like that. I would at the very least suggest an IF clause that checks the availability of the functions before they are called, if only to stop the browser from stopping with an error.

However, I would also suggest not using the window object at all, but instead define a preset map of which functions should be available to which element. Like:
var funcs = {
	"func1" : function() { ... },
	"func2" : func2,
	"func3" : window.org.example.func3
};
var theId = $(this).attr("id");
if (funcs.hasOwnProperty(theId)) {
	funcs[theId].call();
}


This gives you a little bit more control over what functions are allowed to be called.


andrewsw said:

and you'll need to return false; from your click-event so that it doesn't attempt to follow these links.

This is actually not a good idea. Returning false from within an event does indeed cancel it's default action, but it does more than that, including cancelling the propagation of the event, which can lead to nasty side effects. I would recommend against using it. It's an outdated method.

The preventDefault() and stopPropagation() functions of the event object should be used instead. To cancel the navigation of an anchor element you only need the former. In vanilla Javascript you may need to take browser incompatibilities into account (for IE), but when using jQuery that is not necessary. It wraps the native event objects and makes sure the calls to these functions work in all supported browsers.
Was This Post Helpful? 2
  • +
  • -

#7 B0urn3  Icon User is offline

  • New D.I.C Head

Reputation: 4
  • View blog
  • Posts: 21
  • Joined: 24-February 13

Re: How to execute a different function for each link: JQuery?

Posted 08 October 2013 - 05:18 AM

Thanks, Andrew. You have been a tremendous help.
Was This Post Helpful? 0
  • +
  • -

#8 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 2875
  • View blog
  • Posts: 9,540
  • Joined: 12-December 12

Re: How to execute a different function for each link: JQuery?

Posted 08 October 2013 - 09:54 AM

No worries ;)

Looking at your original functions though, they are doing essentially the same thing. Personally, I probably wouldn't create them at all. I would probably just use the click event to hide() these four articles, and then use the id of the clicked element to decide which one to unhide (show).

I would probably go a step further and add a data-art attribute to the asides which contains the number of the corresponding article to show. But I haven't explored this in detail, and there are other approaches.

Anyway, good luck!
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1