javascript - How to perform ajax call and redirect to other page if clicked in free jqgrid column

Question

I'm looking for a way to perform "Add to cart" ajax call to pass product code (row id) and quantity from other columns in clicked row and redirect to cart page if clicked in jqgrid column.

According to https://github.com/free-jqgrid/jqGrid/wiki/improvement-of-formatter:-"showlink"

showlink formatter is improved so I tried to use it.

I tried colmodel

{"label":"Add to cart",
"name":"Addtocrt_addtocrt","search":false,"sortable":false,
"viewable":false,"formatter":"showlink","formatoptions":{"showAction":addToCartOnClick
}}

and method

function addToCartOnClick(rowId, iRow, iCol, cellValue, e) {
    var 
     $quantity = $('#' + $.jgrid.jqID(rowId) + '>td:nth-child(' + (iCol + 1) + ')'),
     quantityVal;
    if (iCol < 0) {
        quantityVal = 1;
    } else
        if ($quantity.find('>input').length === 0) {
            quantityVal = $quantity.text();
        }
        else {
            quantityVal = $quantity.find('>input').val();
        }
    window.location = 'Store/AddToCart?' + $.param({
        id: rowId,
        quantity: quantityVal
    });
}

addToCartOnClick is not called in jree jqgrid.

In jqgrid 4.6 dynamiclink formatter

onClick=addToCartOnClick 

worked as described in How to pass data to url from jqgrid row if hyperlink is clicked

In free jqgrid addToCartOnClick is also not called from dynamicLink formatter.

How to call method and get column values from clicked row in free jqgrid?

Answer 1

showAction can be used to set the part of URL only. It you want to use the option then you have to use javascript: prefix (see the answer) to start addToCartOnClick which mast be defined as the global function.

The better would be to use new option onClick in formatoptions of formatter: "showlink". I made the corresponding changes of the code of free jqGrid directly after reading of your question. You should refresh the sources which you use from GitHub. Now you can use

{name: "Addtocrt_addtocrt", label: "Add to cart",
    search: false, sortable: false, viewable: false,
    formatter: "showlink",
    formatoptions: {
        onClick: function (options) {
            // object options contains properties, which could be helpful
            //    iCol - index of the column in colModel
            //    iRow - index of the row
            //    rowid
            //    cm - element of colModel
            //    cmName - the same as cm.name
            //    cellValue: the text inside of `<a>`
            //    a - DOM element of clicked <a>
            //    event - Event object of the click event
            location.href = "http://www.google.com/";
            return false; // it's important to suppress the default a action
        }
    }}