Pop up message does not work on 1st click. It works on 2nd click on button click

See more:

ASP.NET4

Hi all,

I have developed asp.net application with bootstrap Design. When i click my submit button, all functions are working but pop-up message does not work. But those lines get executed(When i debug) , when i click button for 2nd time, Pop-up message works.

Design Page:

<pre><div class="form-group">
    <div class="col-md-9 col-sm-9 col-xs-12 col-md-offset-3">
        <input type="hidden" id="uploads" />
        <input type="button" id="btnSubmitfile" class="btn btn-success" data-toggle="modal" value="Create" data-target=".bs-example-modal-sm" />
        <!-- Small modal -->
        <div id="exitappname1" tabindex="-1" role="dialog" aria-hidden="true" style="display: none;">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                        <h4 class="modal-title" id="myModalLabel2">Payment Details</h4>
                    </div>
                    <div class="modal-body">
                        <p>Payment approved</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" onclick="location.href = '/TEST/Dash/';" class="btn btn-default" data-dismiss="modal">ok</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- /modals -->
    </div>
</div>

JS:

$(document).ready(function () {
 
    $("#btnSubmitfile").click(function (e) {
        submitfile();
}
}

function submitfile() {
 var RMReg = new Array();
    RMReg[0] = ProjectName;
    RMReg[1] = CustID;
    RMReg[2] = projecttype;
    
    $.ajax({
        type: "POST",
        url: '/TEST/proreport/',
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify({ CRMReg: CRMReg }),
        success: function (json) {
            if (json.flag == "False") {
                //$("#exitappname").modal('show');
                $("#exitappname1").addClass("modal fade bs-example-modal-sm");
                $(".modal-title").text("New Project");
                $(".modal-body").text("Project Already Exist");
            }
            else {
                $("#exitappname1").addClass("modal fade bs-example-modal-sm");
                $(".modal-title").text("New Project");
                $(".modal-body").text("Project submitted Successfully");
            }
        },
        failure: function (errMsg) {
            alert(errMsg);
        }

    });
}

What I have tried:

Design Page:<pre lang="HTML">
<pre><div class="form-group">
    <div class="col-md-9 col-sm-9 col-xs-12 col-md-offset-3">
        <input type="hidden" id="uploads" />
        <input type="button" id="btnSubmitfile" class="btn btn-success" data-toggle="modal" value="Create" data-target=".bs-example-modal-sm" />
        <!-- Small modal -->
        <div id="exitappname1" tabindex="-1" role="dialog" aria-hidden="true" style="display: none;">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                        <h4 class="modal-title" id="myModalLabel2">Payment Details</h4>
                    </div>
                    <div class="modal-body">
                        <p>Payment approved</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" onclick="location.href = '/TEST/Dash/';" class="btn btn-default" data-dismiss="modal">ok</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- /modals -->
    </div>
</div>

JS:

$(document).ready(function () {
 
    $("#btnSubmitfile").click(function (e) {
        submitfile();

   
}
}

function submitfile() {
 var RMReg = new Array();
    RMReg[0] = ProjectName;
    RMReg[1] = CustID;
    RMReg[2] = projecttype;
    
    $.ajax({
        type: "POST",
        url: '/TEST/proreport/',
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify({ CRMReg: CRMReg }),
        success: function (json) {
            if (json.flag == "False") {
                //$("#exitappname").modal('show');
                $("#exitappname1").addClass("modal fade bs-example-modal-sm");
                $(".modal-title").text("New Project");
                $(".modal-body").text("Project Already Exist");
            }
            else {
                $("#exitappname1").addClass("modal fade bs-example-modal-sm");
                $(".modal-title").text("New Project");
                $(".modal-body").text("Project submitted Successfully");
            }
        },
        failure: function (errMsg) {
            alert(errMsg);
        }

    });
}