I really need to use a onload and I don't understand why it's not working. I made a code snippet to test it out and yet again found that it didn't work. Is wordpress doing this? Or am I making a mistake? I found that events such as onclick and onchange are working.
function do_onload_event()
{
return '<div id="loadevent" onload="do_show_event(event)"></div>' . '<script>
function do_show_event(event)
{
console.log("on load event");
}
</script>';
}
add_shortcode('on_load_event','do_onload_event');
IMHO - Calling onload from in-post shortcode could have many issues of timing or executions. Also, I am not sure that it is possible ot hook to onLoad() or onready() more than once so it would be more compatible..
Since we are dealing with wordpress, you could try another approach using jQuery:
function add_my_scripts() {
wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'my_init_script', 'MyScriptSource/etc', 'jquery', '1.0' ); // jQuery dependency
}
add_action( 'init', 'add_my_scripts' );
Then add another script that calls your method.
jQuery.noConflict();
jQuery(document).ready(function($) {
init();
});
You could of course try also for load event
jQuery(window).load(function($) {
// your function
});
or ..
(function($) {
// your function
})(jQuery);
Related
I have simple JavaScript function
function hide()
{
document.getElementById('div_sc_1').style.display = "none";
}
in my themefolder/js file I put
function add_scripts(){
wp_enqueue_script( 'quest',
get_stylesheet_directory_uri().'/js/quest.js',
array('jquery'),
'1.0.0',
false
);
}
add_action( 'wp_enqueue_scripts', 'add_scripts' );
in my function.php.
I can call my function from an <input type="submit" onClick="hide();">
BUT I want make something like that in my function.php
<?php
if(isset($_GET[xxx]))
{
<script>
hide()
</script>
}
?>
I don't understand why it doesn't work.
Since you are adding it directly in the dom, so It may run before the target element even exists, Javascript requires an element to available first in order to do its job.
You have to add it once the document is fully loaded so that it can work.
Maybe try this jQuery(document).ready(function($) { hide(); });
If you add it after the document is ready then Javascript will be able to find your element and execute related functions.
I am having troubles calling a function from a external loaded file.
I have search_form.php, from where i call the function, the client.js file where the functions are defined, and the plugin_functions.php file where i load the client.js file.
In plugin_functions.php file i have the following code:
console.log('loaded_client');
function load_client_scripts() {
wp_register_script('js-client', PLUGIN_URL.'includes/js/client.js',array('jquery'),false);
wp_enqueue_script( 'js-client' );
};
add_action( 'wp_enqueue_scripts', 'load_client_scripts' );
In client.js i define the function as follows:
(function($) {
function validateForm(){
console.log('Form validated');
};
})( jQuery );
Finally, in search_form.php i call the function with onclick:
<div onclick="validateForm()">
CLICK ME
</div>
Now, the js file is loading properly, because i get the console output 'loaded_client'. However, when i click the div, i get ReferenceError: validateForm() is not defined.
What am i doing wrong? It surely is a scope problem, but i cannot figure it out.
Please try to loading JS into footer.
Set footer true. I think it will work.
wp_register_script( 'js-client', PLUGIN_URL.'includes/js/client.js',array('jquery'),false,true);
(function($) {
window.validateForm = function(){
console.log('Form validated');
};
})( jQuery );
<div onclick="window.validateForm()">
CLICK ME
</div>
You are correct, in your example the scope is wrong because wrapped in (function($) { this anonymous function.
Edit for clarity: If you want it to be a globally accessible function you can attach it to the window object like on this example.
I need to run a script after a hook is fired in my functions.php file. Im using a wordpress mailchimp plugin, I need to do some text inserts and display = "none", etc, in the html:
add_action( 'mc4wp_form_success', function() {
// do something
echo '<script type="text/javascript">',
'console.log("starting....");', // this works
'document.getElementById("mailchimp-is-subscribed").style.display = "none";',
'document.getElementById("mailchimp-success-form").style.display = "block";',
'console.log("end");',
'</script>';
});
The error I got was style is null. I assume the document is not ready? $ does not work. Am I doing this wrong? I need to run that code after that hook is called. Putting the code in .js file works great. Thanks
You can add your code as an on DOMContentLoaded event:
document.addEventListener('DOMContentLoaded', function () { ..your_code... }, false);
Check this answer: pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it
I am new to jQuery and have tried to get scripts to work to no avail. I would like to simplify my script to just see that my theme is in fact recognizing my scriptfile.js
My js file is just:
var success = 'SUCCESS!';
jQuery('nav .home a').hover(function()
{
echo(success);
});
my functions.php file has this:
<?php
function add_my_script() {
wp_enqueue_script(
'preview',
get_template_directory_uri() . '/js/scriptfile.js',
array('jquery')
);
}
add_action( 'wp_enqueue_scripts', 'add_my_script' );
?>
My header.php contains:
<script type="text/javascript"><!--//--><![CDATA[//><!--
jQuery(document).ready(function(jQuery){
});
//--><!]]></script>
I am not getting any errors in firebug, but no output either.
Not sure if this is the problem but first of all your selector is not exactly right.
var success = 'SUCCESS!';
jQuery('nav .home a').hover(function(){ ... });
nav should be .nav for class or #nav for id
echo(success);
Unless echo() is a function somewhere it will not work. If you want to show an alert message use alert(success)
I believe what's happening is that your script file is being included fine but the way it's written the hover event attachment will happen before the DOM is ready. Try this, simply say alert(success); in your js file and see if the alert pops up. If it does, then wrap the hover event handler in a function in your script file and call that function from the document.ready function handler in your header.php. By the way, what's the echo function? Probably you are looking for alert.
I have been trying to get malihu's Simple jQuery fullscreen image gallery ( http://manos.malihu.gr/simple-jquery-fullscreen-image-gallery ) to work with my Wordpress theme, but for some reason I'm having trouble getting the script to run. I'm calling both the CSS and javascript normally as with other plugins in the functions.php file, but the javascript doesn't seem to be taking effect to make the gallery. I currently have the following code to call the CSS in the header and the javascript in the footer. Am I missing something?
function malihu_gallery() {
if (!is_admin()) {
// Enqueue Malihu Gallery JavaScript
wp_register_script('malihu-jquery-image-gallery', get_template_directory_uri(). '/js/malihu-jquery-image-gallery.js', array('jquery'), 1.0, true );
wp_enqueue_script('malihu-jquery-image-gallery');
// Enqueue Malihu Gallery Stylesheet
wp_register_style( 'malihu-style', get_template_directory_uri() . '/CSS/malihu_gallery.css', 'all' );
wp_enqueue_style('malihu-style' );
}
}
}
add_action('init', 'malihu_gallery');
I'm thinking that I may need to ready the script with something similar to the following, but not sure if I'm on the right track.
function gallery_settings () { ?>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#container').malihu_gallery();
});
</script><?php
Any help greatly appreciated!
Thanks
If you want any event to work in jQuery you will want it inside document ready. This will load it after the DOM is loaded and before the page content is loaded.
$(document).ready(function() {
// your stuff inside of here
});
Not sure based on what you have shown above but try some basic debugging, see if you can call functions when you paste your code into the console. Or if you want to create a fiddle I will take a look.