Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Does not work with bootstrap form html layout #108

Closed
coderdave opened this issue Oct 21, 2013 · 3 comments · May be fixed by #113
Closed

Does not work with bootstrap form html layout #108

coderdave opened this issue Oct 21, 2013 · 3 comments · May be fixed by #113
Labels
invalid

Comments

@coderdave
Copy link

For example, if I change the select box html to:

  <div class="control-group">
    <label for="cc_type">Card Type</label>
      <div class="controls">
        <select id="card_type">
          <option value="">...</option>
          <option value="visa">Visa</option>
          <option value="discover">Discover</option>
          <option value="mastercard">MasterCard</option>
          <option value="maestro">Maestro</option>
          <option value="jcb">JCB</option>
          <option value="unionpay">China UnionPay</option>
          <option value="amex">American Express</option>
          <option value="dinersclubintl">Diners Club</option>
        </select>
      </div>
  </div>

I get the following error:
Uncaught TypeError: Cannot read property 'length' of undefined

It would be nice if the no-js html was customizable so that the fallback form will look decent in bootstrap (or whatever framework one might be using).
@kenkeiter
Copy link
Owner

The issue that you're encountering is that you've changed the the select element's id attribute without letting Skeuocard know about it. When you instantiate a new Skeuocard instance, you should provide the typeInputSelector a value of something like: '[name="cc_type"]'.

The only thing you need to do is ensure that all of the required fields are within a containing element of some sort, and that the containing element is passed to Skeuocard upon instantiation.

As a side note, you can find this information under the Changing Underlying Value Selectors header in README.md.

@coderdave
Copy link
Author

Sorry, I should have shown the default layout because I'm using custom fields.

It also breaks when using the default field names:

  <div class="control-group">
    <label for="cc_type">Card Type</label>
    <div class="controls">
      <select name="cc_type">
        <option value="">...</option>
        <option value="visa">Visa</option>
        <option value="discover">Discover</option>
        <option value="mastercard">MasterCard</option>
        <option value="maestro">Maestro</option>
        <option value="jcb">JCB</option>
        <option value="unionpay">China UnionPay</option>
        <option value="amex">American Express</option>
        <option value="dinersclubintl">Diners Club</option>
      </select>
    </div>
  </div>

The error occurs specifically on this line:
https://github.com/kenkeiter/skeuocard/blob/master/javascripts/skeuocard.js#L172

@leek leek mentioned this issue Dec 10, 2013
Open
cvrabie added a commit to cvrabie/skeuocard that referenced this issue Feb 17, 2014
@cvrabie
This is basically a copy of kenkeiter@a40ece6#diff-0 with the compile…
00985a4 
…d changes included.

Since skeuocard basically works only for IE10+ we almost always have to provide a good no-js alternative. In order to style the inputs we will often include them in divs or other containers which will be removed by the initialisation JS. Thanks @leek for the fix.
Refs kenkeiter#103 kenkeiter#101
Fixes kenkeiter#108
cvrabie added a commit to cvrabie/skeuocard that referenced this issue Feb 17, 2014
@cvrabie
Since skeuocard basically works only for IE10+ we almost always have …
24a251f 
…to provide a good no-js alternative. In order to style the inputs we will often include them in divs or other containers which will be removed by the initialisation JS. Thanks @leek for the fix.

This is basically a copy of kenkeiter@a40ece6#diff-0 with the compiled changes included.
Refs kenkeiter#103 kenkeiter#101
Fixes kenkeiter#108

Conflicts:
	javascripts/skeuocard.js
	javascripts/skeuocard.min.js
	javascripts/src/Skeuocard.coffee
cvrabie added a commit to cvrabie/skeuocard that referenced this issue Feb 17, 2014
@cvrabie
Fix input sweep
e4f44ba 
Since skeuocard basically works only for IE10+ we almost always have to provide a good no-js alternative. In order to style the inputs we will often include them in divs or other containers which will be removed by the initialisation JS. Thanks @leek for the fix.
This is basically a copy of kenkeiter@a40ece6#diff-0 with the compiled changes included.
Refs kenkeiter#103 kenkeiter#101
Fixes kenkeiter#108
@cvrabie cvrabie mentioned this issue Feb 17, 2014
Closed
@MatayoshiMariano
Copy link

It happens the same to me, any solution?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
invalid
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Allow any DOM structure
Fix input sweep cvrabie/skeuocard
3 participants
@kenkeiter @coderdave @MatayoshiMariano