2

So I've got this "nice" Drupal 7 site and there is a node with a large (70is) fields that the user fills in. There is a script that hides and shows certain questions depending on the previous answer. It works fine in IE9, FF, Chrome and Safari but in IE8 it gives this error:

A script on this page is causing Internet Explorer to run slowly. If it continues to run, your computer might become unresponsive.

Stop running script? YES/NO

There are only around 10 lines of my code being run, the rest is written out by Drupal. Is there a way to split up the script or speed it up? Or should I avoid using Drupal to write javascript and custom code it?

EXAMPLE

In the node/add I have code like this:

$form['group_section_one']['field_permit_number']['#states'] = array(
        'visible' => array(
            ':input[name="field_do_you_have_a_permit[und]"]' => array('value' => '1'),
        )
    );

To show the "permit number" field if they answer Yes to "Do you have a permit?". I do a similar thing for another 60 fields sometimes they depend on up to 4 field values.

That then writes out javascript which equates to around 100 lines all up. I wouldn't have thought that would freeze up the browser though...

5
  • 1
    Show us the actual code and we can give you ideas on ways to improve/speed it up. – jfriend00 Jun 29 '12 at 6:26
  • @jfriend00 Edited with code example – Coomie Jun 29 '12 at 6:41
  • @jfriend00 That's PHP. It's editing the $form array which drupal interprets and outputs with javascript. – Coomie Jun 29 '12 at 6:58
  • We'd probably have to see the actual generated javascript to have any idea why the JS takes too long to execute. – jfriend00 Jun 29 '12 at 7:08
  • @jfriend00 I can't include all the javascript but the script can be viewed here: qeii.health.wa.gov.au/parkingpermit/apply . You'll have to agree to the terms before you can see the application. – Coomie Jun 29 '12 at 7:18
4
+100

The tough thing here is that IE 8 is notoriously poor in terms of JS performance (compared to recent versions of FireFox, Chrome, Safari and even IE), and there's not a whole lot you can do to fix that.

However, in this case, I would consider one of two options:

  1. Try to use different (faster) selectors besides :input[name="field_name[und]"] with Drupal's AJAX form states. If fields have IDs (they should, if the form is generated by Drupal), use the id instead, like field_name.
  2. (If the above doesn't work) Try coding the visibility yourself (forgoing Drupal's FAPI #states system). You can optimize selectors and overall memory usage and performance by hand-tuning the jQuery or JavaScript yourself.

I'm guessing following #1 could fix your problem, though. For more reading on jQuery selector performance, see:

However, for a form as large as yours, even hand tuning the JS might not be enough to get rid of that warning in IE. I have one form on a site I work on that always pops up that warning, and we sadly just have to tell users to ignore it. It's annoying, but it's acceptable to tell users to dismiss the warning in this particular case.

3
  • I'm going to give it to you. You were spot on with option 1. But I couldn't get it to work consistently with radio buttons because the event was only triggered when I click one of the radios and not when it changed. I got around it by doing this #edit_field_fieldname :input[name="field_name[und]"]' which sped up everything thanks to the way jQuery selectors work. – Coomie Jul 3 '12 at 7:20
  • 1
    Awesome! And yeah, radio buttons and checkboxes are always way harder to deal with, in my experience. – geerlingguy Jul 3 '12 at 17:11
  • This is a great tip, specially #1 since it doesn't require me to rewrite everything. I'm adding another bounty. Thanks a lot for this. – AKS Aug 23 '15 at 17:29
0

i have used multistep module Multi Step to split long form into shot forms step by step.

I hope this helps you.

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.