WordPress theme changing jqxbutton theme

[sonicvizParticipant]

Hi,
I’ve got a problem using wordpress 2013 theme.

I’m using theme DarkBlue which works on all widgets except for buttons, which show up as the 2013 orange color.
If I change theme the JQX DarkBlue theme styles the button correctly.

Any idea why only the 2013 wordpress theme is screwing up the jqxbutton theme and how I can get around it?

Client wants 2013 theme.

[sonicvizParticipant]

Another issue with same button:

If I change it to type=’button’ the form input allows me to overtype the button text value, which is not expected button behavior

    $html .= "  <div>
                     <input type=\"submit\" name=\"compliance_button\" id=\"compliance_button\" value=\"" . __("Save", BWT_SLUG) . "\">
                </div>
		</form>

to 
    $html .= "  <div>
                     <input type=\"button\" name=\"compliance_button\" id=\"compliance_button\" value=\"" . __("Save", BWT_SLUG) . "\">
                </div>
		</form>

[DimitarParticipant]

Hi sonicviz,

Could you, please, examine the button with your browser’s developer tools (F12 in most cases) and share what classes are applied to it? Please make sure you have integrated jQWidgets with WordPress as shown in our tutorial on the matter: http://www.jqwidgets.com/jquery-widgets-documentation/documentation/wordpress/wordpress.htm.

I do not think your second issue is in any way related to the button being a jqxButton. If I have misunderstood, please clarify this point.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[sonicvizParticipant]

Hi Dimitar,

Here’s the generated code for the button.
All other widgets (calendar, dropdown, grid, charts) are working fine with theme…just not buttons

<input name=”measurement_button” type=”submit” id=”measurement_button” value=”Save Entry” role=”button” class=”jqx-rc-all jqx-rc-all-darkblue jqx-button jqx-button-darkblue jqx-widget jqx-widget-darkblue jqx-fill-state-normal jqx-fill-state-normal-darkblue” aria-disabled=”false” style=”width: 150px; height: 45px;”>

I’m developing a plugin so your wordpress guide is not appropriate.
I load the JQWidgets following the wordpress recommendations for loading custom scripts and css ie: at the top of the page via

// adds jQWidgets scripts
function add_jqwidgets() {
    // registers jQWidgets JavaScript files
    $jqxwidgets_version = "3.8.2";
    
    // register jQWidgets CSS files
    wp_enqueue_style('jqx.base', plugins_url('/jqx/css/jqx.base.css', __FILE__), array(), $jqxwidgets_version, 'all');
    wp_enqueue_style('jqx.web', plugins_url('/jqx/css/jqx.web.css', __FILE__), array(), $jqxwidgets_version, 'all');
    wp_enqueue_style('jqx.darkblue', plugins_url('/jqx/css/jqx.darkblue.css', __FILE__), array(), $jqxwidgets_version, 'all');
    
    
    wp_enqueue_script('jqxcore', plugins_url('/jqx/js/jqxcore.js', __FILE__), array('jquery'), $jqxwidgets_version, false);
    wp_enqueue_script('jqxvalidator', plugins_url('/jqx/js/jqxvalidator.js', __FILE__), array('jquery'), $jqxwidgets_version, false);
    wp_enqueue_script('jqxtabs', plugins_url('/jqx/js/jqxtabs.js', __FILE__), array('jquery'), $jqxwidgets_version, false);
    //Charts
    wp_enqueue_script('jqxchartcore', plugins_url('/jqx/js/jqxchart.core.js', __FILE__), array('jquery'), $jqxwidgets_version, false);
    //wp_enqueue_script('jqxchart', plugins_url('/jqx/js/jqxchart.js', __FILE__), array('jquery'), $jqxwidgets_version, false);
    wp_enqueue_script('jqxchartangeselector', plugins_url('/jqx/js/jqxchart.rangeselector.js', __FILE__), array('jquery'), $jqxwidgets_version, false);
    wp_enqueue_script('jqxdraw', plugins_url('/jqx/js/jqxdraw.js', __FILE__), array('jquery'), $jqxwidgets_version, false);
    //Dependancy: jqxcalendar needed for jqxdatetimeinput
    wp_enqueue_script('jqxcalendar', plugins_url('/jqx/js/jqxcalendar.js', __FILE__), array('jquery'), $jqxwidgets_version, false);    
    //wp_enqueue_script('jqxcombobox', plugins_url('/jqx/js/jqxcombobox.js', __FILE__), array('jquery'), $jqxwidgets_version, false);
    wp_enqueue_script('jqxdatetimeinput', plugins_url('/jqx/js/jqxdatetimeinput.js', __FILE__), array('jquery'), $jqxwidgets_version, false);
    //wp_enqueue_script('jqxnumberinput', plugins_url('/jqx/js/jqxnumberinput.js', __FILE__), array('jquery'), $jqxwidgets_version, false);
    //wp_enqueue_script('jqxpanel', plugins_url('/jqx/js/jqxpanel.js', __FILE__), array('jquery'), $jqxwidgets_version, false);
    wp_enqueue_script('jqxradiobutton', plugins_url('/jqx/js/jqxradiobutton.js', __FILE__), array('jquery'), $jqxwidgets_version, false);

    //DataTable
    wp_enqueue_script('jqxdata', plugins_url('/jqx/js/jqxdata.js', __FILE__), array('jquery'), $jqxwidgets_version, false);
    wp_enqueue_script('jqxbuttons', plugins_url('/jqx/js/jqxbuttons.js', __FILE__), array('jquery'), $jqxwidgets_version, false);  
    wp_enqueue_script('jqxscrollbar', plugins_url('/jqx/js/jqxscrollbar.js', __FILE__), array('jquery'), $jqxwidgets_version, false);    
    wp_enqueue_script('jqxlistbox', plugins_url('/jqx/js/jqxlistbox.js', __FILE__), array('jquery'), $jqxwidgets_version, false);
    wp_enqueue_script('jqxdropdownlist', plugins_url('/jqx/js/jqxdropdownlist.js', __FILE__), array('jquery'), $jqxwidgets_version, false);  
    wp_enqueue_script('jqxdatatable', plugins_url('/jqx/js/jqxdatatable.js', __FILE__), array('jquery'), $jqxwidgets_version, false);
    
    wp_enqueue_script('jqxnotification', plugins_url('/jqx/js/jqxnotification.js', __FILE__), array('jquery'), $jqxwidgets_version, false);
  
    wp_enqueue_script('globalize', plugins_url('/jqx/js/globalize.js', __FILE__), array('jquery'), $jqxwidgets_version, false);

    //Custom initialise script for out plugin setup
    wp_enqueue_script('intializeWidgets', plugins_url('js/initializeWidgets.js', __FILE__), array('jquery'), BWT_CURRENT_VERSION);
}

[sonicvizParticipant]

Also, as mentioned, the button issue is only with twenty thirteen theme. It shows blue properly with other themes.

[DimitarParticipant]

Hi sonicviz,

The classes that are applied (jqx-rc-all jqx-rc-all-darkblue jqx-button jqx-button-darkblue jqx-widget jqx-widget-darkblue jqx-fill-state-normal jqx-fill-state-normal-darkblue) are all added by jQWidgets. Are you sure there is not some inline style that overrides the darkblue theme’s colours?

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[sonicvizParticipant]

It happens with type=”submit” or type = “button”. If I use another type=”jqxwidget” , for example, it gets blue theme applied but then the input allows you to overwrite the button text.

Something in 2013 theme with button/submit I think.

If I had an inline style overriding why would the exact same code work properly if I change theme?

[DimitarParticipant]

Hi sonicviz,

This issue is far too specific for us to determine its source. We are also not sure if it does not occur only because of some quirk of the Twenty Thirteen theme. As a final suggestion, you can try using a <button></button> element instead of <input type="button" /> or <input type="submit" />.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[sonicvizParticipant]

Hi Dimitar,

>>As a final suggestion, you can try using a <button></button>

That kind of worked. It’s blue now, but the value text disappears.

This is driving me nuts…;-/

Edit:

Okay I can get it to work now with:
jQuery(\”#compliance_button\”).jqxButton({ theme: \”darkblue\”, width: ‘150’, height: ’45’});
jQuery(\”#compliance_button\”).val(‘Save’);

Thanks for help!

[DimitarParticipant]

Hi sonicviz,

The value text should be placed between opening and closing tags of the button (not using the value attribute). Please read more about the button tag here: http://www.w3schools.com/tags/tag_button.asp. Please also keep the discussion only about jQWidgets-related issues.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts