How to stop page loading every time after clicking button?

Question

This is my Function.

function GetData() {
  try {
    $.ajax({
      type: "POST",
      url: "CompanyOverAllReport.aspx/GetAllData",
      data: '{date1: "' + $('#<%=this.txtDateFrom.ClientID%>').val() + '" , date2: "' + $('#<%=this.txtDateto.ClientID%>').val() + '"}',
      contentType: "application/json; charset=utf-8",
      dataType: "json",
      success: function(response) {
        //console.log(JSON.parse(response.d));
        var data = response.d;

        //console.log(data['account']);
        ExecuteGraph(data);
      },
      failure: function(response) {
        //  alert(response);
        alert("f");
      }
    });
  } catch (e) {
    alert(e);
  }
}

This is My Pageload

$(document).ready(function() {
  Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded);
});

function pageLoaded() {
  alert("Testing");
  //GetData();
}

This is my Button

<asp:LinkButton ID="btnok" runat="server" CssClass="btn btn-primary okBtn" OnClientClick="GetData()" >Ok</asp:LinkButton>

Answer 1

Your click event fires the function, but doesn't prevent anything from happening...

OnClientClick="GetData()"

A simple example of cancelling the default action would be to use:

OnClientClick="GetData(); return false;"

It is also possible to prevent the default and cancel bubbling using the event that is passed with the click, your GetData function would need to accept it as the first argument.