Question

Trying to load content into a div, then on click load the previous content that was in the div again.

This is the code I have so far:

$(document).ready(function(){
   var mainClone = null;
   $('.project').click(function(e){
      var link = $(this).attr('rel');
      event.preventDefault();
      var mainClone = $('#main').clone();
      $('#main').load(link);
   });      

  $('.back').click(function(e){
  event.preventDefault();
  $('#main').load('mainClone *');
  });
});

What am I doing wrong? This is driving me nuts!

On a side note, is this a good solution to my problem?
I’m trying to achieve something similar to the work section on: http://www.revolver-studio.com/
You click a thumb and it goes into more info then you click back to go to the thumbs again.
ANY help would be really appreciated.
Thanks guys!

Answer 1

Several problems.

First is the second use of var mainClone within project click handler. This is declaring a new variable named mainClone and is not the same as the original one you declared. The new one only has scope within the function it is declared in, so the original more global one will never change.

Next problem us use of load() when you want to replvce the html with the stored html. It is both inappropriate for what you want to do and the argument is simply a string which is invalid.

$(document).ready(function(){
   var mainClone = null;
   $('.project').click(function(e){
      var link = $(this).attr('rel');
      event.preventDefault();
      /*var mainClone = $('#main').clone();*/ 
      mainClone = $('#main').html();// now will update var declared above and only get the html within the element
      $('#main').load(link);
   });      

  $('.back').click(function(e){
  event.preventDefault();
  if( mainClone ){ // make sure it's not null still
    $('#main').html( mainClone);
  }
  });
});

Overall this code will still be a little weak but it is not intention of SO to build an app for you. It should get you started