701 posts
  • Has been part of the Envato Community for over 6 years
  • Has referred 1+ members
  • Located in Canada
  • Has collected more than 1000 items on Envato Market
chrismccoy says

whats the best way to go about adding jquery variables in the source inside a widget?

3430 posts
  • Has sold $5,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Located in United States
  • Has been part of the Envato Community for over 4 years
+1 more
organicbee says

not sure if this is what your thinking but you could use http://codex.wordpress.org/Function_Reference/wp_localize_script

631 posts
  • Has referred more than 5000 members
  • Has sold $2M+ on Envato Market
  • Has collected 100+ items on Envato Market
  • Had an item featured in a magazine
+9 more
Kriesi says

3 options come to mind:

  • Use a hidden input field
  • Create a script tag and store your variable as javascript var
  • use the html 5 data attribute

If you need to send the data the hiden input is the way to go. If its a lot of data to read I would recommend the script tag. If you only need to store a setting or two I prefer the html5 data attribute for its convenient use with jquery. Any element is allowed to have any number of data attributes in this format: data-key=”value”. You could easily read and set that value with jquerys data method:

//get
var get = $(element).data('key');

//set
$(element).data('key', 'newValue')
http://api.jquery.com/data/
701 posts
  • Has been part of the Envato Community for over 6 years
  • Has referred 1+ members
  • Located in Canada
  • Has collected more than 1000 items on Envato Market
chrismccoy says
Kriesi said
3 options come to mind:
  • Use a hidden input field
  • Create a script tag and store your variable as javascript var
  • use the html 5 data attribute

If you need to send the data the hiden input is the way to go. If its a lot of data to read I would recommend the script tag. If you only need to store a setting or two I prefer the html5 data attribute for its convenient use with jquery. Any element is allowed to have any number of data attributes in this format: data-key=”value”. You could easily read and set that value with jquerys data method:

//get
var get = $(element).data('key');

//set
$(element).data('key', 'newValue')
http://api.jquery.com/data/

what i mean is taking values from a widget, and having it output as an option for a jquery plugin through wp_head, so it initlizes the values for the plugin being used

variable: 1, variable2: ‘string’,

etc

3430 posts
  • Has sold $5,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Located in United States
  • Has been part of the Envato Community for over 4 years
+1 more
organicbee says
chrismccoy said
Kriesi said
3 options come to mind:
  • Use a hidden input field
  • Create a script tag and store your variable as javascript var
  • use the html 5 data attribute

If you need to send the data the hiden input is the way to go. If its a lot of data to read I would recommend the script tag. If you only need to store a setting or two I prefer the html5 data attribute for its convenient use with jquery. Any element is allowed to have any number of data attributes in this format: data-key=”value”. You could easily read and set that value with jquerys data method:

//get
var get = $(element).data('key');

//set
$(element).data('key', 'newValue')
http://api.jquery.com/data/

what i mean is taking values from a widget, and having it output as an option for a jquery plugin through wp_head, so it initlizes the values for the plugin being used

variable: 1, variable2: ‘string’,

etc

use exactly what I posted here is a better example of its use http://ottopress.com/tag/wp_localize_script/ & http://www.ronakg.com/2011/05/passing-php-array-to-javascript-using-wp_localize_script/

Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes

by
by
by
by
by
by