How to pass URI having parameter values with space? in jqgrid

Question

Main grid code is below

$(document).ready(function () {
    jQuery("#list5").jqGrid({
        url: 'server.php?mode=getBaseList',
        datatype: "json",
        colNames: ['Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Notes'],
        colModel: [{
            name: 'id',
            index: 'id',
            width: 55
        }, {
            name: 'invdate',
            index: 'invdate',
            width: 90
        }, {
            name: 'name',
            index: 'name',
            width: 100
        }, {
            name: 'amount',
            index: 'amount',
            width: 80,
            align: "right"
        }, {
            name: 'tax',
            index: 'tax',
            width: 80,
            align: "right"
        }, {
            name: 'total',
            index: 'total',
            width: 80,
            align: "right"
        }, {
            name: 'note',
            index: 'note',
            width: 150,
            sortable: false
        }],
        rowNum: 10,
        jsonReader{
         id:'id',repeatitems:false
        },
        rowList: [10, 20, 30],
        pager: '#pager5',
        sortname: 'name',
        autoencode: true,
        loadonce:true,
        sortable: true,
        viewrecords: true,
        sortorder: "desc",
        multiselect: false,
        subGrid: true,
        subGridRowExpanded: function(subgrid_id, row_id) { 
        var newID = $('#list5').getCell(row_id, 'id');
        var escapeID=escape(newID);

        var subgrid_table_id, pager_id; 
        subgrid_table_id = subgrid_id+"_t"; 
        pager_id = "p_"+subgrid_table_id; 
        $("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table><div id='"+pager_id+"' class='scroll'></div>"); 
        jQuery("#"+subgrid_table_id).jqGrid({ 
        url:"/portal/getSubGridData?id="+escapeID, 
        datatype: "json", 
        colNames: ['No','Item','Qty','Unit','Line Total'], 
        colModel: [ 
        {name:"num",index:"num",width:80,key:true}, 
        {name:"item",index:"item",width:130}
        ], 
        rowNum:20, 
        pager: pager_id, 
        sortname: 'num', 
        sortorder: "asc", 
        height: '100%' 
        }); 
        jQuery("#"+subgrid_table_id).jqGrid('navGrid',"#"+pager_id,{edit:false,add:false,del:false}) }
        caption: "Simple data manipulation"
    }).navGrid("#pager5", {
        edit: false,
        add: false,
        del: false
    });
});
jQuery("#list5").jqGrid('filterToolbar',{searchOperators : true});

How to pass URI having parameter values with space? I observe that '%20' or '_' is cancelled out in the JS. What should I do?

I tried : Step 1 : using id

id=10054898 104143018

var modifiedUrl=escape(id);

New url as below

my url is below

newUrl=/portal/getSubGridData?id=10054898%20104143018

---

Step 2: using name

name=John Williams

var modifiedUrl=escape(name);

New url as below

my url is

newUrl=/portal/getSubGridData?name=John%20Williams

---

Above url not post to server side, i have checked the firebug. The url not getting submitted.

Answer 1

I suppose that you use Subgrid as Grid and you create subgrid with the code like

subGridRowExpanded: function(subgridId, rowId) {
    var id = $.jgrid.stripPref(this.p.idPrefix, rowId);
    ...
    $subgrid.jqGrid({
        url: "/portal/getSubGridData?id=" + id,
    });
    ...
}

You should never add common string value as part of URL. Instead of that you should use either the standard JavaScript method encodeURIComponent

        url: "/portal/getSubGridData?id=" + encodeURIComponent(id),

or jQuery.param method

        url: "/portal/getSubGridData?" + $.param({id: id}),

Even more easy would be to use

        url: "/portal/getSubGridData",
        postData: {
            id: id
        }

In the case the id will be added to other parameter which will be sent to the server and which I hope you get and analyse on the server side. If you use HTTP GET then you access the parameter using $_GET in PHP. If you use mtype: "POST" then you access the parameter using $_POST (someting like $_POST["id"]). I'm not PHP developer, but I don't see why one could append some parameters to URL and to post another parameter using the standard way: inside of the body of HTTP POST request.

The last remark: I strictly recommend you don't use spaces in the id. Depend on which version of HTML you use it could be prohibited. I'd recommend you better to use underscore instead of space.