How to add inline javascript in a template

[Toon61]

Hi all,

I want to include a small javascript snippet in my template.
How to 'echo' just generic HTML tags, I know how to do that:
echo '<div class="something">';
etc. etc.
But now I want, in a similar fashion, include a small piece of javascript.
I just don't know how to 'echo' this, or use another way to include this.
At the moment I try to include a Caldera Form in my template that has a javascript snippet like this:

	jQuery( function($){
		$(document).on('click dblclick', '#fld_8704063_1', function( e ){
			$('#fld_8704063_1_btn').val( e.type ).trigger('change');
		});
	});

or this one:

	jQuery(function($){

		function init_rangeslider(){
			var el = $('#fld_774416_1'),
				rangeslider;
						if (el.is(':visible')) {
				if( !el.data( 'plugin_rangeslider' ) ){
					rangeslider = el.rangeslider({
						onSlide: function(position, value) {
														$('#fld_774416_1_value').html(value);
						},
						polyfill: false					});
					rangeslider.parent().find('.rangeslider').css('backgroundColor', rangeslider.data('trackcolor'));
					rangeslider.parent().find('.rangeslider__fill').css('backgroundColor', rangeslider.data('color'));
					rangeslider.parent().find('.rangeslider__handle').css('backgroundColor', rangeslider.data('handle')).css('borderColor', rangeslider.data('handleborder'));
				}
			}else{
				el.rangeslider('destroy');
			}
					}
				// setup tabs
		$(document).on('cf.pagenav cf.add cf.disable', function(){
			init_rangeslider();
		});
				// init slider
		init_rangeslider();

	});

How can i 'echo' this one out to get it working, and no. I don't want to use a shortcode to include the form because I want to be able to adjust some parameters in the different input fields based on variables I use.

Any help would be appreciated.

[Brad Dalton]

1. Wrap it in script tags like this:

 
<script>
  $(function() {

$(document).on('click dblclick', '#fld_8704063_1', function( e ){
			$('#fld_8704063_1_btn').val( e.type ).trigger('change');
		});

  });
  </script>

2. And close the php before the script and open it again after.

3. You'll also need to load jQuery

add_action( 'wp_enqueue_scripts', 'child_add_scripts' );
function child_add_scripts() {
    wp_enqueue_script( 'google-analytics' );
}

---

Tutorials for StudioPress Themes.

[Brad Dalton]

3. Should be

add_action( 'wp_enqueue_scripts', 'load_jquery_wpsites' );
function load_jquery_wpsites() {
    wp_enqueue_script( 'jquery' );
}

---

Tutorials for StudioPress Themes.

[Toon61]

Thanks Brad,

I'll give it a try.

[Brad Dalton]

I think i missed something!

---

Tutorials for StudioPress Themes.

[Author]

Posts