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>');
			

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.

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).

When I take this file local and modify it to move these couple of elements outside the form tag, it works.

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

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.

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.

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”.