JavaScript loading but not working !

  • Resolved LebCit

    (@lebcit)


    11 years ago

    Hello everyone,

    After three days, war coding, to make a js file run, i have only this great place to ask, hoping that i’ll find someone with good experience in js into WP to tell me what’s wrong and how should i proceed to make it work.

    First things first, i’m trying to implement a menu in a personal parent theme (i’ve tried to implement it for testing in underscores and in Twenty Thirteen).

    1- After seting up the markup of my menu in a separate php file in the root of the theme folder (e.g. nav-top.php)

    <ul id="gn-menu" class="gn-menu-main">
    <li class="gn-trigger">
        <a class="gn-icon gn-icon-menu"><span>Menu</span></a>
        <nav class="gn-menu-wrapper">
			<div class="gn-scroller">
				<ul class="gn-menu">
					<li class="gn-search-item">
						<input placeholder="Search" type="search" class="gn-search">
						<a class="gn-icon gn-icon-search"><span><?php get_search_form(); ?></span></a>
					</li>
					<li>
						<a class="gn-icon gn-icon-download">Downloads</a>
						<ul class="gn-submenu">
							<li><a class="gn-icon gn-icon-illustrator">Vector Illustrations</a></li>
							<li><a class="gn-icon gn-icon-photoshop">Photoshop files</a></li>
						</ul>
					</li>
				</ul>
			</div><!-- /gn-scroller -->
        </nav>
    </li>
    <li><a href="https://tympanus.net/codrops">Codrops</a></li>
    <li><!-- ... --></li>
    <!-- ... -->
</ul>

    I left the markup like this for testing. Working fine under an html file !

    2- I tried just to wp_enqueue_script the two necessary files for the menu and wp_enqueue_style in fuctions.php, without registering in a function !
    Then i used <?php get_template_part(‘nav’, ‘top’); ?> at the top of the header.php before the title of the site.
    The css worked just fine, i could see the menu bar, but the js files where not working since the sidebar panel of the menu was not opening.

    3- I tried to register and enqueue the scripts and the style in a function in functions.php, but i had the same result as before, the css was here and the js files where not working.

    4- I tried to integrate the navigation directly in header.php after
    a- just enqueue the scripts and the style
    b- register and enqueue the scripts and the style in a function
    BUT, the result was always the same css working, js not working.

    In the title i type “JavaScript loading…” i can tell because i saw the code source of my page and they where here like the style.

    Oh, just for more info, when i enqueue or register/enqueue the js files, i’ve tried to put them in the footer than in the header (true, false), than i tried to call jquery in the array( array(‘jquery’) ),
    nothing seems to work !

    Finally, why three days for an hour of testing ?
    Hell, because i’ve tried a lot of menu and the result was the same for all of them : css working, js loading but not working !
    And i made a lot lot lot of reading ??

    So, the problem is in my experience with js in WP, it’s my fault ??
    I hope that someone will help me to finally pass this step and go further in js into WP.

    Thanks a lot in advance for your help ??

Viewing 12 replies - 1 through 12 (of 12 total)
  • esmi

    (@esmi)

    without registering in a function

    Why? Can you elaborate on this?

    i’ve tried to put them in the footer than in the header

    Again, why?

    Thread Starter LebCit

    (@lebcit)

    Hello esmi,

    First thanks for your quick reply ??

    without registering in a function

    well because i’ve seen some tutorials doing it and in some themes also.

    i’ve tried to put them in the footer than in the header

    well because i was testing and trying to make it work.

    When i say in the footer than in the header i mean that i tried to put first in the footer and the second time in the header by changing the parameter $in_footer of
    <?php wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); ?>
    once to true and once to false.

    Thanks again for helping ??

    esmi

    (@esmi)

    For now, I’d leave the script in the header of your pages. Don’t try to change too many parameters until you have this working. and you should use the declared functions method for enqueueing scripts and CSS.

    Is the call to your script being generated in the head of your pages?.

    Thread Starter LebCit

    (@lebcit)

    This is my code in functions.php at the moment for this menu :

    // *** Scripts and styles for the google nexus menu. ***

function gnmenu_style()
{
    //
    wp_register_style( 'gnmenustyle', get_template_directory_uri() . '/css/component.css' );  

    //
    wp_enqueue_style( 'gnmenustyle' );
}
add_action( 'wp_enqueue_scripts', 'gnmenu_style' );  

function gnmenu_script()
{
    //
	wp_register_script( 'gnmenu', get_template_directory_uri() . '/js/gnmenu.js', array(''), '', false );

    //
    wp_enqueue_script( 'gnmenu' );
}
add_action( 'wp_enqueue_scripts', 'gnmenu_script' );

function classie_script()
{
    //
	wp_register_script( 'classie', get_template_directory_uri() . '/js/classie.js',  array(''), '', false );

    //
    wp_enqueue_script( 'classie' );
}
add_action( 'wp_enqueue_scripts', 'classie_script' );

    And this is a screenshot of my home page.

    And this is the head of the source code of my home page

    IMPORTANT : when logged as admin, the source code show’s on line 32 and 33 the js scripts.
    But now when making you a screen shot, i logged out and the js scripts where not their anymore !

    esmi

    (@esmi)

    Try something simpler:

    // *** Scripts and styles for the google nexus menu. ***
function gnmenu_scripts() {
    wp_register_style( 'gnmenustyle', get_template_directory_uri() . '/css/component.css' );
    wp_enqueue_style( 'gnmenustyle' );

	wp_register_script( 'gnmenu', get_template_directory_uri() . '/js/gnmenu.js' );
    wp_enqueue_script( 'gnmenu' );

	wp_register_script( 'classie', get_template_directory_uri() . '/js/classie.js' );
    wp_enqueue_script( 'classie' );
}
add_action( 'wp_enqueue_scripts', 'gnmenu_scripts' );
    Thread Starter LebCit

    (@lebcit)

    Hello esmi,

    Thanks for simplifying my code, looks prettier now ??

    AND, in the source code, i can now see the two scripts even without logging in ?? THAT’S GREAT ! (lignes 32 and 33)

    BUT, still nothing. The js files won’t work.

    Thanks for helping me ?? ?? ??

    esmi

    (@esmi)

    That suggests the issue is in the scripts.

    Thread Starter LebCit

    (@lebcit)

    Hello esmi,

    I’m not better placed than you to tell ??
    So i’ll go with your answer.

    But before closing this topic, if i may, i want to know 2 things.

    1- Why did it work as an html and not inside WP ?
    2- If i have a js folder containing a jquery.js file, how do i enqueue this file, knowing that WP have already jquery.
    P.S. : this file is 256Ko ! WP jquery is only 91Ko

    Thanks for all your help, i think that i’m on the right way now ??

    esmi

    (@esmi)

    1. There could be conflict with other scripts running as default in WordPress, your theme or 1 or more plugins. A static page is a very different beast to a dynamic one.

    2. You should be able to load the .js “as is” given that jQuery has already been loaded by WordPress core. That said, some of the .js scripts floating around the interweb rely on old versions of jQuery that contained bugs etc. So you do need to ensure that the scripts that you are trying to run will work with the version of jQuery currently bundled with WordPress.

    WP jquery is only 91Ko

    The version in WP core is minified, so that could make a difference.

    Thread Starter LebCit

    (@lebcit)

    Thanks a ZILLION time ??

    esmi

    (@esmi)

    No probs. I hope you get this sorted. What might help is to try enqueuing a very simple .js script to see if that works, If it does, then it pretty much confirms that the issue is within your current scripts rather than a conflict etc.

    i have a same rather different story jquery is loading in my page i enqueued
    it in my functions.php and my custom script is also loading but nothings working

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘JavaScript loading but not working !’ is closed to new replies.