Fancy Select Fields

[voltagemark]

We’re currently using an embedded form and trying to use the .selectBoxIt jQuery library to style select drop downs. We’re currently receiving this in the console.log:

Uncaught Error: Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.
at r (v2.js?_=1491845138102:4)
at Object.o [as getID] (v2.js?_=1491845138102:3)
at Object.isRenderedByReact (v2.js?_=1491845138102:3)
at Object.getFirstReactDOM (v2.js?_=1491845138102:3)
at o (v2.js?_=1491845138102:3)
at r.perform (v2.js?_=1491845138102:4)
at Object.batchedUpdates (v2.js?_=1491845138102:2)
at Object.o [as batchedUpdates] (v2.js?_=1491845138102:3)
at dispatchEvent (v2.js?_=1491845138102:3)

The library hides the actual select and when you change the .selectBoxIt instantiated element it changes the actual select, but it fires that console.log error each time.

This is how we’re currently implementing this:

hbspt.forms.create( {
        portalId: DepositFixForm.portalId,
        formId: DepositFixForm.hubSpotFormId,
        css: '',
        cssRequired: '',
        cssClass: '',
        target: '#df-card-container',
        onFormReady: function ( $form, ctx ) {

            $( '.hs-form select' ).selectBoxIt();

            DepositFixForm.hubspotForm = $form;
            DepositFixForm.initStripeForm( $( '#df-card-container' ) );

            DepositFixForm.submitBtnText = $form.find( '.hs_submit .hs-button' ).val();
            $form.find( '.hs_submit' ).hide();
            $( '#df_buybtn' ).val( DepositFixForm.submitBtnText );
        },
        onFormSubmit: function( $form ) {
            return false;
        }
    } );

That is just a snippet, but should hopefully give you some ideas of what we’re doing.

Is there a better way to set this up with 3rd party JS libraries?

[voltagemark]

Is there anything we can do for this?

[3PETE]

@voltagemark What exactly are you trying to accomplish with this line -
$( '.hs-form select' ).selectBoxIt()
I’m not familiar with that library.

[voltagemark]

Simply making the selects look better from this library:

http://gregfranko.com/jquery.selectBoxIt.js/

[3PETE]

@voltagemark Thanks for the link. Just out of curiosity can you paste your tracking code that you are calling on the page? I am curious to see if it is the latest one or not.

[voltagemark]

It is the latest and grabbed it from the form embed.

[3PETE]

Are you having trouble selecting it? or just when you try and manipulate it to look better? Your code looks fine to me.

[voltagemark]

It looks like the Interval timer has nothing to do with it. What else could be done? I wish I could get a better error from this:

Uncaught Error: Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.
at r (v2.js?_=1492010030200:4)
at Object.o [as getID] (v2.js?_=1492010030200:3)
at Object.isRenderedByReact (v2.js?_=1492010030200:3)
at Object.getFirstReactDOM (v2.js?_=1492010030200:3)
at o (v2.js?_=1492010030200:3)
at r.perform (v2.js?_=1492010030200:4)
at Object.batchedUpdates (v2.js?_=1492010030200:2)
at Object.o [as batchedUpdates] (v2.js?_=1492010030200:3)
at dispatchEvent (v2.js?_=1492010030200:3)

[voltagemark]

Correct. I comment out the $( '.hs-form select' ).selectBoxIt(); then no errors appear. What can be done to work around this? Maybe unbinding all of the action on the selects, then instantiating the $( '.hs-form select' ).selectBoxIt(); would be best? Or maybe a Interval function that waits until the form loads then executing that? I thought that’s what that callback was for. I can’t be the only person who’s ever done this

[tjoyce]

Looks right to me… If you comment out the contents of onFormReady does the embed code work? Wondering if the object holding the portal and form id is actually giving the right values. If removing the contents of that don’t work, can you try manually adding the form and portal id strings?