update: fixed, sharing code here for the sake of others, I have lists of related entry titles, then use jQuery to load entries via AJAH into a generic div below each title.
picture > words: http://brokensky.net/songs/
{exp:weblog:entries weblog="releases" orderby="title" sort="asc"}
<h3>{title}</h3>
<p> <ol class="{url_title} lyrics"><br />
{related_entries id="related_songs"}<br />
<li>{track}. <a href="#" class="quickLyric">{title}</a> <br />
:: <a href="http://{title_permalink=songs/lyric}">/images/page_white_text.png</a><br />
<div class="{url_title}"></div><br />
</li><br />
{/related_entries}<br />
</ol><br />
<br />
{/exp:weblog:entries}I have it working with the following:
$(document).ready(function() {
$("a.quickLyric").click(function(){
// capture the url to load from the id
var urlLoad = $(this).attr("id");
// load the second template with AJAX
$("div[class="+urlLoad+"]").toggle();
$("div[class="+urlLoad+"]").load('/songs/inc/'+urlLoad+'/');
// just make sure the page doesn’t reload
return false;
});
});a simpler approach would be to just parse EE tags in the js… it’d also allow for cleaner markup… something like this:
$(document).ready(function() {
$("a.quickLyric").click(function(){
$(this "div").load({title_permalink='/songs/inc/'});
return false;
});
});on
took some ideas from: found http://jambor-ee.com/tutorials/loading-and-animating-an-entry-with-ajax-and-jquery/