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

    (@bcworkz)

    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

    (@chz516)

    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

    (@chz516)

    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

    (@chz516)

    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

    (@chz516)

    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

    (@bcworkz)

    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

    (@chz516)

    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

    (@bcworkz)

    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.