We Keep Coding

wp_add_inline_script isn't adding anything to my page, can't figure out why

I want to add inline script to just a single page, so trying to add in the page template file. However, both placements of the code above or below the footer call results in nothing being outputted in the source.
I can't figure out how this is supposed to work, can anyone help?
** Page Template **
<?php
get_footer('blank');
function cardpay_demo_script() {
wp_add_inline_script(
'jquery',
'$(".btn-next").click(function() {
$(".nav-pills .active").parent().next("li").find("a").removeClass("disabled").trigger("click");
});'
);
}
add_action('wp_enqueue_scripts', 'cardpay_demo_script');
** Footer File **
<?php wp_footer(); ?>
</body>
</html>

You are placing the function on the wrong file.
The function should go on the theme's functions.php file and not any default template file or your custom template file.
The reason for this is that in WordPress; an Action is a PHP function that is executed at specific points throughout the WordPress Core and since your custom templates will be called way after the hook has been triggered the function will never actually run, so it won't print anything.
You can use is_page() or is_page_template() to determine if it is the page or page template you're looking for.
Here is some additional information on action hooks: https://codex.wordpress.org/Glossary#Action
add_action( 'wp_enqueue_scripts', function () {
if( !is_page_template('My Template') ) return;
if ( ! wp_script_is( 'jquery', 'done' ) ) {
wp_enqueue_script( 'jquery' );
}
wp_add_inline_script( 'jquery', '$(".btn-next").click(function() { $(".nav-pills .active").parent().next("li").find("a").removeClass("disabled").trigger("click");
});' );
});
or you can just print your scripts on the footer using the wp_footer hook. Just put this on your theme's functions.php file
add_action('wp_footer', function (){
if( !is_page_template('My Template') ) return;
?>
<script type="text/javascript">
jQuery(".btn-next").click(function() { jQuery(".nav-pills .active").parent().next("li").find("a").removeClass("disabled").trigger("click");
});
</script>
<?php
});

cdn is working fine but enqueue is not working

I am trying to include a jquery library in my code and I did this:
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.11.4/jquery-ui.js"></script>
This works perfectly fine and I got what I needed but then I try to enqueue wordpress's preloaded jquery library like this:
function my_switchbutton_function(){
wp_enqueue_script('jquery-ui-core');
wp_enqueue_script('jquery-effects-core');
}
add_action('admin_enqueue_scripts', 'my_switchbutton_function');
But this is not working I don't know why...I need to enqueue style too ?
versioning is same 1.11.4 in both cdn and preloaded js.
Is there any other script too that I need to enqueue ?

You need to define js filepath in the function
Example:
<?php
function wpb_adding_scripts() {
wp_register_script('my_amazing_script', get_template_directory_uri() .
'/js/amazing_script.js', array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );
?>
Replace get_template_directory_uri with get_stylesheet_directory_uri if you are using child theme and your file path is in child theme

Try this
add_action('wp_enqueue_scripts', 'myjs'); // add at front side
add_action('admin_enqueue_scripts', 'myjs'); // to add at admin side
function myjs() {
wp_enqueue_script('google-maps', '//ajax.aspnetcdn.com/ajax/jquery.ui/1.11.4/jquery-ui.js', array(), '3', true);
}

I hope this will help to solve your Question
<?php
function twentyseventeen_child_enqueue_scripts() {
wp_enqueue_script( 'jquery-js', get_stylesheet_directory_uri() . '/assets/css/jquery.min.js');
}
add_action( 'wp_enqueue_scripts', 'twentyseventeen_child_enqueue_scripts');
?>

jQuery(...). is not a function in Wordpress Custom Templates

I'm using the AnimatedModal JS library to allow users to login on my Wordpress site.
In my functions.php I have enqueued as follows:
function smallium__enqueue_scripts() {
//lets put in the animated modal
wp_enqueue_script( 'medium-modal', get_template_directory_uri() . '/js/animatedModal.min.js', array( 'jquery') );
wp_enqueue_style('animated-modal', '//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css');
wp_enqueue_script( 'medium-js', get_template_directory_uri() . '/js/medium-front.js', array( 'jquery','medium-modal' ) );
}
add_action('wp_enqueue_scripts', 'smallium__enqueue_scripts');
In the medium-front.js I call the animatedModal() function.
jQuery(document).ready(function($) {
jQuery("#login-anchor").animatedModal();
}
This works fine on most pages except for Custom Wordpress templates I get the error
Uncaught TypeError: jQuery(...).animatedModal is not a function
In the source code on all pages, the library is correctly encoded before I make the function call, so I'm not sure why only on custom templates this doesn't work.
I've also created an empty template file with only the header and footer included, to see if any code could cause the error, to no avail.
<?php
/* Template name: Write */
get_header(); ?>
<?php get_footer(); ?>

Your local animatedModal.min.js should be loaded before </body> instead of in the <head>, as documented here:
function smallium__enqueue_scripts() {
//lets put in the animated modal
wp_enqueue_style('animated-modal', '//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css');
wp_enqueue_script( 'medium-js', get_template_directory_uri() . '/js/medium-front.js', array( 'jquery','medium-modal' ) );
wp_enqueue_script( 'medium-modal', get_template_directory_uri() . '/js/animatedModal.min.js', array( 'jquery'),false, true );
}
add_action('wp_enqueue_scripts', 'smallium__enqueue_scripts');

Including typed.js in wordpress

I have been trying to add a typed.js plugin to one of the wordpress themes.
I put the typed.js in the "js" folder in the theme folder.
Then I edited the functions.php in the theme folder and added:
function typed_script_init() {
wp_enqueue_script( 'typedJS', get_template_directory_uri() . '/js/typed.js');
}
add_action('wp_enqueue_scripts', 'typed_script_init');
add_action('wp_enqueue_scripts', 'typed_init_in_footer');
function typed_init_in_footer() {
add_action('print_footer_scripts', 'typed_init');
}
function typed_init() { ?>
<script type="text/javascript">
$(function(){
$("#typed").typed({
strings: ["Are you Interested?"],
typeSpeed: 20
});
});
</script>
<?php }
I do have in one of my section in the theme:
<h1>
<span id="typed"></span>
</h1>
And when I launch my wordpress page it does not work.
I have been sitting on this for almost 3hours reading online tutorials about including javascript in wordpress and still nothing.
Is there anybody who can help me?
Thanks guys!

The proper way to do this would be to (1) include jQuery as a dependency (you haven't mentioned if you've included jQuery), (2) use noConflict wrappers:
function typed_script_init() {
wp_enqueue_script( 'typedJS', get_template_directory_uri() . '/js/typed.js', array('jquery') );
}
add_action('wp_enqueue_scripts', 'typed_script_init');
function typed_init() {
echo '<script type="text/javascript">
(function($){
// The `$` jQuery shortcut is now available to you
$(function(){
$("#typed").typed({
strings: ["Are you Interested?"],
typeSpeed: 20
});
});
})(jQuery);
</script>';
}
add_action('wp_footer', 'typed_init');
I've added the scripts to the wp_footer action hook...but it may be preferable to put those scripts in an external JS file, and also enqueue them in wp_enqueue_scripts, with typedJS as a dependency.

How do I put jQuery code in an external file in WordPress theme?

I am relatively new to Javascript/jQuery so please bear with me.
I'm designing a custom WordPress theme and I have been using jQuery to make some changes to the main navigation menu that is generated in my header file (header.php). I have been adding code like this inside the head tag:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script>
$(document).ready(function(){
$('nav').mouseover(function() {
// my mousecode here...
}); // end mouseover
}); // end ready
</script>
My question is simple really. My scripts have gotten so long that I want to move them to their own file (perhaps nav-mouse-events.js) and call them from within header.php. How do I do this? Is it as simple as putting the code inbetween the second script tags into a file named nav-mouse-events.js and then adding this to the head tag?
<script src="nav-mouse-events.js"></script>
Or do I need to do something more complicated? Do I need to call jQuery from the new external file or header.php?

You would put the scripts in a .js file and use wp_enqueue_script in functions.php to include them the proper way.
From the wordpress site:
<?php
function my_scripts_method() {
wp_enqueue_script(
'custom-script',
get_template_directory_uri() . '/js/custom_script.js',
array( 'jquery' )
);
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
?>

Add this line:
<script src="<?php echo get_bloginfo('template_url ');?>/nav-mouse-events.js"></script>
and save nav-mouse-events.js file with code:
$(document).ready(function(){
$('nav').mouseover(function() {
// my mousecode here...
}); // end mouseover
}); // end ready
in your template folder.