Skip to content

Loading…

When using with activeadmin: Uncaught TypeError: Cannot call method 'add' of undefined #440

Closed
bishma-stornelli opened this Issue · 5 comments

2 participants

@bishma-stornelli

I'm using active_admin which use formtastic and after modifying a field in the form I get Uncaught TypeError: Cannot call method 'add' of undefined in the javascript console.

I checked and the CDATA is present and also the //= rails.validations and //= rails.validations.formtastic.

I don't know too much about javascript so I'm having problems debugging it but here's the stacktrace:

Uncaught TypeError: Cannot call method 'add' of undefined active_admin.js:22020
window.ClientSideValidations.enablers.form.form.ClientSideValidations.addError active_admin.js:22020
window.ClientSideValidations.enablers.input._ref.element:validate:fail.ClientSideValidations active_admin.js:22081
window.ClientSideValidations.callbacks.element.fail active_admin.js:22445
window.ClientSideValidations.enablers.input._ref.element:validate:fail.ClientSideValidations active_admin.js:22080
jQuery.event.dispatch active_admin.js:3064
jQuery.event.add.elemData.handle.eventHandle active_admin.js:2682
jQuery.event.trigger active_admin.js:2947
jQuery.fn.extend.trigger active_admin.js:3605
jQuery.extend.each active_admin.js:612
jQuery.fn.jQuery.each active_admin.js:242
jQuery.fn.extend.trigger active_admin.js:3604
failElement active_admin.js:21930
executeValidators active_admin.js:21946
validateElement active_admin.js:21968
$.fn.isValid active_admin.js:21895
window.ClientSideValidations.enablers.input._ref.focusout.ClientSideValidations active_admin.js:22066
jQuery.event.dispatch active_admin.js:3064
jQuery.event.add.elemData.handle.eventHandle active_admin.js:2682
jQuery.event.trigger active_admin.js:2947
jQuery.event.simulate active_admin.js:3212
jQuery.each.handler

Lines near the error:

window.ClientSideValidations.enablers = {
    form: function(form) {
      var $form, binding, event, _ref;
      $form = $(form);
      form.ClientSideValidations = {
        settings: window.ClientSideValidations.forms[$form.attr('id')],
        addError: function(element, message) {
          return ClientSideValidations.formBuilders[form.ClientSideValidations.settings.type].add(element, form.ClientSideValidations.settings, message);
// HERE IS THE ERROR: Uncaught TypeError: Cannot call method 'add' of undefined (repeated 2 times)
        },
        removeError: function(element) {
          return ClientSideValidations.formBuilders[form.ClientSideValidations.settings.type].remove(element, form.ClientSideValidations.settings);
        }
      };
@bcardarella

Can you paste the full HTML pf the page?

@bishma-stornelli
<!DOCTYPE html><html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<link href="/assets/active_admin.css?body=1" media="screen" rel="stylesheet" type="text/css" /><link href="/assets/active_admin/print.css?body=1" media="print" rel="stylesheet" type="text/css" />    <script src="/assets/active_admin.js" type="text/javascript"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="EoOZT5S9Mn05ewzRGa0MqKcRB2WPpF2WMnleqJ6wZ0g=" name="csrf-token" />  </head>
  <body class="new users active_admin logged_in root_namespace">
    <div id="wrapper">
      <div id="active_admin_content" class="without_sidebar">
        <div id="main_content_wrapper">
          <div id="main_content"><form accept-charset="UTF-8" action="/users" class="formtastic user" data-validate="true" id="new_user" method="post" novalidate="novalidate"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="EoOZT5S9Mn05ewzRGa0MqKcRB2WPpF2WMnleqJ6wZ0g=" /></div><fieldset class="inputs"><ol><li class="string input required stringish" id="user_name_input"><label class=" label" for="user_name">nombre<abbr title="requerido">*</abbr></label><input id="user_name" maxlength="255" name="user[name]" type="text" />

</li><li class="string input required stringish" id="user_last_name_input"><label class=" label" for="user_last_name">apellido<abbr title="requerido">*</abbr></label><input id="user_last_name" maxlength="255" name="user[last_name]" type="text" />

</li><li class="email input required stringish" id="user_email_input"><label class=" label" for="user_email">correo<abbr title="requerido">*</abbr></label><input id="user_email" maxlength="100" name="user[email]" placeholder="correo@integra.la" type="email" />

</li><li class="select input optional" id="user_position_input"><label class=" label" for="user_position_id">cargo</label><select id="user_position_id" name="user[position_id]"><option value=""></option>
<option value="1">Diseñador 1</option></select>

</li><li class="select input required" id="user_status_input"><label class=" label" for="user_status">estado<abbr title="requerido">*</abbr></label><select id="user_status" name="user[status]"><option value="1">activo</option>
<option value="2">inactivo</option></select>

</li></ol></fieldset><fieldset class="buttons"><ol><li class="action input_action " id="user_submit_action"><input name="commit" type="submit" value="Crear usuario" /></li><li class="cancel"><a href="/users">Cancelar</a></li></ol></fieldset></form><script>//<![CDATA[
if(window.ClientSideValidations==undefined)window.ClientSideValidations={};if(window.ClientSideValidations.forms==undefined)window.ClientSideValidations.forms={};window.ClientSideValidations.forms['new_user'] = {"type":"ActiveAdmin::FormBuilder","inline_error_class":"inline-errors","validators":{"user[name]":{"presence":[{"message":"no puede estar en blanco"}],"format":[{"message":"debe contener solo letras o espacios","with":/^(?:\p{Alpha}|)*$/i}]},"user[last_name]":{"presence":[{"message":"no puede estar en blanco"}],"format":[{"message":"debe contener solo letras o espacios","with":/^(?:\p{Alpha}|)*$/i}]},"user[email]":{"length":[{"messages":{"maximum":"es demasiado largo (m\u00e1ximo 100 caracteres)"},"maximum":100}],"format":[{"message":"no es una direcci\u00f3n de correo electr\u00f3nico v\u00e1lida.","with":/^[A-Z0-9_\.%\+\-']+@(?:[A-Z0-9\-]+\.)+(?:[A-Z]{2,4}|museum|travel)$/i}],"presence":[{"message":"no puede estar en blanco"}],"uniqueness":[{"message":"ya est\u00e1 en  uso","case_sensitive":true}]},"user[status]":{"presence":[{"message":"no puede estar en blanco"}],"inclusion":[{"message":"no est\u00e1 inclu\u00eddo en la lista","in":[1,2]}]}}};
//]]></script></div>
        </div>
      </div>
      <div class="footer" id="footer">
        <p>Powered by <a href="http://www.activeadmin.info">Active Admin</a> 0.5.0</p>
      </div>
    </div>
  </body>
</html>
@bcardarella

It looks like ActiveAdmin defines its own FormBuilder wich inherits from Formtastic: https://github.com/gregbell/active_admin/blob/master/lib/active_admin/form_builder.rb#L2

Try adding this bit of JavaScript. It should load after the other rails.validations files have loaded:

$(function() {
   window.ClientSideValidations.formBuilders['ActiveAdmin::FormBuilder'] = window.ClientSideValidations.formBuilders['Formtastic::FormBuilder'];
});

This assumes there is nothing too crazy going on with the custom form builder that ActiveAdmin is using. Let me know if this does work and I'll re-open. I suspect what is necessary is a client_side_valdiations-active_admin plugin

@bishma-stornelli

Yes it works. You just have a typo after the =. It's ClientSideValidations instead of ClientSideValidaitons.

Thank you very much.

@bcardarella

@bishma-stornelli fixed, thank you

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.