Join 34,000+ subscribers and receive articles from our
blog about software quality, testing, QA and security.

OnChange event not getting fired after Template change


#1

I have created a script that would fire during an change event when a user changes a dropdown field.

This works great when first editing the testcase with the default (or saved) template for the testcase in question. However, if I change the Template to something different and then change the dropdown field; the .change event never seems to get fired.

This simple script shows the issue (hopefully). You’ll need to update it as necessary for the field names and project ids.

name: OnChange Event Bug
description: Shows problem with OnChange event and Template Changes
author: me
version: 1.0
includes: ^cases/add
excludes:

js:
$(document).ready(
    function() {

        // only run for the debugging project
        if (!uiscripts.context.project.id || uiscripts.context.project.id != 14) {
            return;
        }

        function displayAlert() {
            alert("The Function Was Called");
        }

        displayAlert();

        // the field name of the dropdown to fire the onchange event from
        $( "#custom_feature_scrum_team" ).change(
            function() {
                displayAlert();
            }
        }
    );

#2

Hi Jim,

Thanks for your posting. This happens because the controls are reloaded whenever you change the template and your JavaScript event handler would not longer apply. Do you see the option to implement your UI script without the change event? For example, maybe by registering to a different event like the form submit?

Cheers,
Tobias


#3

I’m a bit unsure on what you mean here?

If I need some the JavaScript event handler to apply regardless of the Template that is chosen how would I go about doing it then? Or are you saying that changing the template in effect “submits” the page - though in my simple test it didn’t appear to (though I could be doing it wrong).


#4

Hi Jim,

Changing the template does not submit the page but it reloads/replaces the form/form elements via JavaScript. This also clears the event handlers you registered previously and your event handlers would no longer be called as a result. An alternative might be to use a $(document).on event with a filter for your target element:

http://api.jquery.com/on/

Cheers,
Tobias