I’m currently experimenting with the early adopter version of APEX 4.2. I was really curious for the new features regarding mobile development so I started off building a small mobile application. Well, things started simple, but then got a little more complex along the way.

Don’t worry, I’m not going to bother you with all the functional requirements of my app. I’ll jump into the technical details straight away. So I have a list view region on my page holding a collection of orders. Each order in the list gets a specific background color depending on the value of a data attribute. This custom data attribute actually represents a status. No rocket science here. I simply created a JavaScript function which fires on page load and gives all orders a matching background color.

Furthermore, it’s also possible to tap on an order to change its status. The steps to accomplish this were also pretty straightforward thanks to a dynamic action that fires on a tap event and a true action that alters the data attribute and then updates the background color. The image below gives you a little more insight into the settings of the dynamic action.

dynamic action settings
dynamic action settings

All these functionalities worked fine until I tested out the search filter bar which I included as a feature in my list view region. The search functionality itself worked perfectly, but no background colors were applied. The reason why is pretty logical. My setOrderColors() JavaScript function gets fired when the following events occur:

  • on page load: this event is of no use at the current point since my search filter bar of type Server: Like & Ignore Case issues an AJAX request to update the list of orders on the fly.
  • on tap: it’s obvious that this event is not being fired.

The conclusion is that I needed a new event handler that fires when a search action is performed. I took a look at the generated HTML code of the search filter bar and noticed that it was no more than a simple form. Forms get submitted and I know the jQuery .submit() function so I thought that would do the job:

$("form.ui-listview-filter").submit(function() {
  setOrderColors();
});

I put the above code snippet in the Execute when Page Loads text area on page settings. I gave it a try, but still no colors were applied. The issue here is that the submit event gets fired before the AJAX request is executed. No luck with the .submit() function, so I browsed through the endless list of jQuery functions and stumbled upon the .ajaxComplete() function. I was absolutely sure that this function was the one I needed, even without reading the function description. I replaced .submit() with .ajaxComplete(), changed the selector to identify my list view and gave it another try.

$("ul.cstm-orders").ajaxComplete(function() {
  setOrderColors();
});

This time, the background colors were successfully applied. The .ajaxComplete() function might be helpful in other situations as well since Application Express uses AJAX in a fair number of page components.

Advertisements