1

I'm trying to work with WordPress and a custom loop to display images in a Flickity carousel. Each image displays different articles in a Bootstrap Modal on click. Everything is working correctly.

Thanks to Jonathan Ortega on this post I nearly succeed to add the modal hash in the URL depending of the user click. The problem is that I'm getting ".../#undefined" in the URL instead of the exact modal name. The weird thing is that if I'm loading the page with "www.MYWEBSITE.com/#MYMODAL" this is working really great, the page successfully opens on the desired modal. But that's not working on click.

Here is the jQuery script, on the header :

$(document).ready(function(){

// some other script....

$(window.location.hash).modal('show');
    $('li[data-toggle="modal"]').click(function(){
       window.location.hash = $(this).attr('href');
});

});

And my custom WordPress loop involving the modal event :

<div class="slider slider--columns" data-arrows="true" data-paging="true">
<ul class="slides">

<?php 

$args = array(
'post_type' => 'MY_POST_TYPE',
'posts_per_page' => -1 
);

$MYPOSTTYPE = new WP_Query ($args);
if ($MYPOSTTYPE->have_posts() ):
    while ($MYPOSTTYPE->have_posts() ): $MYPOSTTYPE->the_post();

?>

<li class="col-sm-4 col-xs-6" data-toggle="modal" data-target="#modal<?php the_field('MODAL_ID_THING') ?>">
<div id="MY_ID" style="background-image: url(BGIMAGE.png) !important;"><img style="visibility: hidden;" alt="Image" src="dummyimage.png"></div>
</li>

<?php

endwhile; endif;
wp_reset_postdata();

?>
</div>
</ul>

As you can see the modal is called through <?php the_field('MODAL_ID_THING') ?>. At first I was thinking the jQuery script didn't like the PHP loop, so instead I entered a simple value referring to one of my modals like "#modalnumber1" just for testing, but the same thing happened.
I also tried to change $(window.location.hash).modal('show') in the script with $(window.location.hash).modal('toggle'), same problem.

Thanks a lot !

Community
  • 1
  • 1
Rojiraan
  • 39
  • 4

1 Answers1

3

As $('li[data-toggle="modal"]') does not have href attribute, I suppose you want to use data-target:

$('li[data-toggle="modal"]').click(function(){
    window.location.hash = $(this).data('target');
});
u_mulder
  • 54,101
  • 5
  • 48
  • 64
  • Damn of course, sorry I'm not really reactive when the subject is about jQuery, I now understand way more the meaning of the " window.location.hash = $(this)... " line. Thank you very much for your fast answer !! – Rojiraan Apr 06 '19 at 21:01