0

I want to use Javascript Custom Forms (JCF) to get more attractive and consistent looking forms on my Drupal 7 site. I've got it working to a degree, however when the form changes with AJAX, the new form element does not have the JCF styling applied.

(E.g. if you have a form file upload, and you press the 'Remove' button, the form changes, without reloading the page, replacing the Remove button with the Browse and Upload buttons. But the JCF styling is not applied to these new buttons.)

This is what I have so far...

In the theme .info file:

stylesheets[all][] = jcf/dist/css/theme-minimal/jcf.css
scripts[] = jcf/dist/js/jcf.js
scripts[] = jcf/dist/js/jcf.file.js
scripts[] = jcf/dist/js/jcf.radio.js
scripts[] = jcf/dist/js/jcf.button.js
scripts[] = jcf/dist/js/jcf.select.js
scripts[] = jcf/dist/js/jcf.checkbox.js

In the theme .js file:

(function ($) {
    $(document).ready(function(){
        jcf.replaceAll();
     });
}(jQuery));

I need to call when the forms changes...

jcf.refreshAll();

I've read up about behaviours, but it seems to be all about creating your own module. Is there a simple way to call the above when the form changes?

1

You need a behaviour:

Drupal.behaviors.myBehavior = {
  attach: function(context, settings) {
    jcf.refreshAll();
  }
};

That will be called on DOM ready, and every time Drupal.attachBehaviors is invoked (i.e. after AJAX calls)

 

  • Thanks, that works (Though, turned out had to use jcf.replaceAll(), rather than jcf.refreshAll(), as couldn't get the latter to work for some reason. – spiderplant0 Dec 12 '18 at 16:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.