0

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.

user2712033
  • 1
  • To get back button working in AJAX based sites I use the jQuery HashChange plugin http://benalman.com/projects/jquery-hashchange-plugin/ – Mark Aug 24 '13 at 10:36
  • Also looks like you're looking the projectViewer.js is maybe loaded twice if you called the showNewContent command every time. Can you now include the JS in your page header, and then call the function when you need it? – Mark Aug 24 '13 at 10:37
  • To clarify the problem, the website is hosted here: [link](http://lotldesign.com), including the bugs. – user2712033 Aug 24 '13 at 11:04
  • When I place the projectViewer.js script in the header of the index page and remove the $.getScript it also works. However the issue of the image viewer breaking still occurs whenever I navigate away from and then back to the image viewer. – user2712033 Aug 24 '13 at 11:11
  • strangely enough, removing the projectViewer.js from the header of the HTML that is loaded also breaks the navigation even though I only call content from the #main div on that page. – user2712033 Aug 24 '13 at 11:15
  • Almost ashamed to say it, but its fixed. Some pages accidentally reloaded jquery causing a conflict and the sliders not to work... – user2712033 Aug 24 '13 at 18:49

0 Answers0