Using "Prompt LOV" to replace "Popup Key LOV"

Another post about jQuery in APEX! :) I am really happy to see the interest the APEX Community has for jQuery.

After reading Dan McGhan's blog post concerning jQuery Impromptu, I decided to try this jQuery extension. For my demo, I decided to replace a "Popup Key LOV (Displays description, returns key value)" with a "Prompt LOV".
I was able to reuse code from previous demos to accelerate the development.

Here is a working example of the Prompt LOV & Calendar demo.

How does it works?

1)I assume you check and understand these demos:
A)Popup in Report
B)AJAX request Page Report
C)jQuery Datepicker

Now... we can continue to the next step. :)

2)Replace the existing Popup LOV with a Prompt. The prompt will display a report from another page(in this case, it's the page 42). The report is requested using AJAX.

This is the JavaScript code you need:

$().ready(function() {
    //Replace existing POPUP-LOV
    $("#P41_DEPTNO_fieldset a")
    .attr('href','#')
    .click(function(e){
        e.preventDefault();
        
        //request DEPT Report
        $.post("wwv_flow.show", 
               {p_flow_id:$('#pFlowId').attr("value"),
                p_flow_step_id:"42",
                p_instance:$('#pInstance').attr("value"),
                p_request:""},
               function(data){
                    var startTag = '<apex:ajax>';
                    var endTag = '</apex:ajax>';
                    var start = data.indexOf(startTag);
                    
                    if (start > 0) {
                        data = data.substring(start+startTag.length);
                        var end = data.indexOf(endTag);
                        data = data.substring(0,end);
                    }
                    
                    //Prompt the user with the LOV
                    $.prompt(data,{callback: function(v,m){
                            //Put the original pFlowStepId value to submit the page and process it
                            $('#pFlowStepId').attr("value","41");
                        }
                    });
                    
                    //Workaround to make the report "pagination" and "order by" work
                    $('#pFlowStepId').attr("value","42");
               }
        );
    });
});

3)The LOV is a Report Region using an SQL Query.

This is the query used to populate the report:

SELECT  '<a href="#" onclick="select_lov_entry(this,'''||dname||''','''||deptno||''');">'||dname||'</a>' AS lov_entry
FROM    dept

This is the JavaScript code you need for selecting a value:

function select_lov_entry(pNd,x,y) {
    passBack(x,y);
    highlight_selection(pNd);
}

//Copy an existing function used by the original POP-UP LOV
//Small modifications are required (we are not referencing an opener window)
function passBack(x,y){
    if (document.forms["wwv_flow"].p_t09.length > 1){
        var l_field = document.forms["wwv_flow"].p_t09[8];
        l_field.value = x;
        document.forms["wwv_flow"].p_t08[8].value = y;
    }
    else{
        var l_field = document.forms["wwv_flow"].p_t09;
        l_field.value = x;
        document.forms["wwv_flow"].p_t08.value = y;
    }
    if(l_field.getAttribute('onchange') || l_field.onchange){
        l_field.onchange();
    }
    if(!(l_field.disabled || l_field.type == 'HIDDEN')){
        l_field.focus();
    }
}

function highlight_selection(pNd) {
    jQuery(pNd).parent().css({'background-color' : '#55AAFF'});
}

I have to rethink about how to passBack values from the Prompt LOV to the "P41_DEPTNO_fieldset" items. This is for another blog post. ;)

I hope you enjoy this demo!