How do I add a div in javascript file

You mean to say as follows

http://jsfiddle.net/5sWA2/

@Dorababu Thanks for response. However I am using jquery and jqxwidgets and need to include code as is. Could you show how I would use my code in javascript. Thanks

have you tried something like so

https://codepen.io/anon/pen/RgoeOQ?editors=1010

a bit low tech but does the trick

@Paweł I can see the logic but I am getting 'is null' when run. Let me try to explain further. I have a php page the includes my posted div. This page calls an external js file on selection of a combobox. So in a nutshell, the div is in html page and I need to reference from external js file. Thanks

Can you show us your page and your script

still not 100% following you, do you want to make the buttons do something? so you're injecting them from javascript into your html, but then when you click them they should do something.

https://codepen.io/anon/pen/jwVQLE?editors=1010

I'm only guessing

Here is the external js file

users.js

$(function() {
  $("#jqxcomboboxuser").bind('select', function(event) {
    var userType = event.args.item.value;
    //alert(userType);
    //s$("#jqxgrid").jqxGrid('destroy');
    if (userType == "User Admin") {
      $('#jqxgrid').jqxGrid('destroy');

      var url = 'userData.php';
      var theme = 'ui-redmond';

      // prepare the data
      var source = {
        datatype: "json",
        datafields: [{
            name: 'id_usr'

          }, {
            name: 'idcode_usr'
          }, {
            name: 'name_usr'
          }, {
            name: 'username_usr'
          }, {
            name: 'active_usr'
          }, {
            name: 'level_usr'
          }, {
            name: 'email_usr'
          },


        ],
        id: 'id_usr',
        url: url,
        data: {
          featureClass: "P",
          style: "full",
          maxRows: 20

        }

      };
      var dataAdapter = new $.jqx.dataAdapter(source, {
        formatData: function(data) {
          data.item_startsWith = $("#searchField").val();
          return data;
        }
      });
      // initialize the popup input fields.
      $("#idcode_usr").jqxInput({
        theme: theme
      });
      $("#name_usr").jqxInput({
        theme: theme
      });
      $("#userame_usr").jqxInput({
        theme: theme
      });
      $("#active_usr").jqxInput({
        theme: theme
      });
      $("#level_usr").jqxInput({
        theme: theme
      });
      $("#email_usr").jqxInput({
        theme: theme
      });


      $("#idcode_usr").width(240);
      $("#idcode_usr").height(23);
      $("#name_usr").width(240);
      $("#name_usr").height(23);
      $("#userame_usr").width(240);
      $("#userame_usr").height(23);
      $("#active_usr").width(240);
      $("#active_usr").height(23);
      $("#level_usr").width(240);
      $("#level_usr").height(23);
      $("#email_usr").width(240);
      $("#email_usr").height(23);


      var edituserrow = -1;
      var adduserrow = -1;
      var deleteuserrow = -1;

      // initialize jqxGrid
      $("#usergrid").jqxGrid({
        width: '100%',
        height: '444',
        source: dataAdapter,
        theme: theme,
        pageable: true,
        sortable: true,
        editable: true,
        enabletooltips: true,
        editmode: 'click',
        filterable: true,
        autoheight: false,
        showemptyrow: true,
        pagesize: 10,
        pagesizeoptions: ['15', '20', '30', '40'],
        selectionmode: 'singlecell',
        columnsResize: true,
        columns: [{
            text: 'Id',
            datafield: 'id_usr',
            width: 40,
            hidden: true,
            editable: 'false'
          }, {
            text: 'Company',
            datafield: 'idcode_usr',
            width: 60,
            editable: false

          }, {
            text: 'Name',
            datafield: 'name_usr',
            width: 60,
            editable: false

          }, {
            text: 'Username',
            datafield: 'username_usr',
            width: 64,
            editable: false
          }, {
            text: 'Active',
            datafield: 'active_usr',
            width: 80,
            cellsalign: 'left',
            editable: false
          }, {
            text: 'User Level',
            datafield: 'level_usr',
            width: 80,
            cellsalign: 'left',
            editable: false
          }, {
            text: 'User Email',
            datafield: 'email_usr',
            width: 68,
            cellsalign: 'left',
            editable: false
          },

          {
            text: 'Edit',
            datafield: 'Edit',
            columntype: 'button',
            width: 73,
            cellsrenderer: function() {
              return "Edit";
            },
            buttonclick: function(row) {
              // open the popup window when the user clicks a button.
              edituserrow = row;
              var offset = $("#usergrid").offset();
              $("#UserpopupWindow").jqxWindow({
                position: {
                  x: parseInt(offset.left) + 360,
                  y: parseInt(offset.top) + 60
                }
              });

              // get the clicked row's data
              var dataRecord = $("#usergrid").jqxGrid('getrowdata', edituserrow);
              var varcompany = dataRecord.company;
              
              $("#idcode_usr").val(dataRecord.idcode_usr);
              $("#name_usr").val(dataRecord.name_usr);
              $("#username_usr").val(dataRecord.username_usr);
              $("#active_usr").val(dataRecord.active_usr);
              $("#level_usr").val(dataRecord.level_usr);
              $("#email_usr").val(dataRecord.email_usr);

              // show the popup window.
              //alert(dataRecord.date);
              $("#UserpopupWindow").jqxWindow('show');
              //console.log(dataRecord.slot);


            }
          }, {
            text: 'Add',
            datafield: 'Add',
            columntype: 'button',
            width: 73,
            cellsrenderer: function() {
              return "Add";
            },


            // START OF ACTION CODE ON CLICK WITH NO POPUP

            buttonclick: function(row) {
              // open the popup window when the user clicks a button.
              acteditrow = row;
              var offset = $("#usergrid").offset();
              $("#actionWindow").jqxWindow({
                position: {
                  x: parseInt(offset.left) + 360,
                  y: parseInt(offset.top) + 60
                }
              });

              // get the clicked row's data and initialize the input fields.
              var dataRecord = $("#usergrid").jqxGrid('getrowdata', acteditrow);
              var activity = dataRecord.activity;

              if (activity == "New Intake") {
                $("#rack").val(dataRecord.rack);
                $("#row").val(dataRecord.row);
                $("#column").val(dataRecord.column);
                $("#bay").val(dataRecord.bay);
                $("#size").val(dataRecord.size);
                document.getElementById('destdate').value = dataRecord.destdate;
                // show the popup window.
                $("#actionWindow").jqxWindow('show');
              } else {

                //IF NOT NEW INTAKE CONTINUE WITH PROCESSING WITHOUT SHOWING WINDOW

                if (acteditrow >= 0) {
                  var actrow = {
                    slot: dataRecord.slot,
                    activity: dataRecord.activity,
                    department: dataRecord.department,
                    company: dataRecord.company,
                    item: dataRecord.item,
                    user: dataRecord.user,
                    date: dataRecord.date,
                    destroydate: dataRecord.destroydate

                  };

                  var actrowID = $('#usergrid').jqxGrid('getrowid', acteditrow);

                  $('#usergrid').jqxGrid('updaterow', actrow);
                  //$("#popupWindow").jqxWindow('hide');

                }
                var data = "action=action" +
                  "&slot=" + actrow.slot +
                  "&activity=" + actrow.activity +
                  "&department=" + actrow.department +
                  "&company=" + actrow.company +
                  "&item=" + actrow.item +
                  "&user=" + actrow.user +
                  "&date=" + actrow.date +
                  "&destroydate=" + actrow.destroydate +
                  "&id=" + actrowID;

                $.ajax({
                  cache: false,
                  //dataType: 'json',
                  url: 'data.php',
                  data: data,
                  success: function(data) {

                    var dataAdapter = new $.jqx.dataAdapter(source);
                    $("#usergrid").jqxGrid({
                      source: dataAdapter
                    });


                    //$('#jqxGrid').jqxGrid('updatebounddata');
                    //$('#jqxGrid').jqxGrid('refresh');
                    //alert(data);
                  }

                });

              }

            },

          }, {
            text: 'Delete',
            datafield: 'Delete',
            columntype: 'button',
            width: 73,
            cellsrenderer: function() {
              return "Delete";
            },


            // START OF DELETE CODE ON CLICK

            buttonclick: function(row) {
              deleterow = row;
              var dataRecords = $("#usergrid").jqxGrid('getrowdata', deleterow);
              items = dataRecords.item;
              activity = dataRecords.activity;

              $.confirm({
                theme: 'modern',
                title: activity + ' Record deletion',
                content: 'You are about to delete the following item: ' + '<br />' + '<strong>' + '( ' + items + ' )' + '</strong>',
                icon: 'fa fa-question-circle',
                animation: 'scale',
                closeAnimation: 'scale',
                opacity: 0.5,
                buttons: {
                  'confirm': {
                    text: 'Proceed',
                    btnClass: 'btn-blue',
                    action: function() {
                      $.confirm({
                        theme: 'modern',
                        title: 'This action is permanent',
                        content: 'Permanent actions Cannot be undone. Proceed with caution',
                        icon: 'fa fa-warning',
                        animation: 'zoom',
                        closeAnimation: 'zoom',
                        buttons: {
                          confirm: {
                            text: 'Sure!',
                            btnClass: 'btn-orange',
                            action: function() {
                              //$.alert('A very critical action <strong>triggered!</strong>');
                              // open the popup window when the user clicks a button.
                              // open the popup window when the user clicks a button.
                              deleterow = row;
                              var offset = $("#usergrid").offset();
                              $("#actionWindow").jqxWindow({
                                position: {
                                  x: parseInt(offset.left) + 360,
                                  y: parseInt(offset.top) + 60
                                }
                              });

                              // get the clicked row's data and initialize the input fields.
                              var dataRecord = $("#usergrid").jqxGrid('getrowdata', deleterow);
                              items = dataRecord.item;

                              //CONTINUE WITH PROCESSING WITHOUT SHOWING WINDOW

                              if (deleterow >= 0) {
                                var delrow = {
                                  slot: dataRecord.slot,
                                  activity: dataRecord.activity,
                                  department: dataRecord.department,
                                  company: dataRecord.company,
                                  item: dataRecord.item

                                };

                                var delrowID = $('#usergrid').jqxGrid('getrowid', deleterow);



                                $('#usergrid').jqxGrid('updaterow', delrow);
                                //$("#popupWindow").jqxWindow('hide');

                              }
                              var data = "delete=delete" +
                                //"&slot=" + actrow.slot + 
                                "&activity=" + delrow.activity +
                                "&department=" + delrow.department +
                                "&company=" + delrow.company +
                                "&item=" + delrow.item +
                                "&id=" + delrowID;

                              $.ajax({
                                cache: false,
                                //dataType: 'json',
                                url: 'data.php',
                                data: data,
                                success: function(data) {

                                  var dataAdapter = new $.jqx.dataAdapter(source);
                                  $("#usergrid").jqxGrid({
                                    source: dataAdapter
                                  });
                                  //$('#jqxGrid').jqxGrid('updatebounddata');
                                  //$('#jqxGrid').jqxGrid('refresh');
                                  $.alert({
                                    theme: 'modern',
                                    title: 'Alert alert!',
                                    content: data,
                                    icon: 'fa fa-question-circle',
                                    animation: 'zoom',
                                    closeAnimation: 'zoom'
                                  });
                                }

                              });
                            }
                          },
                          cancel: function() {
                            $.alert('This transaction has been Successfully <strong>Cancelled</strong>');
                          }
                        }
                      });
                    }
                  },
                  cancel: function() {
                    $.alert('This transaction has been Successfully <strong>Cancelled</strong>');
                  },
                }
              });

            },


          },
        ],
        showtoolbar: true,
        rendertoolbar: function(toolbar) {
          var me = this;
          var container = $("<div style='margin: 5px;'></div>");
          var span = $("<span style='float: left; margin-bottom: 15px; margin-top: 5px; margin-right: 4px;'>Search for box: </span>" + "<span style='float: right; margin-top: 5px; margin-bottom: 15px; margin-right: 25px; font-weight: bold;'>Logistor Admin Panel</span>");
          var input = $("<input class='jqx-input jqx-widget-content jqx-rc-all' id='searchField' type='text' style='height: 23px; float: left; width: 223px;' />");
          toolbar.append(container);
          container.append(span);
          container.append(input);

          if (theme != "") {
            input.addClass('jqx-widget-content-' + theme);
            input.addClass('jqx-rc-all-' + theme);
          }
          var oldVal = "";
          input.on('keyup', function(event) {
            if (input.val().length >= 2) {
              if (me.timer) {
                clearTimeout(me.timer);
              }
              if (oldVal != input.val()) {
                me.timer = setTimeout(function() {
                  $("#usergrid").jqxGrid('updatebounddata');
                }, 1000);
                oldVal = input.val();

              }
            } else {
              $("#usergrid").jqxGrid('updatebounddata');
            }
          });
        },
        showstatusbar: true,
        renderstatusbar: function(statusbar) {
          // appends button to the status bar.
          var container = $("<div style='overflow: hidden; position: relative; margin: 5px;'></div>");
          var excelButton = $("#excelExport").jqxButton({
            theme: theme
          });
          var pdfButton = $("#pdfExport").jqxButton({
            theme: theme
          });
          var printButton = $("#print").jqxButton({
            theme: theme
          });

          container.append(excelButton);
          container.append(pdfButton);
          container.append(printButton);
          statusbar.append(container);
          //excelButton.jqxButton({ width: 120, height: 20, theme: theme });
        }



      });
      $("#usergrid").bind('rowselect', function(event) {
        var row = event.args.rowindex;
        var datarow = $("#usergrid").jqxGrid('getrowdata', row);

      });
      //$("#jqxcomboboxuser").jqxComboBox({selectedIndex: -1 });




      // initialize the popup edit window and buttons.
      $("#UserpopupWindow").jqxWindow({
        width: 400,
        resizable: false,
        theme: theme,
        isModal: true,
        autoOpen: false,
        cancelButton: $("#Cancel"),
        modalOpacity: 0.01
      });

      $("#Cancel").jqxButton({
        theme: theme
      });
      $("#Save").jqxButton({
        theme: theme
      });
      // update the edited row when the user clicks the 'Save' button.

      $("#Save").click(function() {
        if (editrow >= 0) {
          var row = {
            idcode: $("#idcode_usr").val(),
            name: $("#name_usr").val(),
            username: $("#userame_usr").val(),
            active: $("#active_usr").val(),
            level: $("#level_usr").val(),
            email: $("#email_usr").val()
          };

          var rowID = $('#usergrid').jqxGrid('getrowid', edituserrow);

          $('#usergrid').jqxGrid('updaterow', row);
          $("#UserpopupWindow").jqxWindow('hide');

        }
        //addressitem <--- USED WITH JQXINPUT CODE
        //alert(address);
        var data = "edit=edit" +
          "&idcode_usr=" + row.idcode +
          "&name_usr=" + row.name +
          "&userame_usr=" + row.username +
          "&active_usr=" + row.active +
          "&level_usr=" + row.level +
          "&id=" + rowID;

        $.ajax({
          cache: false,
          //dataType: 'json',
          type: 'GET',
          url: 'data.php',
          data: data,
          success: function(data) {

            //var dataAdapter = new $.jqx.dataAdapter(source);
            //$("#jqxgrid").jqxGrid({ source: dataAdapter });
            $("#searchField").val('');
            $('#usergrid').jqxGrid('updatebounddata', 'cells');
            //alert(data);
          }
        });

      });


      // initialize the action window and buttons.
      $("#actionWindow").jqxWindow({
        width: 300,
        resizable: false,
        theme: theme,
        isModal: true,
        autoOpen: false,
        cancelButton: $("#Cancel"),
        modalOpacity: 0.01
      });
      $("#Cancel").jqxButton({
        theme: theme
      });
      $("#Action").jqxButton({
        theme: theme
      });

      // update the action row when the user clicks the 'action' button.
      $("#Action").click(function() {
        var dataRecord = $("#usergrid").jqxGrid('getrowdata', acteditrow);
        var newDate = dataRecord.date;
        var nDate = newDate.toISOString();
        //var n = newDate.toISOString();
        console.log(nDate);
        if (acteditrow >= 0) {
          var row = {
            rack: $("#rack").val(),
            row: $("#row").val(),
            column: $("#column").val(),
            bay: $("#bay").val(),
            size: $("#size").val(),
            activity: dataRecord.activity,
            service: dataRecord.service,
            department: dataRecord.department,
            company: dataRecord.company,
            address: dataRecord.address,
            item: dataRecord.item,
            user: dataRecord.user,
            destroydate: dataRecord.destroydate,
            date: nDate

          };

          var rowid = $('#usergrid').jqxGrid('getrowid', acteditrow);

          $('#usergrid').jqxGrid('updaterow', row);
          $("#actionWindow").jqxWindow('hide');
        }

        var data = "action=action" +
          "&rack=" + row.rack +
          "&row=" + row.row +
          "&column=" + row.column +
          "&bay=" + row.bay +
          "&size=" + row.size +
          "&activity=" + row.activity +
          "&service=" + row.service +
          "&department=" + row.department +
          "&company=" + row.company +
          "&address=" + row.address +
          "&item=" + row.item +
          "&user=" + row.user +
          "&destroydate=" + row.destroydate +
          "&date=" + nDate +
          "&id=" + rowid;


        $.ajax({
          cache: false,
          //dataType: 'json',
          url: 'data.php',
          data: data,
          success: function(data) {
            // acrion command is executed.

            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#usergrid").jqxGrid({
              source: dataAdapter
            });

            // CLEAR THE FIELDS OF THE ACTION POPUP FORM
            $("#rack").val('');
            $("#row").val('');
            $("#column").val('');
            $("#bay").val('');

            //alert(data);

          }

        });

      });

      //$("#excelExport").jqxButton({ theme: theme });
      $("#excelExport").click(function() {
        $("#usergrid").jqxGrid('exportdata', 'xls', 'jqxGrid');
      });

      $("#pdfExport").click(function() {
        $("#usergrid").jqxGrid('exportdata', 'pdf', 'jqxGrid');
      });

      $("#print").click(function() {
        var gridContent = $("#usergrid").jqxGrid('exportdata', 'html');
        var newWindow = window.open('', '', 'width=800, height=500, scrollbars=yes'),
          document = newWindow.document.open(),
          pageContent =
          '<!DOCTYPE html>\n' +
          '<html>\n' +
          '<head>\n' +
          '<meta charset="utf-8" />\n' +
          '<title>Logistor Box Retrieval Report</title>\n' +
          '</head>\n' +
          '<body>\n' + gridContent + '\n</body>\n</html>';
        document.write(pageContent);
        document.close();
        newWindow.print();
      });
    };
  });

});

Select allOpen in new window

@Paweł On my php page I have my code as posted. You will see from the js file that it references there inputs from the html file but it is saying that they cannot be found. So it seems to me that the js file cannot see these inputs. Thanks

also take a look at the following, it's a bit easier to follow

https://codepen.io/anon/pen/RgoeOQ?editors=1010

can you tell me which line to look at

@Pawel Sorry what you mean by.

can you tell me which line to look at

OK Check line 638  & 448 in my code. thanks

oh easy; you're calling your buttons before you add them to the html

make sure you add the buttons before you try to use them

How do I do that Pawel. Could you adjust my code please. thanks

well how are the buttons rendered? are they injected via JQuery or JavaScript or are they written in with html.

if they're actually in the html, i suggest you move the refrence to you javascript file just before the closing of your body take

<html>
    <head></head>
    <body>
     <!-- all of your body html stuff -->

        <script id="yourJavascriptLink"></script>
    </body>
</html

Select allOpen in new window

if they're injected via Jquery or javascript just do it at the top of your javacript file

$(function() {
    //append html with controls here

  $("#jqxcomboboxuser").bind('select', function(event) {}
});

Select allOpen in new window

hope that makes some sense

check this out
https://codepen.io/anon/pen/vZybNX?editors=1010

i simplified yourscript to just the essentials to target your issues

@pawel I have moved in html to last line in the body and still the same. Didn.t understand this

if they're injected via Jquery or javascript just do it at the top of your javacript file

after taking a closer look i think the problem might be something else. I didn't realize that you where setting the eventlisteners when the dropdown box was changing value, so it's not a scoping issue.

so let's take a look at your buttons

change

<div>
   <input type="button" value="Export to excel" id='excelExport' />
   <input type="button" value="Export to pdf" id='pdfExport' />
   <input type="button" value="Print Data" id='print' />
</div>

Select allOpen in new window

to

<div>
 <button id='excelExport'>Export to excel</button>
   <button id='pdfExport' />Export to pdf</button>
   <button id='print'>print Data</button>
</div>

Select allOpen in new window

and that should fix your issue, it's a bit strange that they didn't make jqwidgets work with the old days of <input type="button" />

https://codepen.io/anon/pen/vZybNX?editors=1010

@Pawel still the same error. Apparently this error occurs when the element is not loaded in the DOM.  Also, jqwidgets does work with '<input type="button" />' but only when it is loaded in the DOM. Thanks

Error: Invalid Selector - #excelExport! Please, check whether the used ID or CSS Class name is correct.

Select allOpen in new window

let's back up then

do you have

<div>
 <button id='excelExport'>Export to excel</button>
   <button id='pdfExport' />Export to pdf</button>
   <button id='print'>print Data</button>
</div>

Select allOpen in new window

in the html page that references the JavaScript file that you are using?

Are you sure you don't have any other buttons on the page with the same ID? ID's must be unique.

 Can we see the full source for your page - we are getting only small pieces and the problem probably lies in code you have not shown us.

This is the html generated in firefox. JS code already posted.

<body class='default'>
  <div style="margin: 0 auto; margin-top: 20px; font-size: 18px; background-color: #72a4d2; color: white; height: 30px; width: 100%;">
    <p><span style="float: left; height: 30px; color: #ffffff; text-align: left; margin-left: 12px; margin-top: 4px;">Logistor Admin Panel</span><span style="width: 65%; float: left; height: 30px; color: #ffffff; text-align: center; margin-left: 12px; margin-top: 3px;"><a href="logout.php">Logout</a></span><span style="float: right; color: #ffffff; font-size: 14px; margin-top: 7px; margin-right: 32px;" id='date-part'></span></p>
  </div>
  <table width="100%">
    <tr>
      <th align="left">Reports</th>
      <th align="left">Users </th>
      <th align="left">Utilities</th>
      <th align="left">Actions</th>
    </tr>
    <tr>
      <td align="left">
        <div id="jqxcombobox"></div>
      </td>
      <td align="left">
        <div id="jqxcomboboxuser"></div>
      </td>
      <td align="left">
        <div id="jqxcomboboxutil"></div>
      </td>
      <td align="left">
        <div id="jqxcomboboxact"></div>
      </td>
    </tr>
  </table>
  <br />
  <div id="jqxgrid"></div>
  <div id="usergrid"></div>
  <div style="margin-top: 30px;">
    <div id="cellbegineditevent"></div>
    <div style="margin-top: 10px;" id="cellendeditevent"></div>
  </div>
  <div id="popupWindow" style="width: 300px !important;">
    <div>Edit</div>
    <div style="overflow: hidden;">
      <table>
        <tr>
          <td align="right">Slot:</td>
          <td align="left">
            <input id="slot" />
          </td>
        </tr>
        <tr>
          <td align="right">Activity:</td>
          <td align="left">
            <input id="activity" />
          </td>
        </tr>
        <tr>
          <td align="right">Department:</td>
          <td align="left">
            <input id="department" />
          </td>
        </tr>
        <tr>
          <td align="right">Company:</td>
          <td align="left">
            <input id="company" />
          </td>
        </tr>
        <tr>
          <td align="right">Address:</td>
          <td align="left">
            <select id="address" name="address"></select>
            <!---->
            <!--
              -->
          </td>
        </tr>
        <tr>
          <td align="right">Item:</td>
          <td align="left">
            <input id="item" />
          </td>
        </tr>
        <tr>
          <td align="right">Intake Date:</td>
          <td align="left">
            <input id="date" />
          </td>
        </tr>
        <tr>
          <td align="right">Destroy Date:</td>
          <td align="left">
            <input id="destdate" />
          </td>
        </tr>
        <tr>
          <td align="right"></td>
          <td style="padding-top: 10px;" align="right">
            <input style="margin-right: 5px;" type="button" id="Save" value="Save" />
            <input id="Cancel" type="button" value="Cancel" />
          </td>
        </tr>
      </table>
    </div>
  </div>
  <div id="UserpopupWindow" style="display: none; width: 300px !important;">
    <div>Edit</div>
    <div style="overflow: hidden;">
      <table>
        <tr>
          <td align="right">Company:</td>
          <td align="left">
            <input id="idcode_usr" />
          </td>
        </tr>
        <tr>
          <td align="right">Name:</td>
          <td align="left">
            <input id="name_usr" />
          </td>
        </tr>
        <tr>
          <td align="right">Username:</td>
          <td align="left">
            <input id="userame_usr" />
          </td>
        </tr>
        <tr>
          <td align="right">Active:</td>
          <td align="left">
            <input id="active_usr" />
          </td>
        </tr>
        <tr>
          <td align="right">Level:</td>
          <td align="left">
            <select id="level_usr" name="address"></select>
            <!---->
            <!--
              -->
          </td>
        </tr>
        <tr>
          <td align="right">E-mail:</td>
          <td align="left">
            <input id="email_usr" />
          </td>
        </tr>
      </table>
    </div>
  </div>
  <div id="actionWindow" style="width: 300px !important;">
    <div>Action Intake</div>
    <div style="overflow: hidden;">
      <table>
        <tr>
          <td align="right">Rack:</td>
          <td align="left">
            <input id="rack" />
          </td>
        </tr>
        <tr>
          <td align="right">Row:</td>
          <td align="left">
            <input id="row" />
          </td>
        </tr>
        <tr>
          <td align="right">Column:</td>
          <td align="left">
            <input id="column" />
          </td>
        </tr>
        <tr>
          <td align="right">Bay:</td>
          <td align="left">
            <input id="bay" />
          </td>
        </tr>
        <tr>
          <td align="right">Size:</td>
          <td align="left">
            <select id="size" name="size">
              <option value="Standard" selected> Standard </option>
              <option value="Printout"> Printout </option>
              <option value="Other"> Other </option>
              <option value="Transfer"> Transfer </option>
            </select>
          </td>
        </tr>
        <tr>
        <tr>
          <td align="right"></td>
          <td style="padding-top: 10px;" align="right">
            <input style="margin-right: 5px;" type="button" id="Action" value="Action" />
            <input id="Cancel" type="button" value="Cancel" />
          </td>
        </tr>
      </table>
    </div>
  </div>
  <div>
    <button id='excelExport'>Export to excel</button>
    <button id='pdfExport'>Export to pdf</button>
    <button id='print'>print Data</button>
  </div>
  <script type="text/javascript" src="js/external/users.js"></script>
</body>

Select allOpen in new window

https://codepen.io/anon/pen/vZybNX?editors=1010

so i took out the event handler for the user type combo box and and the extraction of the user type from the even (that had to be appended from anther js file) and it looks as if your events are firing. so i'm kinda at a loss as to what's wrong.

That helps

Look at line 17

<div id="jqxcomboboxuser"></div>

Select allOpen in new window

Look at line 2 of user.js

  $("#jqxcomboboxuser").bind('select', function(event) {

Select allOpen in new window

How is this going to fire - if it does not fire your buttons don't get bound?
I think we are still missing some pieces.

Sorry, forgot to post the actLayout.js. Here is the code for the action I am trying to use.

// prepare the data
var actionUserSource = [
  "User Admin"

];

var actionUserDataAdapter = new $.jqx.dataAdapter(actionUserSource);
// create a comboBox. 

$("#jqxcomboboxuser").jqxComboBox({
  width: 250,
  height: 25,
  autoDropDownHeight: true,
  theme: 'ui-redmond',
  source: actionUserDataAdapter,
  promptText: 'Select a User',
  selectedIndex: -1,
  displayMember: 'type',
  valueMember: 'type'
});

Select allOpen in new window

I added the library and your code seems to work - it moans there is no data to export - but the buttons are being bound
You can see my sample here

Have you checked your console (F12) for errors - are you sure the "not-working" is not the buttons failing to bind but something else.

@Julian Here is the error in firebug.

Error: Invalid Selector - #excelExport! Please, check whether the used ID or CSS Class name is correct.

Select allOpen in new window

I know what is happening but do not know how to correct it. Basically, on line 7 of the user.js code, I am destroying the grid. This action Removes the Grid from the document and releases its resources. Which is why I am getting this error.

I tried to hide the grid, this worked, but when I pressed one of the buttons, it prints both grids because #jqxgrid resources are still available. I need to find a way to remove #jqxgrid but keep the html part.

I am using the same file in my sample and I don't get the error.

I also do not get the error when i first load the page. Buttons display and work fine. However, the error occurs when I change the grid with #jqxcomboboxuser. If I destroy original grid, then that is when I get error. Hope that is clearer. Thanks

There was a bug in my sample - I did not upload the user.js file - have done so.
Open Console (F12)
1. Browse to http://www.marcorpsa.com/ee/t2519.html
2. Type user into Users box and select User Admin
3. Check Console - should see the output "Here" indicating user.js event fired
4. Grid has no disappeared
5. Click Export to Excel button
6. Check console => uncaught exception: No data to export.

@Julian According to jqwidgets here is the correct way to do it.

You can destroy the Grid with its “destroy” method, append a new DIV tag and create a new Grid.

But I am not sure what they mean. Can you explain or show sample. Thanks

I am not familiar with jqxGrid - but I imagine they mean something like this.

$('#jqxgrid').jqxGrid('destroy');
var div = $('<div>');
var target = $('selectorforwheredivmustgo');
div.appendTo(target);
div.jqxGrid();

Select allOpen in new window

Where would I place this julian in my code. Thanks

I can't answer that - I don't know what it is you are trying to do.

I imagine you would place it wherever you want the action to happen.

The code is meant as a guide - it shows how to create a div and how to append it to the document. How you bind to the jqxGrid or how you invoke this code is entirely dependent on your specific requirements.

What event would trigger this action?

users.js line 2. Thanks

@Julian Could you clarify what this line should include from my code. Not following that line. Thanks

var target = $('selectorforwheredivmustgo');

Thanks very much julian

You are welcome.