1

I have one page and I would like to reload Divs without refresh my page when I click on menu links, at this time I'm using the following, but it doesn't work:

$(".hidemenubook4").load(location.href + " #book4");

My page has 4 different divs that I want to reload when I click on links to open them:

<a class="hidemenubook1" id="launcherbook1b" data-fancybox-group="book1" href="javascript:void(0);"><span class="namebook1origin">Book1</span></a>
<a class="hidemenubook2" id="launcherbook2b" data-fancybox-group="book2" href="javascript:void(0);"><span class="namebook2origin">Book2</span></a><br/>   
<a class="hidemenubook3" id="launcherbook3b" data-fancybox-group="book3" href="javascript:void(0);"><span class="namebook3origin">Book3</span></a><br/>     
<a class="hidemenubook4" id="launcherbook4b" data-fancybox-group="book4" href="javascript:void(0);" onClick="parent.jQuery.fancybox.close();"><span class="namebook4origin">Book4</span></a><br/>

<div id="book1"><div class="thumbnails">
  <a class="fancyboxgallerybook4" data-fancybox-group="book4" href="http://www.domaine.com/wp-content/uploads/book0/4.jpg" title=""><img class="fancyboxthumbnailsgallerybook4" src="http://www.domaine.com/wp-content/uploads/book4/07.jpg" alt=""/></a>
  ... 
</div></div>
<div id="book2"><div class="thumbnails">
  <a class="fancyboxgallerybook4" data-fancybox-group="book4" href="http://www.domaine.com/wp-content/uploads/book0/4.jpg" title=""><img class="fancyboxthumbnailsgallerybook4" src="http://www.domaine.com/wp-content/uploads/book4/07.jpg" alt=""/></a>
  ... 
</div></div>
<div id="book3"><div class="thumbnails">
  <a class="fancyboxgallerybook4" data-fancybox-group="book4" href="http://www.domaine.com/wp-content/uploads/book0/4.jpg" title=""><img class="fancyboxthumbnailsgallerybook4" src="http://www.domaine.com/wp-content/uploads/book4/07.jpg" alt=""/></a>
  ... 
</div></div>
<div id="book4"><div class="thumbnails">
  <a class="fancyboxgallerybook4" data-fancybox-group="book4" href="http://www.domaine.com/wp-content/uploads/book0/4.jpg" title=""><img class="fancyboxthumbnailsgallerybook4" src="http://www.domaine.com/wp-content/uploads/book4/07.jpg" alt=""/></a>
  ... 
</div></div>
freedomn-m
  • 27,664
  • 8
  • 35
  • 57
clodo0683
  • 89
  • 2
  • 3
  • 10
  • 1
    Possible duplicate of [Refresh/reload the content in Div using jquery/ajax](http://stackoverflow.com/questions/18490026/refresh-reload-the-content-in-div-using-jquery-ajax) – Kevin Kloet Nov 02 '16 at 15:30
  • nice comment, but how can I use it in my case ? – clodo0683 Nov 02 '16 at 15:31

1 Answers1

0

You're trying to load the content into .hidemenubook4 which is the <a> link!

Not sure what you mean to do with something called "hidemenubook", but to load the content, use:

$("#book4").load(location.href + " #book4");

if you mean to do this on the anchor click, then:

$(".hidemenubook4").click(function() {
    $("#book4").load(location.href + " #book4");
});

Update:

For a reusable version, you can make some changes.

  • First, give each link the same class (or put them under the same parent)
  • Second, give them a data- to link them (which you already have)
  • Third, use the class to assign the handler and the data to find the matching div

eg:

<a class="hidemenubook" id="launcherbook1b" data-fancybox-group="book1" href="javascript:void(0);"><span class="namebook1origin">Book1</span></a>
<a class="hidemenubook" id="launcherbook2b" data-fancybox-group="book2" href="javascript:void(0);"><span class="namebook2origin">Book2</span></a><br/>

then:

$(".hidemenubook").click(function() {
    var book = "#" + $(this).data("fancybox-group");
    $(book).load(location.href + " " + book);
});
freedomn-m
  • 27,664
  • 8
  • 35
  • 57
  • I would like to reload the content of .thumbnails who is inside #book4 when I click on < a class="hidemenubook1" id="launcherbook1b" > @freedomn-m – clodo0683 Nov 02 '16 at 15:36
  • `$("#book4 .thumbnails").load(location.href + " #book4 .thumbnails");` – freedomn-m Nov 02 '16 at 16:17
  • your code is ok but it doesn't work in my page, I think I can't use my plugin more than one time in same page – clodo0683 Nov 02 '16 at 17:20
  • I've added an update for you so that you can reuse the code. I'm not sure what you mean about "your plugin". – freedomn-m Nov 02 '16 at 17:27
  • I mean this one ;) https://rawgit.com/xremix/xGallerify/master/Demo.html i think when i want to use it in different divs inline and none it doesn't work really well !! – clodo0683 Nov 03 '16 at 10:39