How to write 'onclick' function for different rows to display different 'popups'

Question

        <!DOCTYPE html>
        <html lang="en">
        <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <meta charset="utf-8">
        <title>Index</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="css/bootstrap.css" rel="stylesheet" media="screen" type="text/css">
        <link href="css/cerulean.css" rel="stylesheet" media="screen and (min-width: 37.5em)" type="text/css">
        <link href="css/custom.css" rel="stylesheet" media="screen" type="text/css">
        <link href="css/smoothness/jquery-ui-1.10.4.custom.css" rel="stylesheet" media="screen" type="text/css">
        <link href="css/ui.jqgrid.css" rel="stylesheet" media="screen" type="text/css">
        <script type='text/javascript' src="js/respond.js"></script>
        <script src="js/jquery-1.10.2.js"></script>
        <script src="js/jquery-ui-1.10.4.js"></script>
        <script src="js/grid.locale-en.js"></script>
        <script src="js/jquery.jqGrid.min.js"></script>

        <script type="text/javascript"> 
        /////////////////UPCOMING RECORD DATE/////////////////

        $(function () {
            'use strict';
            var mydata = [
                    {cusip: "1234567890123", oid_type: "F", oid_type_desc: "TIPS"},
                    {cusip: "1234567890", oid_type: "S", oid_type_desc: "NQSI"},
                    {cusip: "1234567", oid_type: "C", oid_type_desc: "CPDI"}

                ],
                $grid = $("#myOID"),
                viewParam = {
                    bSubmit: "Save and Close",
                    recreateForm: true,
                    beforeShowForm: function ($form){
                        $form.find("td.DataTD").each(function () {
                            var html = $(this).html();  // &nbsp;<span>&nbsp;</span>
                            if (html.substr(0, 6) === "&nbsp;") {
                                $(this).html(html.substr(6));
                            }

                        });
                    }
                };

            $grid.jqGrid({
                datatype: 'local',
                data: mydata,
                colNames: ["CUSIP", "OID Code", "OID Type Description"],
                colModel: [
                    {name: 'cusip', align: 'left', width: 120, sorttype: 'text', index: 'cusip'},
                    {name: 'oid_type', align: 'left', width: 90, sorttype: 'text', index: 'oid_type'},
                    {name: 'oid_type_desc', align: 'left', width: 440, sorttype: 'text', index: 'oid_type_desc'},
                ],
                rowNum: 15,
                rowList: [15],
                pager: '#pager1',
                gridview: true,
                autoWidth: true,
                //editable: true,
                rownumbers: false,
              //  onSelectRow: function (id) {
            //        $(this).jqGrid('viewGridRow', id, viewParam);
             //   },
                sortname: 'invdate',
                viewrecords: false,
                sortorder: 'desc',
                width: 650,
                shrinkToFit: false,
                height:"auto"
            });
        });
        /////////////////UPCOMING RECORD DATE ENDS/////////////////  



        </script>

        </head>

        <body>

        <div class="row" id='oid_index_jqgrid'>
        <div class="col-xs-6 oid_index_jqgrid_col">
        <div class="col-md-6 oid_index_jqgrid">
            <table id="myOID"></table>
        <div id="pager1"></div> 
        </div>
        </div>

        </div>

        <div class="modal fade" id='TIPS'>
        <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title">TAXBLE STRIP</h4>
          </div>
          <div class="modal-body">
            <form role="form">
            <div class="row">
            <div class="col-md-6">
                   <div class="form-group">
                    <label for="selectUser" class="CUSIP_PageTitle Inner_Titles">OID Type</label>
                    <select class="form-control CUSIP_Form_Control">
                      <option>A</option>
                      <option>B</option>
                      <option>C</option>
                      <option>D</option>
                      <option>E</option>
                    </select>
                    </div>
                    </div>
                    <div class="col-md-6">
                    <div class="form-group">
                    <label for="selectUser" class="CUSIP_PageTitle Inner_Titles">Issue Date</label>
                    <input type="text" class="form-control CUSIP_Text_Input calender_icon">
                    </div>
                    </div>
                    <div class="col-md-6">
                    <div class="form-group">
                    <label for="selectUser" class="CUSIP_PageTitle Inner_Titles">Maturity Date</label>
                    <input type="text" class="form-control CUSIP_Text_Input calender_icon">
                    </div>
                    </div>
                    </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default popup_close" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->

        <div class="modal fade" id='NQSI'>
        <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title">TAXBLE STRIP</h4>
          </div>
          <div class="modal-body">
            <form role="form">
            <div class="row">
            <div class="col-md-6">
                   <div class="form-group">
                    <label for="selectUser" class="CUSIP_PageTitle Inner_Titles">OID Type</label>
                    <select class="form-control CUSIP_Form_Control">
                      <option>A</option>
                      <option>B</option>
                      <option>C</option>
                      <option>D</option>
                      <option>E</option>
                    </select>
                    </div>
                    </div>
                    <div class="col-md-6">
                    <div class="form-group">
                    <label for="selectUser" class="CUSIP_PageTitle Inner_Titles">Issue Date</label>
                    <input type="text" class="form-control CUSIP_Text_Input calender_icon">
                    </div>
                    </div>
                    </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default popup_close" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->

        <div class="modal fade" id='CPDI'>
        <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title">TAXBLE STRIP</h4>
          </div>
          <div class="modal-body">
            <form role="form">
            <div class="row">
            <div class="col-md-6">
                   <div class="form-group">
                    <label for="selectUser" class="CUSIP_PageTitle Inner_Titles">OID Type</label>
                    <select class="form-control CUSIP_Form_Control">
                      <option>A</option>
                      <option>B</option>
                      <option>C</option>
                      <option>D</option>
                      <option>E</option>
                    </select>
                    </div>
                    </div>
                    <div class="col-md-6">
                    <div class="form-group">
                    <label for="selectUser" class="CUSIP_PageTitle Inner_Titles">Issue Date</label>
                    <input type="text" class="form-control CUSIP_Text_Input calender_icon">
                    </div>
                    </div>
                    </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default popup_close" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->



        </body>
        </html>

In the above HTML I have a JQGRID table whic has different columns. In those columns there is a column called 'CUSIP'. In this column there are different numbers in different rows. The Jqgrid is working fine for me. I placed 3 different 'bootstrap' popups in this html. What I need is if I click on first number of 'CUSIP' column the popup with id 'TIPS' to be displayed, if I click on second number of 'CUSIP' column the popup with id 'NQSI' to be displayed, if I click on third number of 'CUSIP' column the popup with id 'CPDI' to be displayed. Can anybody please help me on this. I really need a solution for this.

Marked as duplicate since the OP of both questions posted the same answer to each. — Andrew Barber, Jun 19 '14 at 18:40

score 0 · Answer 1 · edited May 23 '17 at 12:27

0

I'm not sure which problem exactly you have. The demo uses your code and it works without any problems. I just removed some unneeded options. Another demo includes CSS of bootstrap 3.1.1 and some minor CSS settings to improve the visibility of jqGrid. All the changes don't describes the problem which you could have. In other words I can't reproduce the problem which you have, but I hope that my working demos helps you to localize the problem in your code.

One more small remark: if cusip contains unique value for every row then I would recommend you to add key: true to the definition of cusip column in colModel. As the result jqGrid will use the values from the column as the rowids (the values of id attribute of <tr> elements of the grid which represent the rows).

UPDATED: If you need to display Popup only in case of click on the column cusip then you can use beforeSelectRow callback instead of onSelectRow. See the answer, the answer, this one etc. In your case it will be something like in the following demo.

edited May 23 '17 at 12:27

Community

1
1

answered Jun 17 '14 at 10:00

Oleg

220,925
34
403
798

Hi Oleg, My jsfiddle has some problem...I understand...what ever the demo u sent I think, it is the solution...can u send me the code which u edited... – user3734734 Jun 17 '14 at 10:05
Hi Oleg, what exactly I need is I have already the popups are there in my HTML with different ids, I have to call each popup with its id for each value of 'CUSIP', for other columns no 'onclick' function needed. – user3734734 Jun 17 '14 at 10:11
Hi Oleg did u understand my question??? – user3734734 Jun 17 '14 at 10:25
Hi Oleg ur demo is working fine for me...but what I need is If I click on each row of CUSIP I need a different popup should come which has a unique id... I created 15 popups for 15 rows of CUSIP in my original script...I just need to display them when I click on each row one by one. – user3734734 Jun 17 '14 at 10:48
Anybody to answer this question please use this demo – user3734734 Jun 17 '14 at 10:52
@user3734734: You can choose "View Page Source" (or some close text) in context menu (click right mouse button to open) to see the source of the demos. Full JavaScript code are included. – Oleg Jun 17 '14 at 12:39
@user3734734: If you need to display Popup only in case of click on the column `cusip` then you can use `beforeSelectRow` callback. See [the answer](http://stackoverflow.com/a/16241558/315935), [the answer](http://stackoverflow.com/a/14537512/315935), [this one](http://stackoverflow.com/a/13765086/315935) etc. In your case it will be something like [the following](http://www.ok-soft-gmbh.com/jqGrid/user3734734_1.htm). – Oleg Jun 17 '14 at 12:48
Hi Oleg...In my case what I am saying is for each 'CUSIP' number I have a already a 'bootstrap' popup, which has to be called when user clicks on that particular 'CUSIP' number. Hope U understand what I am saying. – user3734734 Jun 17 '14 at 12:54
@user3734734: [The last demo](http://www.ok-soft-gmbh.com/jqGrid/user3734734_1.htm) displays `alert` with 'CUSIP' number. You need just use your favorite popup instead. See the code of `beforeSelectRow` callback. If one use `key: true` then `rowid` in the callback is already the 'CUSIP' number. If the 'CUSIP' number is not unique and one can't use `key: true` property in `cusip` column then one can use `$(this).jqGrid("getCell", rowid, "cusip")` (like in my last demo). – Oleg Jun 17 '14 at 13:00

score 0 · Answer 2 · answered Jun 17 '14 at 20:42

If you replace the alert in the showDialog function for your dialog logic this should work for you: http://plnkr.co/edit/DwQj3UUFrzg0rYvl57ny

I have removed the "key" property from the columns collection and have also removed the option gridview = true from the grid options.

score 0 · Answer 3 · answered Jun 18 '14 at 08:50

If I've understood your question, you want something like the following? Please note that I have kept the code very basic to help clarify the answer.

Please see my jsFiddle here

// this is used by the onSelectRow function in jqGrid - see code further down
function showPopup(id){
        switch(id){
            case 1:
                Showpop1();
                break;
            case 2:
                Showpop2();
                break;
            case 3:
                Showpop3();
                break;
            case 4:
                Showpop4();
                break;
            case 5:
                Showpop5();
                break;
            // case etc...
            default:
                break;
        }
    }

Regards,

Wayne

How to write 'onclick' function for different rows to display different 'popups'

3 Answers3