Add Custom Button in Edit Form

Question

I have added a custom button in my jqGrid Edit form, created using beforeShowForm event. Onclick of custom button i want to perform ADD operation. below are my code ..

 beforeShowForm: function(form) { 
          //Create Custom ADD Button
          $('<a href="#">Add<span class="ui-icon ui-icon-disk"></span></a>')
            .click(function() {
                var $self = $(this);
               $self.jqGrid("editGridRow", $self.jqGrid("getGridParam", "selrow"),
                {
                  editData: {//Function to Add parameters to the status 
                    oper: 'add', //trying to pass parameter to server
                  },
                });
            }).addClass("fm-button ui-state-default ui-corner-all fm-button-icon-left")
              .prependTo("#Act_Buttons>td.EditButton");

the Code
editData: {//Function to Add parameters to the status oper: 'add', //trying to pass parameter to server },

shows TypeError: a(...)[0].p is undefined error . Any idea how to achieve this??

Answer 1

The main error in your code is the place where you use this. Inside of beforeShowForm is this initialized to the DOM of the grid, but inside of click event handler to $('<a href="#">Add<span class="ui-icon ui-icon-disk"></span></a>') it's initialized to <a> element. So you get the error "TypeError: a(...)[0].p is undefined". To fix the code you need just move initializing of $this variable in the outer callback function beforeShowForm:

beforeShowForm: function(form) { 
    var $self = $(this); // !!! place it here !!!

    //Create Custom ADD Button
    $('<a href="#">Add<span class="ui-icon ui-icon-disk"></span></a>')
        .click(function() {
            $self.jqGrid("editGridRow", $self.jqGrid("getGridParam", "selrow"), {
                editData: {//Function to Add parameters to the status 
                    oper: 'add', //trying to pass parameter to server
                },
            });
        }).addClass("fm-button ui-state-default ui-corner-all fm-button-icon-left")
          .prependTo("#Act_Buttons>td.EditButton");
}