call Ajax JQuery on asp:Button OnClientClick and disable page reload if pointer goes to IF condition of Ajax JQuery

Question

I have a asp:Button (named as "Save") in a Web Page. It has separate code for CommandName and CommandArgument defined in a class(.cs) file, to save records.

It also has a OnClientClick event code.

HTML:

<asp:Button ID="btnSave" runat="server" Text="Save" CommandName="Update"
OnClientClick="saveButtonClick();" CommandArgument="Save" />

Now, When I try to use OnClick event of this button, the OnClick code does not work. I think its due to CommandName and CommandArgument or OnClientClick code, already defined on this button but im not sure why its not working.

Since, the onClick event is not working, so I thought to write the logic of onClick through Ajax JQuery and then I want to call this Ajax JQuery inside pre-defined function of Javascript called onClientClick of this button.

i.e., inside saveButtonClick(); function of Javascript code

JavaScript:

<script tyep="text/javscript">
function saveButtonClick() {

   //code

}
</script>

Current Ajax JQuery Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://cdn.jsdelivr.net/json2/0.1/json2.js"></script>
    <script type="text/javascript">
        function saveButtonClick() {

                var chk = {};
                chk.requestID = $("[id*=TempGUID]").text();
                alert(chk.requestID);
                chk.barCode = $("[id*=txtBarcodeNumber]").val();
                alert(chk.barCode);

                $.ajax({
                    type: 'POST',
                    url: "IPRForm_EditCheck.aspx/CheckDuplicate",
                    data: '{chk: ' + JSON.stringify(chk) + '}',
                    contentType: 'application/json; charset=utf-8',
                    dataType: 'json',
                    success: function (data) {

                        var val = data.d;
                        alert(val);

                        if (val == true) {
                            alert("Barcode Number already exist in system database.");
                        }
                        else {
                            alert("Barcode Number does not exist");
                        }

                    },
                    error: function (data) {
                        alert(data.responseText);
                    },
                });
                return false;
        }
    </script>

Requirement is When I click on asp:Button, it triggers the onClientClick event and go to saveButtonClick() function of Javscript, inside this function it calls the Ajax JQuery.
Now, in Ajax JQuery, if pointer goes to IF condition then an alert should come and page should not reload, but if it does not goto IF condition, page should reload (as previous default behavior).

I hope I made my requirement clear to you all.
Please note that I am new in asp.net and Ajax JQuery.
Thanks in advance

Answer 1

function saveButtonClick() {

                        var chk = {};
                        chk.requestID = $("[id*=TempGUID]").text();
                        alert(chk.requestID);
                        chk.barCode = $("[id*=txtBarcodeNumber]").val();
                        alert(chk.barCode);

                        $.ajax({
                            type: 'POST',
                            url: "IPRForm_EditCheck.aspx/CheckDuplicate",
                            data: '{chk: ' + JSON.stringify(chk) + '}',
                            contentType: 'application/json; charset=utf-8',
                            dataType: 'json',
                            async:false,//here I am not allowing event to go further until it checks the barcode existance
                            success: function (data) {

                                var val = data.d;
                                alert(val);

                                if (val == true) {
                                    alert("Barcode Number already exist in system database.");


      return false;

                                }
                                else {

        return true;
                                }

                            },
                            error: function (data) {
                                alert(data.responseText);
                            },
                        });

              }  

and update as following:

<asp:Button ID="yourid" UseSubmitBehavior="false" 
OnClientClick="return saveButtonClick()" 
runat="server" /> 

Explanation: See, you don't want to trigger the server side code unless bar-code not exists in the database. I have used method Preventing default behavior of button to prevent triggering server-side code. if bar-code doesn't exists than it will trigger the default behavior of the button.

Let me know if it doesn't works.

Answer 2

change your button code like this

<asp:Button ID="yourid" UseSubmitBehavior="false" 
OnClientClick="return saveButtonClick()" 
runat="server" /> 

JS code:

function saveButtonClick()
{
if(condition fails)
return false
else
return true

}

EDIT:3 updated JS code,At last I found that async calls cannot return a value, beacuse your code will not stop execution whether you have response from your service or not..please use this solution ,only if you like it..please keep in mind that this is a SYNCHRONOUS call ....

<script type="text/javascript" src="http://cdn.jsdelivr.net/json2/0.1/json2.js"></script>
<script type="text/javascript">
    function saveButtonClick() {


        var result = true;
        var output = $.ajax({
            type: 'POST',
            url: "Default.aspx/SaveUser",

            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            async: false

        }).responseText;
        var obj = jQuery.parseJSON(output);
        if(obj.d) {
            alert("Barcode Number already exist in system database.");
            result = false;
        }
        else {
            alert("entering database");
        }
        alert(result);
        return result;

    }
</script>