jQuery UI Widgets Forums Editors Button, RepeatButton, ToggleButton, LinkButton WordPress theme changing jqxbutton theme

This topic contains 9 replies, has 2 voices, and was last updated by  Dimitar 7 years, 8 months ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
  • WordPress theme changing jqxbutton theme #75734

    sonicviz
    Participant

    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.

    • This topic was modified 7 years, 8 months ago by  sonicviz.
    WordPress theme changing jqxbutton theme #75741

    sonicviz
    Participant

    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>
    
    WordPress theme changing jqxbutton theme #75745

    Dimitar
    Participant

    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/

    WordPress theme changing jqxbutton theme #75749

    sonicviz
    Participant

    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);
    }
    WordPress theme changing jqxbutton theme #75754

    sonicviz
    Participant

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

    WordPress theme changing jqxbutton theme #75757

    Dimitar
    Participant

    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/

    WordPress theme changing jqxbutton theme #75763

    sonicviz
    Participant

    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?

    WordPress theme changing jqxbutton theme #75764

    Dimitar
    Participant

    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/

    WordPress theme changing jqxbutton theme #75768

    sonicviz
    Participant

    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!

    • This reply was modified 7 years, 8 months ago by  sonicviz.
    WordPress theme changing jqxbutton theme #75771

    Dimitar
    Participant

    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/

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.