Image slider inside (ajax) .load breaks

362 Views Asked by At

This is my first question on this forum and it relates to the .load element in ajax. Basically I have an unordered list in which the list items are clickable links:

<ul id="menuButton">
    <a href="index.html" rel="address:/Home" id='Home'><li id="HTML/Home.html" class="current"><p>Home</p></li></a>
    <a class="clickable" href="HTML/Projects.html" rel="address:/Projects" id='Projects'><li id="HTML/Projects.html" class=""><p>Projects</p></li></a>
    <a class="clickable" href="HTML/Designers.html" rel="address:/Designers" id='Designers'><li id="HTML/Designers.html" class=""><p>Designers</p></li></a>
    <a class="clickable" href="HTML/Contact.html" rel="address:/Contact" id='Contact'><li id="HTML/Contact.html" class=""><p>Contact</p></li></a>
</ul>

When clicked these links load different html snippets, some of which contain image sliders (the home and projects links). These load fine on the first time that the content is requested, however if you navigate to another tab and then back the sliders do not function anymore. The code employing the ajax method is in a $.(document).ready function and looks as follows.

$('a.clickable').click(function(){

    var toLoad = $(this).attr('href') + '#main';

    $('#content').slideUp('slow', loadContent);

    window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);

    function loadContent(){
        $('#content').load(toLoad, '' , showNewContent())
    }

    function showNewContent(){
        $.getScript("projectViewer.js",function(){alert('projectview ok')});
        $.getScript("jquery.slicebox.js");
        $('#content').slideDown('slow')
    }

    return false;

});

I am completely stumped on how to fix this, having tried different methods. I know the scripts load because I get the projectview ok alert, but somehow the navigation breaks on the image sliders.

Is there anyone that has seen this error before and that can help?

on a side note: if anyone knows how to get backbutton functionality with the .load ajax method that would be greatly appreciated as well.

0

There are 0 best solutions below