Cannot load my javascript into wordpress plugin

Question

I have a javascript function that responds to click events

The main issue is that I am calling the panel.js inside my plugin.php and nothing happens at all.

BEFORE:

panel.js

$(document).ready(function(){
    $(".next_panel").click(function(){
        //Do something here
        return false;
    });
}

This is the webpage (main.html) before I turned into plugin, notice how I load the JS, this works in my actual development.

<head>
    <script src="js/panel.js"></script>
</head>
<body>
    <a href="#" class="next_panel">
        <div class="block"></div>
    </a>
</body>

AFTER:

Now this works as a normal site, however loading this into wordpress as a plugin has caused me some issues, the main one here is that I cannot seem to load the javacript.

panel.js

function panel(){
    $(".next_panel").click(function(){
        //Do something here
        return false;
    });
}

This is the code in the plugin.php once I turned it into a plugin for wordpress, I can confirm wp_head is being called.

wp_enqueue_script('panel', VS_PATH.'js/panel.js', array('jquery'));

//This will run our function when wp_head is called.
add_action('wp_head', 'vs_script');

function vs_get_panel()
{
    $panels = '
    <body>
        <a href="#" class="next_panel">
            <div class="block"></div>
        </a>
    </body>';
    return $panels;
}

function vs_insert_panel($atts, $content=null)
{
    $panel = vs_get_panel();
    return $panel;
}

add_shortcode('v_panel', 'vs_insert_panel');

function vs_script()
{
    print '<script type="text/javascript" charset="utf-8">
                jQuery(document).ready(function($)
                {
                        $(\'.panel\').panel();//This is where my problem is
                });
    </script>';
}

If you look at the last block of code in function vs_script(), this is where I have been recommended the way to get my javascript into the wordpress page once it renders.

The plugin also has more to it, for example images and css, the thing is, all of that works, the css works fine, it's just the javascript that I cannot get working.

After Kats advice:

I still have no javascript loading, my click events are not being acted upon.

plugin.php

function my_js()
{
    wp_enqueue_script('panel', VS_PATH.'js/panel.js', array('jquery'));
}

add_action('admin_enqueue_scripts', 'my_js');
add_action('login_enqueue_scripts', 'my_js');

//This will run our function when wp_head is called.
add_action('wp_head', 'vs_script');

function vs_get_panel()
{
    $panels = '
    <body>
        <a href="#" class="next_panel">
            <div class="block"></div>
        </a>
    </body>';
    return $panels;
}

function vs_insert_panel($atts, $content=null)
{
    $panel = vs_get_panel();
    return $panel;
}

add_shortcode('v_panel', 'vs_insert_panel');

function vs_script()
{
    print '<script type="text/javascript" charset="utf-8">
                jQuery(document).ready(function($)
                {
                        $(\'.panel\').panel();//This is where my problem is
                });
    </script>';
}

panel.js

function panel(){
    $(".next_panel").click(function(){
        //Do something here
        return false;
    });
}

Answer 1

This wp_enqueue_script('panels', VS_PATH.'js/panels.js', array('jquery')); doesn't work alone.

Typically this is wrapped inside a function:

function my_js() {
    wp_enqueue_script('panels', VS_PATH.'js/panels.js', array('jquery'));
}

then:

add_action('admin_enqueue_scripts', 'my_js');
add_action('login_enqueue_scripts', 'my_js');

Cannot load my javascript into wordpress plugin

Question

1 answers

solution1
2 ACCPTED 2014-08-25 15:24:05

Cannot load my javascript into wordpress plugin

Question

1 answers

solution1 2 ACCPTED 2014-08-25 15:24:05

solution1
2 ACCPTED 2014-08-25 15:24:05