WordPress.org

Ready to get started?Download WordPress

Forums

JQuery isn't firing from my header.php file (10 posts)

  1. mbyrne
    Member
    Posted 1 year ago #

    I tried this in JSBins and it worked but won't work on my page:
    Under header.php:

    <script type="text/javascript" src="/admin/wp-includes/js/jquery/SHOWME.js"></script>
    
    //**Html**//
    <!DOCTYPE html>
    <html>
    <head>
      <script src="http://aea.us.org/admin/wp-includes/js/jquery/SHOWME.js"></script>
    </head>
    <body>
      <a href="#;"><h3>Air Barrier Association of America (ABAA) Certification Training</h3></a>
    <div id="widget" style="display:none;">Self Adhered & Fluid Applied Installer Training</div>
    </body>
    </html
    
    /**In my FTP drive--JQuery**/
    
     function showme(id) {
            var divid = document.getElementById(id);
            if (divid.style.display == 'block') divid.style.display = 'none';
            else divid.style.display = 'block';
        }

    [Please post code or markup snippets between backticks or use the code button. Your posted code may now have been permanently damaged by the forum's parser.]

  2. keesiemeijer
    moderator
    Posted 1 year ago #

    Don't put anything above the doctype, some browsers will behave differently if you do. Try to enqueue your scrips from your theme's functions.php file:
    http://codex.wordpress.org/Function_Reference/wp_enqueue_script
    http://codex.wordpress.org/Function_Reference/wp_enqueue_script#Load_script_from_theme_with_depends_on_WordPress_script

    And be aware that WordPress loads jQuery in "no conflict" mode:
    http://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_wrappers

  3. mbyrne
    Member
    Posted 1 year ago #

    Am I referencing the code correctly? It isn't working.

    I moved the following code into the functions.php file:

    <?php
    function my_scripts_method() {
    	wp_enqueue_script(
    		'SHOWME',
    		get_template_directory_uri() . '/js/SHOWME.js',
    		add_action('wp_enqueue_scripts', 'my_scripts_method');
    ?> 
    
    to my header and also tried to place it in my functions.php:
    <script type="javascript/text">
    var $j = jQuery.noConflict();
      $j(function showme(id)) {
            var divid = $j(document.getElementById(id));
            $j(if (divid.style.display == 'block') divid.style.display = 'none');
            $j(else divid.style.display = 'block');
        }
    		array('jquery')
    	);
    }
    </script>

    [Please post code or markup snippets between backticks or use the code button. Your posted code may now have been permanently damaged by the forum's parser.]

  4. Andrew Bartel
    Member
    Posted 1 year ago #

    You need to hook my_scripts_method() to wp_enqueue_scripts() outside of your function, otherwise nothing tells the function to run. Ex:

    add_action('wp_enqueue_scripts', 'my_scripts_method');
    function my_scripts_method() {
    wp_enqueue_script('SHOWME',get_template_directory_uri() . '/js/SHOWME.js');
    }

    Then, in SHOWME.js:

    jQuery(document).ready(function($)
    {
      $(function showme(id)) {
            var divid = $(document.getElementById(id));
            $(if (divid.style.display == 'block') divid.style.display = 'none');
            $(else divid.style.display = 'block');
        }
    		array('jquery')
    	);
    }
    });

    I didn't troubleshoot your js but it seems a little off. Is it accomplishing what you're trying to do?

  5. mbyrne
    Member
    Posted 1 year ago #

    I added your code to the header.php and then placed the SHOWME.js code directly into the functions.php file. It's still not working.

    When I plugged it into js bins it worked. I'm trying to create a onclick toggle that displays text below a line of text when you click on the first link of text.

    Model is from Stackoverflow.com:
    http://stackoverflow.com/questions/4672984/how-to-change-toggle-text-on-show-hide-using-javascript/4673081#4673081

  6. mbyrne
    Member
    Posted 1 year ago #

    Here is my page. I'm trying to hide and show the bulleted lists under each item on the page.

    http://aeaenergyefficientbuildings.org/course-list.html

  7. mbyrne
    Member
    Posted 1 year ago #

    Here's the html code:

    <a href="#"><h3>Air Barrier Association of America (ABAA) Certification Training</h3></a>
    
    <div id="widget" style="display: none;">Quality Assurance Program Administrator</div>
    <div id="widget" style="display: none;">Spray Polyurethane Installer Certification Training</div>
    <div id="widget" style="display: none;">Self Adhered & Fluid Applied Installer Training</div>

    [Please post markup snippets between backticks or use the code button. Your posted code may now have been permanently damaged by the forum's parser.]

  8. Andrew Bartel
    Member
    Posted 1 year ago #

    Ok, put the first part of my code in your functions.php file, and have SHOWME.js be its own file.

  9. mbyrne
    Member
    Posted 1 year ago #

    Thanks. I';ll try this.

  10. mbyrne
    Member
    Posted 1 year ago #

    The underlined text:>Air Barrier Association of America (ABAA) Certification Training is highlighted but the hidden text below it doesn't show when I click on this link.

Topic Closed

This topic has been closed to new replies.

About this Topic