CODEWITHSUNDEEP
oracle-apexoracle-apex-19.1
Coding Duchess
Coding Duchess

Reputation: 6909

Oracle APEX: calling an inline popup from a link column on a classic report

I am attempting to call javascript from a link column, that will open an inline popup by setting target URL for that column to:

javascript:$s("P3_ITEM","#COLUMN1#");openModal("MY_INLINE_POPUP");

and I am getting a javascript error: Uncaught Error: cannot call methods on dialog prior to initialization; attempted to call method 'open'. What am I doing wrong?

Upvotes: 2

Views: 12373

Answers (3)

Dan McGhan
Dan McGhan

Reputation: 4659

I was unable to reproduce the issue using the Inline Dialog template, however, I got the error with the Inline Popup template. Here are some steps that should help address the issue with either template...

  1. Change the column's Type from Link to Plain Text.

  2. Navigate to apex.oracle.com/ut > Reference > Button Builder. Use the button builder to build a button that you like, you can even style it like a link if you prefer that look over a button. Copy the HTML in the Entire Markup field and paste it in the HTML Expression field of the column. Here's an example:

    <button type="button" class="t-Button t-Button--link">My Button</button>

  3. Add two things to the markup from the previous step: 1) any column values needed as "data-" attributes and 2) a class to target in a Dynamic Action (I'll use my-custom-class). You're example needed the value from COLUMN1, so it would look like this after:

    <button type="button" data-column1="#COLUMN1#" class="t-Button t-Button--link my-custom-class">My Button</button>

  4. Create a new Dynamic Action. For the Dynamic Action, set Event to Click, Selection Type to jQuery Selector, jQuery Selector to .my-custom-class (from the HTML above), and Event Scope to Dynamic (to keep things working if the report refreshes). For the Action created by default, set Type to Execute JavaScript Code. Enter the following code in the Code field:

    $button = $(this.triggeringElement);
$s('P3_ITEM', $button.data('column1'));

    That will transfer the column value to the item as you were doing.

  5. Add an additional action to the Dynamic Action. Set Type to Open Region and then select the correct region to open.

That should do it. I couldn't find the openModal function documented anywhere. It may not be maintained anymore. The Dynamic Actions Open Region and Close Region are probably the best choices now. One could use the jQuery UI dialog API, but I'd advise against it.

For more info, check out this blog post from John Snyders: https://hardlikesoftware.com/weblog/2019/12/23/all-the-things-that-pop-up/ There's a demo app there that you can download and learn from.

Upvotes: 2

mohamad subhi bouchi
mohamad subhi bouchi

Reputation: 190

if you want to open a popup region then use this:

$("#POPUP_REGION_ID).popup("open");

Upvotes: 0

Lokesh Sharma
Lokesh Sharma

Reputation: 36

This error occurs when you do not set the template of the region which you are trying to call as modal/inline dialog..

You need to change the template of your region "MY_INLINE_POPUP" to Inline Dialog and you can do this by going to Region Settings -> Appearance -> Template and then select Inline Dialog...

One additional tip: while creating an inline dialog, you also need to take care of one more Region setting and i.e. Region Layout. Inside Region Layout, the position must be Inline Dialogs..

Screenshot

Upvotes: 2

Related Questions