Custom grid button to load ajax content depending on selected row

Question

I need to make a custom buttom in my grid that will open a modal which will render a select field with options depending on selected row.

So the user will select a row and click the button. The row id should be passed as an url parameter to my action so that it can make a query and populate the select field.

This is where I'm struggling:

navigatorExtraButtons="{
    honorarios:{
        title: 'Consultar honorários do processo',
        caption: 'H',
        icon: 'none',
        onclick: function(){
            var id = jQuery('#processoTable').jqGrid('getGridParam','selrow');
            if (id) {
                var ret = jQuery('#processoTable').jqGrid('getRowData',id);
                // need to pass ret.nrProcesso as param to the URL that will load content into the modal
            } else { alert('Please select a row.');}
        }
    },

With above code I can get the desired ID value from selected row. But I don't know how to assign it to a

<s:url... param

and populate a modal...

Thanks in advance.

rzb · Answer 1 · 2012-10-18T21:36:29.077

I've found a solution. Posting here hoping it might help someone else.

I've ended up using plain old jquery script to get the modal to show up instead of jquery-plugin.

Just construct your action url adding desired parameter and call an ajax function:

<sj:submit id="consulta_honorarios" value="Consultar Honorários" onClickTopics="honorarios" button="true"/>
<sj:dialog
    id="mydialog" 
    title="Consultar honorários" 
    autoOpen="false" 
    modal="true" 
    dialogClass="ui-jqdialog" 
/>

<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery("#consulta_honorarios").click(function(){
        var actionURL = '<s:property value="%{advprocselecturl}" />';
        var id = jQuery('#processoTable').jqGrid('getGridParam','selrow');
        if (id) {
            var ret = jQuery('#processoTable').jqGrid('getRowData',id);
            actionURL += '?nrProcesso=' + ret.nrProcesso;
            // alert('id='+ret.nrProcesso+' / actionURL='+actionURL);
            jQuery.ajax({
                url: actionURL
            }).done(function(data){
                jQuery('#mydialog').html(data).dialog('open');
            });
        } else { 
            jQuery('<div />').html('Por favor, selecione um registro.').dialog();
        }
    });
});

In your action you must declare a variable with the same name as your url parameter (nrProcesso in my case) with respective getter and setter.

Custom grid button to load ajax content depending on selected row

1 Answers1