Open modal dialog through JavaScript Oracle APEX

Question

I am trying to open a modal dialog page through a JavaScript redirect URL.

My code is like this:

$('#Subnet tr').each(function (i, row){
        var $row = $(row);
        var $hostname =  $row.find('[headers=Hostname]');
        if($hostname.text() == '-'){
           var url = "f?p="+$v('pFlowId')+":113:"+$v('pInstance')+"::::P113_SUBNET_ID:"+$row.find('[headers=ID]').text();
           $hostname.html("<a href='"+url+"'><span class='fa fa-plus-square-o'></span></a>");
           console.log($row.find('[headers=ID]').text()+ ' / '+$row.find('[headers=Address]').text());
        }

    });

but I get an error that says:

Can anyone tell me what I did wrong?

Or maybe another way to redirect to a modal dialog page？

Answer 1

You should use a Page Process to calculate an URL. This could be an Ajax Process:

DECLARE
    l_url varchar2(2000);
    l_app number := v('APP_ID');
    l_session number := v('APP_SESSION');

    l_item_name VARCHAR2(2000) := 'P27_XYZ';
BEGIN
    l_url := APEX_UTIL.PREPARE_URL(
        p_url => 'f?p=' || l_app || ':'||apex_application.g_x01||':'||l_session||'::NO::'||l_item_name||':'||apex_application.g_x02,
        p_checksum_type => 'SESSION');
    htp.p(l_url);
END;

Call that with this Javascript:

apex.server.process(
    'PREPARE_URL',                           
    {
        x01: 27, 
        x02: 'myvalue'
    }, 
    {
        success: function (pData)
        {           
            console.log(pData);
        },
        dataType: "text"                     
    }
);

You will get a javascript code back, and you need to call that. It'll calculate the correct Checksum and you can open the Dialog perfectly.

Answer 2

This would also be a working solution (slightly different).

Please note the call the apex.navigation.redirect to actually OPEN the dialog page.

function editAgenda (p_agenda_id) {
l_url = 'f?p=#APP_ID#:72:#SESSION#::NO:RP,72:P72_AGENDA_ID:#AGENDA_ID#';

l_url = l_url.replace('#APP_ID#',    $v('pFlowId'));
l_url = l_url.replace('#SESSION#',   $v('pInstance'));
l_url = l_url.replace('#AGENDA_ID#', p_agenda_id);

// execute PL/SQL API apex_uti.prepare_url to generate a valid Session State Protection checksum
apex.server.process(    
    'editAgendaDA',
    {x01: l_url},
    {success: function (pData) {           
            console.log(pData);
            // Call Modal Dialog Page
            apex.navigation.redirect(pData);
        },
        dataType: "text"                     
    }
  );

}

-- Process editAgendaDA (in Ajax Callback)

declare
    l_url varchar2(2000);   
    v_result varchar2(4000);
begin
    v_result := apex_util.prepare_url(apex_application.g_x01);
    htp.prn(v_result);
end;