Radio button set - JQuery UI, trying to disable?

[webasylum]

Hi elclanrs, Im hoping to use this, but looking to leave out the radio button configuration as I'd like to use a JQuery UI style set which fits with the rest of my site.

I have this piece of code for a 3x radio group which is causing an error in firebug a dumping the UI styling of the whole page:

<div class="formRowCont fieldcenter twk" id="jn">
                                            <div id="memstat">
                                                <input type="radio" id="radio1" name="memstat"  checked="checked" />
                                                <label for="radio1">Join as a Fan</label>
                                                <input type="radio" id="radio2" name="memstat" />
                                                <label for="radio2">Partner</label>
                                                <input type="radio" id="radio3" name="memstat" />
                                                <label for="radio3">Property Owner</label>
                                            </div>
                                        </div>

with a typical JQuery UI initialiser for the radio group: $( "#memstat" ).buttonset();

I presume this is where your option setting "disableCustom" comes in so that I can use the JQuery UI styling?

I have tried it at the following, but is it in the wrong place?

var options = {
        disableCustom: 'radiocheck',
        inputs: {
        'password': {
        filters: 'required pass'
        },
        'username': {
        filters: 'min max required username exclude',
        data: {
        exclude: users,
        min: 5,
        max: 16
        },
        errors: {
        min: 'Create a username with at least <strong>5</strong> characters.',
        max: 'No more than <strong>16</strong> characters allowed.'
        },
        'user_email': {
        filters: 'required email'
        },
        }
        }
        };

        //

        var $joinform = $('#join').idealforms( options );
        $joinform.focusFirst();

The firebug error reads: TypeError: d is undefined in JQueryUI _1.8.21

and if I comment out the radio group OR the Jquery UI initialisation on the radio set, it works fine.?

[webasylum]

Iv'e just made sure that I have a fresh download of the full plugin. Then tried referencing both the minified and the full JS files on separate occasions. I actually get two totally different error messages :)

ReferenceError: Utils is not defined

[Break On This Error]

var formId = '$'+ Utils.getObjSize($.idealforms.forms)

in the full version, and the following in the minified version:

TypeError: d is undefined

[Break On This Error]

...?"selectstart":"mousedown")+".ui-disableSelection",function(a){a.preventDefault(...

[elclanrs]

You only need to include the minified file js/min/jquery.idealforms.min.js. The other files are part of the project not meant to be loaded. There's a concat.sh file that joins everything together, there you can configure Uglify to not minify if you want. If you're using jQuery 1.8 you NEED to use jQuery UI 1.8.22 (not 1.8.21). Try the latest jQuery UI and see if it gives any problems. I'll do some tests with the radio buttons to see what's possible...

[webasylum]

ok, thanks for the feedback, yes, Im working with the minified file only, the LESS and the CSS. I see that even when getting the disableCustom: 'radiocheck' working, the script still inserts an ideal-wrap class in a span tag around the radio div set.

I am now upgrading from 1.8.21 to 1.8.22 and will reply my findings in here.

[webasylum]

Hi elclanrs, Nope... Using the new JQuery 1.8 with UI 1.8.22 performs as it should across the pages, but not on the ideal form page. Very close - There's no firebug error as it is leaving the inner html inputs alone and the UI is inserting the right controls.

This is what Im getting out of Firefox v14.01 and Chrome v21.0.1180.83:

<div class="formRowCont fieldcenter twk" id="jn">
        <span class="ideal-field ideal-radiocheck">
            <div id="memstat" class="ideal-wrap ui-buttonset">
                <input type="radio" checked="checked" name="memstat" id="radio1" autocomplete="off"
                    class="ui-helper-hidden-accessible"><label for="radio1" aria-pressed="false" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-left"
                        role="button" aria-disabled="false"><span class="ui-button-text">Join as a Fan</span></label><input
                            type="radio" name="memstat" id="radio2" autocomplete="off" class="ui-helper-hidden-accessible"><label
                                for="radio2" aria-pressed="true" class="ui-button ui-widget ui-state-default ui-button-text-only ui-state-active"
                                role="button" aria-disabled="false"><span class="ui-button-text">Partner</span></label><input
                                    type="radio" name="memstat" id="radio3" autocomplete="off" class="ui-helper-hidden-accessible"><label
                                        for="radio3" aria-pressed="false" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-right"
                                        role="button" aria-disabled="false"><span class="ui-button-text">Property Owner</span></label></div>
            <i class="ideal-icon ideal-icon-valid" style="display: none;"></i><i class="ideal-icon ideal-icon-invalid"
                style="display: none;"></i></span><span class="ideal-error" style="display: none;">
        </span>
    </div>

EDITED... as just downloaded the Github version and this is what we are currently getting.

[webasylum]

ok, further examination shows that even with the ideal-field ideal-radiocheck span class wrapper, the UI script is working. The idealforms.css is the only culprit with a few stray values stopping UI from rendering.

the problem style elements are: -webkitboxsizing; box sizing; border and paddings.

With a little bit of trial and error, that was solved by removing the background setting from the idealforms.css on line 13.

Thank you for ensuring the latest tweaks in Idealforms has no issues with JQuery UI's latest release.

Looks like I will be publicising how good your plugin is too ;)