CODEWITHSUNDEEP
javascriptjqueryjqgrid
GThree
GThree

Reputation: 3510

Unable to add button click event in jqGrid

I am trying to add dialog on button click inside jqGrid but receiving "Uncaught ReferenceError: OpenDialog is not defined" error. I think I've used all needed references but no luck.

Also, If I use the same code in jsFiddle then neither get any error nor expected result.

jsFiddle Demo

I tried using id: "QueryLink" in function as well but no luck.

What am I missing here?

$(function() {
  "use strict";

  function OpenDialog() {
  alert("1");
    $("#myDialogBox").dialog("open");
  }

  $("#grid1").jqGrid({
    colModel: [
      {
        name: "QueryLink",
        id: "QueryLink",
        label: "Query Link",
        align: "center",
        formatter: function() {
          return "<button onclick='OpenDialog()'>Pop Up</button>";
        }
      }
    ],
    data: [{
      QueryLink: "Link"
    }],
    iconSet: "fontAwesome",
    rownumbers: true,
    sortname: "invdate",
    sortorder: "desc",
    caption: "Button Click Test"
  });
});
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.0/jquery.jqgrid.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.0/css/ui.jqgrid.min.css" rel="stylesheet" />
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.13.6/js/jquery.jqgrid.min.js"></script>

<table id="grid1"></table>
<div id="myDialogBox" title="Basic dialog"></div>

Upvotes: 1

Views: 531

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337560

Firstly note that you're including jQueryUI before jQuery, and also multiple versions of jQuery and jqGrid which is causing errors in the code. You need to organise the included scripts correctly.

The issue itself is because you're using an on* event attribute. This means that the function you call must be declared under the scope of the window, so you need to move OpenDialog() outside of the $(function() {}); block.

You also need to call dialog() on the #myDialogBox div to intantiate the library on that element. Presumably you want to se autoOpen: false so that it only opens when you manually trigger it. Try this:

function OpenDialog() {
  alert("1");
  $("#myDialogBox").dialog("open");
}

$(function() {
  "use strict";
  
  $("#myDialogBox").dialog({
    autoOpen: false
  });

  $("#grid1").jqGrid({
    colModel: [{
      name: "QueryLink",
      id: "QueryLink",
      label: "Query Link",
      align: "center",
      formatter: function() {
        return "<button onclick='OpenDialog()'>Pop Up</button>";
      }
    }],
    data: [{
      QueryLink: "Link"
    }],
    iconSet: "fontAwesome",
    rownumbers: true,
    sortname: "invdate",
    sortorder: "desc",
    caption: "Button Click Test"
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.13.6/js/jquery.jqgrid.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.0/css/ui.jqgrid.min.css" rel="stylesheet" />
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css" rel="stylesheet" />

<table id="grid1"></table>
<div id="myDialogBox" title="Basic dialog"></div>

However a better solution would be to remove the outdated onclick attribute and use a delegated event handler instead, like this:

$(function() {
  "use strict";
  
  $("#myDialogBox").dialog({
    autoOpen: false
  });
  
  $("#grid1").jqGrid({
    colModel: [{
      name: "QueryLink",
      id: "QueryLink",
      label: "Query Link",
      align: "center",
      formatter: function() {
        return '<button class="popup-trigger">Pop Up</button>';
      }
    }],
    data: [{
      QueryLink: "Link"
    }],
    iconSet: "fontAwesome",
    rownumbers: true,
    sortname: "invdate",
    sortorder: "desc",
    caption: "Button Click Test"
  }).on('click', '.popup-trigger', function() {
    alert("1");
    $("#myDialogBox").dialog("open");
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.13.6/js/jquery.jqgrid.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.0/css/ui.jqgrid.min.css" rel="stylesheet" />
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css" rel="stylesheet" />

<table id="grid1"></table>
<div id="myDialogBox" title="Basic dialog"></div>

Upvotes: 3

Related Questions