Task 2: Details pane

In notebook:
FrontEndMasters Organising Javascript functionality
Created at:
2016-10-09
Updated:
2016-10-10
Tags:
JavaScript jQuery libraries DOM
Get the id from the clicked element on the carousel and use it for an AJAX call to fill out the details pane. :
  	<div id="carousel" rel="js-carousel">
		<div class="content" rel="js-content">
			<div class="items" rel="js-items">
				<div class="item person1" rel="js-item-0"></div>
				<div class="item person2" rel="js-item-1"></div>
				<div class="item person3" rel="js-item-2"></div>
				<div class="item person4" rel="js-item-3"></div>
				<div class="item person5" rel="js-item-4"></div>
				<div class="item person6" rel="js-item-5"></div>
			</div>
		</div>
		..
	</div>
He will use the ​js-item-[number]​ to get the ID and [number].html file.

 
  $(document).ready(function(){

	var $items = $("[rel=js-carousel] > [rel=js-content] > [rel=js-items]");
	var $content = $("[rel=js-details]");

	function loadPerson(ID) {
	  var ID = $(evt.target).attr("rel").replace(/^.*(\d+)$/,"$1");
	  
		$.ajax("details/" + ID + ".html",{ dataType: "text" })
		.then(function(content){
			$content.html(content);
		});
	}

// attach the click handler to item elements
	$items.on("click","> [rel^=js-item-]",personClicked);

});
line#7. He uses a regex trick to get just the number from js-item-[number]. 
It's a ​replace​ where you replace with an empty string everything that matches (using ​$1​ partial match for the replacement). 

Shows the Chrome debugger and using breakpoints (add the word ​debugger; in the code to create a breakpoint). 

Again, we need to specify ​{ dataType: "text" }​ to jQuery from parsing the ajax response (and just pass it into the details pane as html).