1

I'm trying to have a modal box open by default when calling it by its id.

For example, if i enter the url www.mysite.com#post-28 (#post28 being the ID of the post)

I will land with the moadal box and the content of the post-28.

For this I have been using the following jquery ( iattach a basic version of the code):

<script>
 jQuery(function ($) { 

 function popModal() {
  { alert("Your book is overdue.")
    };
    }

 var hash = window.location.hash;
 if (hash.substring(1) == 'post-<? the_ID(); ?>') {
 popModal();
}
 });
</script>

Which is not working when im calling dynamically post-<? the_ID(); ?>

However if I use this code instead:

 <script>
 jQuery(function ($) { 

 function popModal() {
  { alert("Your book is overdue.")
    };
    }

 var hash = window.location.hash;
 if (hash.substring(1) == 'post-17') {
 popModal();
}
 });
</script>

( post-17 being a post ID),

It does work.

I believe the problem is related how I call the post by <? the_ID ?>

any help will be incredible !

Thanks

--- EDIT ---

This is how i called my JS and seems to crash:

 add_action( 'wp_enqueue_scripts', 'themeeo_scripts' );

 function themeeo_scripts() {
// Load stylesheets
wp_register_style('theme-style', get_template_directory_uri() . '/css/style.css',array('bootstrap'));
wp_register_style('font-awesome', get_template_directory_uri() . '/css/font-awesome.min.css');
wp_register_style('bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css');
wp_register_style('owl-carousel', get_template_directory_uri() . '/css/owl.carousel.css');
wp_register_style('tether', get_template_directory_uri() . '/css/tether.min.css');
wp_register_style('responsive-styles', get_template_directory_uri() . '/css/responsive.css',array('bootstrap'));
wp_register_style('custom-style', get_template_directory_uri() . '/css/custom.css',array('bootstrap'));

// wp_enqueue_style('tether');
wp_enqueue_style('bootstrap');
wp_enqueue_style('font-awesome');
wp_enqueue_style('style-dynamic');
wp_enqueue_style('responsive-styles');
wp_enqueue_style('theme-style');
wp_enqueue_style('custom-style');

if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
    wp_enqueue_script( 'comment-reply' );
}



// Load jQuery scripts
 wp_register_script('jquery', get_template_directory_uri() . '/js/jquery.js', array('jquery'));
wp_register_script('custom', get_template_directory_uri() . '/js/jquery.custom.js', array('jquery'));

wp_register_script('bootstrap', get_template_directory_uri() . '/js/bootstrap.min.js', array('jquery'));
wp_register_script('owl-carousel', get_template_directory_uri() . '/js/owl.carousel.min.js', array('jquery'));
wp_register_script('tether', get_template_directory_uri() . '/js/tether.min.js', array('jquery'));
 wp_register_script('velocity', get_template_directory_uri() . '/js/velocity.js', array('jquery'));
wp_register_script('velocityui', get_template_directory_uri() . '/js/velocity.ui.js', array('jquery'));
    wp_register_script('helium-parallax-js', get_template_directory_uri() . '/js/helium.parallax.js', array('jquery'));
    wp_register_script('urlhash', get_template_directory_uri() . '/js/urlhash.js', array('jquery'));



wp_localize_script( 'custom', 'menuToggleText', array(
    'open'   => esc_html__( 'Open child menu' ),
    'close'  => esc_html__( 'Close child menu' ),
) );



wp_enqueue_script('helium-parallax-js');
wp_enqueue_script('jquery');
wp_enqueue_script('tether');
wp_enqueue_script('bootstrap', '', '', '', true);
wp_enqueue_script('owl-carousel', '', '', '', true);
wp_enqueue_script('tether', '', '', '', true);
wp_enqueue_script('custom', '', '', '', true);
wp_enqueue_script('skrollr.js', '', '', '', true);
wp_enqueue_script('velocity', '', '', '', true);

wp_enqueue_script('velocityui', '', '', '', true);
wp_enqueue_script( 'urlhash', get_template_directory_uri() . '/js/urlhash.js', array( 'jquery' ) );

 if ( is_single() ){
    $localization = array(
        'post_id' => get_the_ID(),
    );
    wp_localize_script( 'urlhash', 'localized_object', $localization );

 }


 }
1
  • Have you tried do use json_encode in your value before passing to JavaScript? see this answer so you can get a reference. Jul 20, 2017 at 12:36

1 Answer 1

0

That obviously won't work since you can't get the ID of the post by doing PHP calls in a javascript code. By the way, the short PHP tag should never be used due to conflicts. You should used the full <?php tag.

Now, about your problem. What you need to pass the ID is a localization. Include your script in a js file, and enqueue it using this piece of code:

add_action( 'wp_enqueue_scripts', 'some_function' );
function some_function(){
    wp_enqueue_script( 'some-handler', 'FULL URL HERE', array( 'jquery' ) );
}

Now, to pass the ID to the script, localize the post's ID by extending your code to this:

add_action( 'wp_enqueue_scripts', 'some_function' );
function some_function(){
    // Enqueue our JS file
    wp_enqueue_script( 'some-handler', 'FULL URL HERE', array( 'jquery' ) );
    // If we are on a single post, add the post's ID
    if ( is_single() ){
        $localization = array(
            'post_id' => get_the_ID(),
        );
        wp_localize_script( 'some-handler', 'localized_object', $localization );
    }
}

We're half way done. At this point, you can access your post's ID directly in your JS file:

(function($){ 

    function popModal() {
       window.alert("Your book is overdue.");
    }

    var hash = window.location.hash;
    if (hash.substring(1) == 'post-' + localized_object.post_id ) {
        popModal();
    }

})(jQuery);

Pretty cool stuff, ha?

19
  • Thanks Jack for all this, sounds fantastic ! regarding both add_actions ; those should be added to the functions.php of the theme ? Come back ot you once i made it work :)
    – thebigE
    Jul 20, 2017 at 13:32
  • @thebigE You're welcome. The second action is actually an expansion of the first time, and yes it goes in the theme's functions.php file. The js script goes in a js file, without the <script></script>.
    – Johansson
    Jul 20, 2017 at 14:29
  • digging in to it but im havig in the console a localized_object is not defined :(
    – thebigE
    Jul 20, 2017 at 14:30
  • Did you check the handler's names? This is a working function i pulled for you from my own theme.
    – Johansson
    Jul 20, 2017 at 14:32
  • yes, i think it s conflicting because i had already my js declared like that, and im not use to deal with handler, i usually call js in the footer
    – thebigE
    Jul 20, 2017 at 14:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.