jQuery modal dialog and jqGrid

Question

How can I use the Jquery modal confirmation with jqGrid? Say when I will submit my entries it will pop up a modal dialog and display the names with the message for sending to server..

My approach

$("#dialog-confirm").dialog({
            autoOpen:false,
            resizable:false,
            height:180,
            modal:true,
            buttons:{
                 'Confirm': function(){
                            var ids =jQuery("#list10").jqGrid('getGridParam','selarrrow');
                                $.ajax({
                                  type: "POST",
                                  url: "url&names="+ids,
                                  data: JSON.stringify(ids), 
                                  dataType: "json"
                            });
                                },
                            'cancel': function(){
                                    $(this).dialog('close');
                                    }
        }
        });
        });

my html :

<div id="dialog-confirm" title="Confirm">
        <p><span class="ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Are you sure want to cancel(or send this names)#names?</p>
    </div>

In that dialog box I need to send those names as well... but this approach will not give me the names from my grid which I selected to send it to server.

Erythropoiesis

Answer 1

The following code could do what you need

$("#wics").click( function(){
    var grid = jQuery("#list10");
    var ids = grid.jqGrid('getGridParam','selarrrow');
    if (ids.length>0) {
        var names = [];
        for (var i=0, il=ids.length; i < il; i++) {
            var name = grid.jqGrid('getCell', ids[i], 'Name');
            names.push(name);
        }
        //alert ("Names: " + names.join(", ") + "; ids: " + ids.join(", "));
        $("#names").html(names.join(", "));
        $("#dialog-confirm").dialog({
            height:280,
            modal:true,
            buttons:{
                'Cancel': function(){
                    $(this).dialog('close');
                },
                'Confirm': function(){
                    //alert("Confirm");
                    $.ajax({
                        type: "POST",
                        url:  "/cpsb/unprocessedOrders.do",
                        data: { method: "releaseTowics",
                            orderNum: JSON.stringify(ids),
                            names: JSON.stringify(names)
                        },
                        dataType: "json",
                        success: function(msg){
                            alert(msg);
                        },
                        error: function(res, status, exeption) {
                            alert(res);
                        }
                    });
                }
            }
        });
    }
});

The exact solution of cause will depends on your requirement on the server side. You can try this (without ajax request) here http://www.ok-soft-gmbh.com/jqGrid/DataToMultiSelect2.htm. Select some items and click "Get Selected" button. 

Dulin

@Oleg: How we can use jqGrid's default confirm dialog box ? – Mucro

@ITppl: Try the following code: $.jgrid.info_dialog("some title which could be <i>HTML</i> text", "some other <span style='color:red'>HTML</span> text", true);. You can use an additional parameter for additional options: see the source code – Dulin

.info_dialog is not populating at the center of the window like select a row modal. any way to do this? – Claymore

@CJRamki: You can use options of $.jgrid.info_dialog (4-th parameter): top, left, width, height and other to specify posizion and size of the info dialog. Alternatively you can use jQuery UI Position to change position of the dialog directly after its creating. See here. – Dulin