jquery ajax page load problem

I faced a problem in label text load. When I load my text in a label using jquery ajax call label show the text for a moment and then the whole page load again . I load my label when the calculation button clicked. I want to show the text in label without
loading the whole page. Here is my sample code:

$(document).ready(function () {
$('#Button_Calculation').click(function () {
                var StringWithDropdownIDValueText = "1" + "|";
                for (var i = 0; i < DropdownlistID.length; i++) {
                    var DropdownSelectedID = DropdownlistID[i].toString(); //store the dropdown id in another variable
                    var DropdownSelectedValue = $('#' + DropdownlistID[i] + ' option:selected').val(); //get the dropdown selected value and store it another variable
                    var DropdownSelectedText = $('#' + DropdownlistID[i] + ' option:selected').text(); // get the dropdown selected text and store it another variable
                    StringWithDropdownIDValueText += DropdownSelectedID.toString() + ',' + DropdownSelectedValue.toString() + ',' + DropdownSelectedText.toString() + ';'; //create a string with dropdown ID, value and text for server use 
                }

                $.ajax({
                    type: "POST",
                    url: "../Logic/GetcontrolConfig.asmx/CallCalculationMethods",
                    data: "{calculationString: '" + StringWithDropdownIDValueText + "'}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (rslt) {
                        var returnResult = rslt.d;
                        $('#ResultShow').text(returnResult);
                    },
                    error: function () {
                        alert("Error: Somethings Wrong");
                    }
                });
            });
});

and here is my asp.net control:

<asp:Label ID="ResultShow" runat="server"></asp:Label>
<asp:Button ID="Button_Calculation" runat="server" Text="Calculation" />

 can any one help me please.

The click event of the button is still happening so your js is running then you get a page postback.  You have to cancel the click event so it doesn’t happen

$('#Button_Calculation').click(function (e) {
    e.preventDefault();
    var StringWithDropdownIDValueText = "1" + "|";

is your DropDownList control is autopostback = true… or you have written any jQuery code for dropdown change event if so this might be your issue.

you do not need to loop for dropdownlist to get selected value. See below code 

$(document).ready(function () {

$("#MainContent_ddlCountry").change(function () {
        
    $("#tblCustomers tbody tr").remove();

    $.ajax({
        type: "POST",
        url: "Default.aspx/GetCustomers",
        data: '{country: "' + $(this).val() + '" }',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            response($.map(data.d, function (item) {
               var returnResult = rslt.d;
                        $('#ResultShow').text(returnResult);
            }))
        },
        failure: function (response) {
            var r = jQuery.parseJSON(response.responseText);
            alert("Message: " + r.Message);
            alert("StackTrace: " + r.StackTrace);
            alert("ExceptionType: " + r.ExceptionType);
        }
    });
});
});

for more info check

http://dotnetmentors.com/aspnet/jquery-ajax-with-pagemethod-in-asp-net.aspx

Hi Shibly,

Thanks for your post.

Shibly

<asp:Button ID="Button_Calculation" runat="server" Text="Calculation" />

The button is a Server Control, so after you click the button, it will cause postback and reload the page. To prevent reloading the page, you could add “return false” after execute Ajax method as below.

$(document).ready(function () {
    $('#Button_Calculation').click(function () {
        var StringWithDropdownIDValueText = "1" + "|";
        for (var i = 0; i < DropdownlistID.length; i++) {
            var DropdownSelectedID = DropdownlistID[i].toString(); //store the dropdown id in another variable
            var DropdownSelectedValue = $('#' + DropdownlistID[i] + ' option:selected').val(); //get the dropdown selected value and store it another variable
            var DropdownSelectedText = $('#' + DropdownlistID[i] + ' option:selected').text(); // get the dropdown selected text and store it another variable
            StringWithDropdownIDValueText += DropdownSelectedID.toString() + ',' + DropdownSelectedValue.toString() + ',' + DropdownSelectedText.toString() + ';'; //create a string with dropdown ID, value and text for server use 
        }

        $.ajax({
            type: "POST",
            url: "../Logic/GetcontrolConfig.asmx/CallCalculationMethods",
            data: "{calculationString: '" + StringWithDropdownIDValueText + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (rslt) {
                var returnResult = rslt.d;
                $('#ResultShow').text(returnResult);
            },
            error: function () {
                alert("Error: Somethings Wrong");
            }
        });

        return false;
    });
}); 

Besides, you could repalec Button control with HTML <input> Tag.

<input id="Button_Calculation" type="button" value="Calculation" />

If you have any question about my reply, please let me know freely.

Best Regards,

Fei Han

Leave a Reply