Passing $this->get_field_name() to javascript

by

The Problem

So I figured out what the problem was. In the statement below, jQuery was grabbing the first element with the id of #order_field_name. 

var widget_field_name = $( '#order_field_name' ).attr( 'field_name' );

As it turns out, there were actually two elements with that id. The first element with this id is the widget in the Available Widgets section. This is the section where you click & drag the widget to a sidebar. This is element the jQuery selector was returning to me.

The widget name and description.

And the markup:

enter image description here

The Solution

I had a click listener that was dynamically adding hidden input boxes with the field name.
So, I used jQuery’s tree traversal methods to go back up to widget’s form element and traverse back down to the element with the #order_field_name id. From there, I grabbed the field_name attribute, which has the correct field_name. 

$( 'a.add-schedulable' ).click( function( evt ) {

  // ... code omitted ...

  var widget_field_name = $( this ).parents( 'form' ).find( '#order_field_name' ).attr( 'field_name' );

   // ... code omitted ...
});

From there, I used a bit of javascript & jQuery to create a hidden input element with the desired attribute, which looks something similar to this:

<input 
  type="hidden" 
  name="widget-hours-widget[3][order][]" 
  value="L13">