Recently at a client site I ran into a strange issue. There was an APEX page where you can set some parameters and then a report would refresh according these new settings. But the strange thing was: Sometimes it worked perfectly, but sometimes it didn't. In the latter case one or more of the parameters seem discarded... WTF ??
So I dived into it and looked at the code. The parameter / refresh mechanism was implemented using a Dynamic Action as the picture below.
So, setting the parameters was done using a JavaScript call. This was a simple "$.post" call to a PL/SQL procedure sending over some screen values. So what could possible be wrong here .... ???
<< think for a minute >>
If I run the page and looked at the network traffic going on when I was changing parameters, I got this result:
So the JavaScript "post" call - the upper one - finished after the refresh action! Both actions ran in parallel! Because JavaScript is (by default) ASYNCHRONOUS. It runs when it can. So sometimes the "post" action would finish before the refresh and the result would be ok. Sometimes it would finish "too late" and the result would not be ok.
Now we know what the problem is, how can we solve it?
The first option might be to change the JavaScript call to a PL/SQL call and check the "Wait for Result" option. When that's checked the processing will hold until the PL/SQL call is finished. But now an then it might be cumbersome to pass values from your page to PL/SQL if they're not "regular" form items (as in this case).
As an alternative you could use the jQuery.ajax() call instead of the "post". The "ajax" function has an "async" setting. Switching this to true will work as well. But this setting is deprecated as of jQuery 1.8. So that's not the way forward.
In this case the proper way is to use the success callback option of the "post" call to issue the next (refresh) action. In code that looks like:
$.post( "ofw_ajax.set_value"
, { param1:$v("pInstance")
, param2:"abc"
, param3:"filter"
, param4:"P336_STR_NR"
, param5:$(this.triggeringElement).attr("id").substr(10)
, param6:($(this.triggeringElement).prop("checked"))?1:0
}
, function( data )
{ apex.event.trigger('#myRegion', 'apexrefresh');
}
);
Another option is to chain the done() function to the "post":
$.post( "ofw_ajax.set_value"
, { params :...
}
).done(function(){apex.event.trigger('#myRegion', 'apexrefresh');});
I noticed no difference in behaviour in both options, but there might be some subtle differences. Please post them in the comments if you know them.
After implementing these changes, the network looks like this, so both actions are processed synchronously:
And of course this resulted in the correct - and reliable - behaviour!
So if you develop in APEX and you need to use JavaScript, please understand how JavaScript works. And now - and use - your tools to check whether the result works the way it should.
Comments