On change subscription does not work in RegisterAfterReady event

  • 27 June 2019
  • 8 replies
  • 34 views
allan
Userlevel 4
Badge +9

Hi everyone,


I have an issue that I really do not understand :

In my form, I have a control on which I need to bind an event handler on the change property :

NWF.FormFiller.Events.RegisterAfterReady(function () {
    console.log(NWF$(".ShareOverviewPanel .rpt_185_ISINcode"));
    NWF$(".ShareOverviewPanel .rpt_185_ISINcode").on("change", function () {
        RptLoadValues();
    });
});

My control exists in the first log, but the subscription on the 'change' is never active : RptLoadValues() is never called.
When I copy-paste the code inside the browser console, the event handler is bond, and I have no issue and everything works fine.

Code pasted in the browser console:

NWF$(".ShareOverviewPanel .rpt_185_ISINcode").on("change", function () {
    RptLoadValues();
});


I spent an enormous amount of time trying to figure out what's happening.

The form is quite big, I was thinking about a race issue (loading of asynchronous controls), but even with a 15 seconds, there's not avail.

Am I missing something here ?


@MegaJerk I know you excell in that kind of things ;)

8 replies

MegaJerk
Userlevel 5
Badge +14

so just to clarify. 

If you open the console and paste: 

NWF$(".ShareOverviewPanel .rpt_185_ISINcode").on("change", function () {
    RptLoadValues();
});

the Handler is bound to the control, and it works. Yes? 

What kind of control are we talking about here? From the looks of things, you're trying to target a Control inside of a Panel. Is this correct? 

Though I can't think of any particular reason why it wouldn't be working, perhaps a local test will provide some insight for me. I just need to know a few of the details. 


allan
Userlevel 4
Badge +9

The structure of my form is : A dropdown (lookup control) inside a repeating section inside a panel (hidden by default, because I use tabs in the form).

 

You're right, when I paste the code in the console (once the form is loaded), it is correctly bound and my event are catched correctly on the "on change".


I've made some tests on another site on the same farm and I did not have this issue.
I suppose this might be related to the size of the form (almost 10mb, I know...).

There's definitely something wrong with the form, but cannot figure out what.

 

E
Userlevel 5
Badge +14

are you sure the handler is not triggered?

could you try to add a console msg inside the handler before function call?

 

isn't it a problem problem within your function? (eg. it/the handler gets called on a different HTML element you might expect resp. it gets called when you set it up from console)

 

how do you show/hide the panel? rules, appearance settings, javascript,...?

 

 

try to clear out whole javscript code from the from settings, and try to (ideally) retype it, or copy&paste through a plaintext editor (notepad).

sometimes if you copy&paste piece of code from non plaintext sources it may happen that some nonprintable characters are copied over which breaks the code execution for no apparent reasons and no errors reported.

allan
Userlevel 4
Badge +9

Hi,

I have put a window.alert in my handler, and this is not triggered. The same code works on another form.
I can also affirm confirm that the control targeted is the right one, since launching the code manually works ;)
The panels are hidden via rules.

I always make sure to paste plain text (Ctrl + Shift + V on Firefox), so the issue is not in the code call.

I really think that there's something with the form itself, since this code works on smaller forms.

E
Userlevel 5
Badge +14

hopefully, I need not ask there are no errors reported on console while you load and run the form...

 

 

could you try with a code like following?

what output do you get?

 

NWF.FormFiller.Events.RegisterAfterReady(function () {
    console.log('in after ready: '+NWF$(".ShareOverviewPanel .rpt_185_ISINcode").length+' / '+(new Date()).toLocaleString());
    NWF$(".ShareOverviewPanel .rpt_185_ISINcode").on("change", function () {
        //RptLoadValues();
       console.log('in change handler: '+(new Date()).toLocaleString());
    });
});

 

what form mode do you experience the problem in?

what kind of a  'change' do you test with within repeater?

do you stop/breaks events bubling somewhere in your code?

do you assign classes to a panel and repeater in design configuration or with a code?

if you do that by design configuration - repeater control have several 'class' fields, which one exactly do you configure your custom class in?

 

allan
Userlevel 4
Badge +9

Hi Marian @emha 

I think I have solved my issue just a few minutes ago (I'm still testing).
I think my issue was that I was binding the event on a lookup control, that was being filtered (cascading dropdown). At the load of the form, the binding was correct, but as soon as you start filtering, the binding was gone. I suppose that the control is being replaced at runtime ?

The only dirty way I found was to re-apply the binding whenever there is a change in the container repeating section (not optimal at all, though).

NWF$(".rpt_ShareOverview").on("change", function () {
            console.log("Change happened");
            NWF$(".rpt_ShareOverview .rpt_185_ISINcode").on("change", repeaters.RptLoadValues);
});



To answer your questions :
- It's a classic form, since there's no clean way to have JS in responsive or universal forms.
- I've never have the "in change handler" since the control is not the same as when it was bound.
- The CSS class are assign via the Form Designer : Control CSS Class
- I do not prevent event from happening in any way.

I think my issue is solved, but I still do not know the proper way to bind event on cascading dropdown lists.

Thanks by the way !

E
Userlevel 5
Badge +14

indeed, the 'select' node, which control's class gets assigned to, is recreated when filter fires.

 

you could attach the handler to a parent node that do not get recreated, eg.

NWF$(".rpt_ShareOverview .rpt_185_ISINcode").closest('.nf-filler-control')....

 

you just need to be aware of the fact and adjust your handler code accordingly.

allan
Userlevel 4
Badge +9

Thanks Marian @emha , that did the trick.

It's a far better solution that the one I wrote. Silly me.

Reply


View our Community Site Map

Nintex Community Sitemap
Terms & ConditionsCookie settings