[jQuery] History and ajax has me stuck
<html>
<body>
Hi folks,
I'm having difficulty understanding how to get Klaus's history plugin
working in my application. I have an "ebook"
application in which the page has a static index of pages which, when an
individual link is clicked, a file is loaded into an adjacent div
(#ebook).
Upon being loaded, the file is scanned and any a.linkto tags are scanned
for as these tags are my "between" page links which I was
hoping to get the history plugin to capture and do its magic. Once
found, the a.linkto tags are prepared - as far as I can understand - for
the history plugin. However, my attempt has gone all pear-shaped
and I cannot find any reference/article/documentation via Google to help
me see my error.
What tends to happen is that upon clicking an a.link from within #ebook,
a copy of the entire current page, sans the targetted page, is loaded
into #ebook.
Any help would be appreciated - even if it is a suggestion to try a
different approach.
Thanks, Bruce
<tt>$(document).ready(function() {
<x-tab> </x-tab>
$.ajaxHistory.initialize();
<x-tab> </x-tab>var pgname
= $('a.eb0').attr('id');
<x-tab> </x-tab>
fnGetEbookFile(pgname);
});
function fnGetEbookFile(pgname){
$.get('textfiles/' + pgname + '.html?q=' + new
Date().getTime(),function(txt){
<x-tab> </x-tab><x-tab>
</x-tab>
$("#ebook").html(txt).show();
<x-tab> </x-tab><x-tab>
</x-tab>
$('a').each(function()
{<x-tab> </x-tab><x-tab>
</x-tab>
<x-tab> </x-tab><x-tab>
</x-tab><x-tab>
</x-tab>var $a =
$(this);
<x-tab> </x-tab><x-tab>
</x-tab><x-tab>
</x-tab>var theid =
$a.attr('id');<x-tab> </x-tab>
<x-tab> </x-tab><x-tab>
</x-tab><x-tab>
</x-tab>var q =
$a.attr('class');<x-tab> </x-tab>
<x-tab> </x-tab><x-tab>
</x-tab><x-tab>
</x-tab>if (q=='linkto')
{
<x-tab> </x-tab><x-tab>
</x-tab><x-tab>
</x-tab><x-tab>
</x-tab>
$a.attr("id",'#textfiles/' + theid +
'.html').remote('#ebook').bind("click",function()
{fnGetEbookFile(theid);});<x-tab>
</x-tab>
<x-tab> </x-tab><x-tab>
</x-tab><x-tab>
</x-tab>};<x-tab>
</x-tab><x-tab>
</x-tab>
<x-tab> </x-tab><x-tab>
</x-tab>});
});
};</body>
</html>