Uncaught ReferenceError: Error not defined

Question

I have this jqgrid code below and I have a picture inside it and at the same time its function that I am using. But clicking the button inside my jqgrid it says Uncaught ReferenceError: clickmeapproved is not defined . Is there anything wrong with my code or the way that I am using them?. Same error with the disapproved button.

 afterInsertRow: function (rowid) {
              var obj = jQuery("#FiTATimeCorrectionV2List").getRowData(rowid);
              var FADTLSID = obj.FitaAssignDtlID;
              if (FADTLSID !== undefined) {
                  if (FADTLSID !== "") {
                      var btnApprove = "<input type = 'image' img alt='' src='../../Content/Images/newimages/check.png' style='height:20px;width:20px;'  style ='width: 90px' id='btnApproved" + rowid + "' onclick='clickmeapproved(" + rowid + " )' />"
                      var btnDisApprove = "<input type = 'image' img  alt='' src='../../Content/Images/newimages/delete.png' style='height:20px;width:20px;' style ='width: 90px' id='btnDisApproved" + rowid + "' onclick='clickmedisapproved(" + rowid + " )' />"
                      jQuery("#FiTATimeCorrectionV2List").setRowData(rowid, { FitaCorForApproval: btnApprove });
                      jQuery("#FiTATimeCorrectionV2List").setRowData(rowid, { FitaCorForDisApproval: btnDisApprove });
                      var temp = obj.FitaStatus;
                      if (temp == "Approved") {
                          $("#btnApproved" + rowid).hide();
                          $("#btnDisApproved" + rowid).hide();
                      }
                      else if (temp == "Disapproved") {
                          $("#btnApproved" + rowid).hide();
                          $("#btnDisApproved" + rowid).hide();
                      } else {
                          $("#btnApproved" + rowid).show();
                          $("#btnDisApproved" + rowid).show();
                      }
                  }
              }
          },

---

function clickmeapproved(rowid) {
var ans = confirm("Are you sure you want to approve the request of "+ globalFitaCorName +"?");
if (ans) {
    $.ajax({
        type: "POST",
        url: '../Request/SaveFitaApproval?FAID=' + rowid,
        dataType: 'json',
        success: function (response) {
            alert("Successfully approve!");
            $("#FiTATimeCorrectionV2List").trigger("reloadGrid");
            FiTATimeCorrectionV2(0);
            globalFitaCorName = "";
            $("#loader").hide();
        },
        error: function (reponse) {
            $("#FiTATimeCorrectionV2List").trigger("reloadGrid");
            FiTATimeCorrectionV2(0);
            globalFitaCorName = "";
            $("#loader").hide();
        }
    });
  }
}

Answer 1

Your "clickmeapproved" function does not have global scope. Check by typing "window.clickmeapproved" in the web inspector.

Answer 2

Here is the code that I use to solve my issue.

var btnApprove = "<input type = 'image' img alt='' src='../../Content/Images/newimages/check.png' style='height:20px;width:20px;'  style ='width: 90px' id='btnApproved" + rowid + "' />" 
var btnDisApprove = "<input type = 'image' img  alt='' src='../../Content/Images/newimages/delete.png' style='height:20px;width:20px;' style ='width: 90px' id='btnDisApproved" + rowid + "' />"

I exclude the button click from it.

$("#btnApproved" + rowid + "").click(function(){
   clickmeapproved(rowid);
});
$("#btnDisApproved" + rowid + "").click(function(){
   clickmedisapproved(rowid);
});