Title: Does javascript work fully in Widget Option area?
Last modified: March 3, 2018

---

# Does javascript work fully in Widget Option area?

 *  [chz516](https://wordpress.org/support/users/chz516/)
 * (@chz516)
 * [8 years, 2 months ago](https://wordpress.org/support/topic/does-javascript-work-fully-in-widget-option-area/)
 * Hi All,
 * I have a number of options for my widget and I wanted to give a little popup 
   info for some of them. In my function form, I am trying the following code. But
   it does not work. However, if, instead of removing the class, I use “alert(‘test’);
   it works. So, javascript works. But for some reason I cant change this element.
   I have also tried with inline styling and jQuery but none seems to work. Ultimatley
   I plan on making this a popup with display attribute, but just trying to get 
   any js working. Am I doing something wrong or is this somehow blocked on the 
   Widget options page?
 *     ```
       _e('<style type="text/css">.chpop {color:blue;}</style>');
       _e('<div class="chpop" id="chPop">bbbbbbbbbbbbbbbbb</div>');
       //_e('<span onClick="document.getElementById(\'chPop\').style.color=\'green\';">xxxxx</span>');
       _e('<span onClick="document.getElementById(\'chPop\').classList.remove(\'chpop\');">xxxxx</span>');
       ```
   

Viewing 8 replies - 1 through 8 (of 8 total)

 *  Moderator [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * (@bcworkz)
 * [8 years, 2 months ago](https://wordpress.org/support/topic/does-javascript-work-fully-in-widget-option-area/#post-10035803)
 * The widget page doesn’t prevent JS. It actually needs it to let users drag widgets
   around. Your code might be corrupted by the gettext process invoked though _e()
   translation function, IDK. You shouldn’t be running HTML and especially JS through
   translation functions. Only run the actual text to translate through. Some embedded
   HTML tags like `<i>` are tolerated, but HTML containers do not belong. You should
   be doing something more like this:
    `echo '<span><!-- other HTML or JS etc. --
   >', __('Translate only me', 'my-domain'), '</span>';`
 * It’s also very poor practice to hardcode element IDs in widget output because
   the same widget can occur multiple times on a page. Multiple occurrences of an
   ID attribute will not validate and attempts of getElementById(() will fail to
   get any elements beyond the first occurrence. Perhaps it does not make sense 
   for your particular widget to have more than one instance, but it’s still possible.
 * The widget instance has its own internal ID that you could use in part to create
   unique ID attributes which the related JS can target. Or you could rely on jQuery’s`
   this` object to identify the element on which an event occurred. jQuery is loaded
   for the page anyway.
 * I don’t know that either issue I’ve pointed out is the cause of your problem,
   but they should be addressed. It might solve your problem, or not. If not, check
   your browser console for JS errors.
 *  Thread Starter [chz516](https://wordpress.org/support/users/chz516/)
 * (@chz516)
 * [8 years, 2 months ago](https://wordpress.org/support/topic/does-javascript-work-fully-in-widget-option-area/#post-10037831)
 * So then I would expect a complete echo to work as well, but it doesnt:
 *     ```
       echo '<style type="text/css">.chpop {color:blue;}</style>';
       echo '<div class="chpop" id="chPop">bbbbbbbbbbbbbbbbb</div>';
       echo '<span onClick="document.getElementById(\'chPop\').style.color=\'green\';">clickme</span>';
       ```
   
 * For the Ids, I am actually using: $this->get_field_id($fld);
 * I am assuming this is the correct Id, unique even with multiple widgets (where
   $this is the instance of the widget itself?)
 * Thanks for all of your help so far. Like I mentioned, I am new to PHP, so this
   is very helpful. My widget was coded in javascript an I’m really just wrapping
   the PHP around it. I only have two real issues remaining that cant get past. 
   This one, and a strange behavior in widget itself (which I will be posting about
   as well because I just cant make sense out of it).
 *  Thread Starter [chz516](https://wordpress.org/support/users/chz516/)
 * (@chz516)
 * [8 years, 2 months ago](https://wordpress.org/support/topic/does-javascript-work-fully-in-widget-option-area/#post-10038321)
 * It seems that javasrcript isnt working within the form tag that surrounds the
   elements you have chosen to be on your sidebar.
 * When I take this file local and modify it to move these couple of elements outside
   the form tag, it works.
 *  Thread Starter [chz516](https://wordpress.org/support/users/chz516/)
 * (@chz516)
 * [8 years, 2 months ago](https://wordpress.org/support/topic/does-javascript-work-fully-in-widget-option-area/#post-10038341)
 * OHHHHHH I didnt realize that there is another instance of the widget on the page
   under “Available Widgets”.
 * Ok, I think it all makes sense. Although I cant see where to get the id of the
   instance to use in my Id. I can get the Ids of the fields, but not $this.id
 *  Thread Starter [chz516](https://wordpress.org/support/users/chz516/)
 * (@chz516)
 * [8 years, 2 months ago](https://wordpress.org/support/topic/does-javascript-work-fully-in-widget-option-area/#post-10038564)
 * It seems my widget code exists twice on the widget admin page. Once under “Available
   Widgets” and once under “Widget Area”
 * I didnt expect all of the fields to exist under the “Available Widgets” section.
   Is this correct or is it an issue with my code?
 * I only noticed because of your previous comment about keeping the Ids unique.
   I thought I was but with these two instances, Im not sure how to make them unique–
   they seem to be exact duplicates of all of the fields.
 *  Moderator [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * (@bcworkz)
 * [8 years, 2 months ago](https://wordpress.org/support/topic/does-javascript-work-fully-in-widget-option-area/#post-10041134)
 * The widget’s ID is available as `$this->id`. I don’t know if it’s unique or even
   assigned on admin pages, it’s used on the front end. If you have trouble getting
   a unique ID in PHP, your best option is probably using a different element selector
   in JS such as .getElementsByClassName(). Then bind event listeners to every element
   so selected. Then the event handler can reference the item on which the event
   occurred with `this`.
 *  Thread Starter [chz516](https://wordpress.org/support/users/chz516/)
 * (@chz516)
 * [8 years, 2 months ago](https://wordpress.org/support/topic/does-javascript-work-fully-in-widget-option-area/#post-10041694)
 * Oh I think I was trying $this.id.
 * Ok, so one more thing. In my plugin file I have enqueued js and css files. But
   they dont seem to be available to the widget option area, only to the deployed
   widget on the WP content page.
 * What is the best way to use js and css in the widget option area. As of now, 
   I am just echoing at the start of my function form:
 *     ```
       echo <script>js functions</script>
       echo <style>css</style>
       ```
   
 * It works, Im just wondering if that is best practice.
 *  Moderator [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * (@bcworkz)
 * [8 years, 2 months ago](https://wordpress.org/support/topic/does-javascript-work-fully-in-widget-option-area/#post-10045664)
 * Ah, I kind of jumped between PHP and JS without warning. My bad. When you enqueue
   scripts, PHP values can be passed to JS with wp_localize_script(). Which brings
   us to your question.
 * The recommended practice for admin area JS and CSS is also to enqueue files. 
   The main difference is the action you hook for admin area files is “admin_enqueue_scripts”
   instead of “wp_enqueue_scripts”.

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Does javascript work fully in Widget Option area?’ is closed to new replies.

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 8 replies
 * 2 participants
 * Last reply from: [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * Last activity: [8 years, 2 months ago](https://wordpress.org/support/topic/does-javascript-work-fully-in-widget-option-area/#post-10045664)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics