locked
fade out message. Better way? RRS feed

  • Question

  • User-240513752 posted

    I have done message for success, failure and error. But I want to do it with the shorter code.

    <h2 id="savesuccess" style="display:none">Showed successfully</h2>
    <h2 id="Error" style="display:none">Error</h2>
    <h2 id="Failure" style="display:none">Failure</h2>


     $.ajax(
                    {
                        data: '{type: "' + id + '", value: ' + value + '}',
                        url: "/Home/AjaxMethod",
                        type: "POST",
                        dataType: "json",
                        contentType: "application/json; charset=utf-8",
                        success: function (response) {

                            var list;
                            switch (id) {
                                case "CountryId":

                                    list = response.States;
                                    DisableDropDown("#StateId");
                                    DisableDropDown("#CityId");
                                    PopulateDropDown("#StateId", list);
                                    break;
                                case "StateId":
                                    list = response.Cities;
                                    DisableDropDown("#CityId");
                                    PopulateDropDown("#CityId", list);
                                    break;
                            }
                            Message("Success");
                        }, 
                        failure: function (response) {
                            alert(response.responseText);
                            Message("Fail");
                        },
                        error: function (response) {
                            alert(response.responseText);
                                Message("Error");
                        }
                    });
                    
                    -------------------------------------
                    
                    
       function Message(message) {
                if (message ==='Success')
                    $("#savesuccess").show().delay(3000).fadeOut();
                if (message === "Fail")
                    $("#Failure").show().delay(3000).fadeOut();
                if (message === "Error")
                    $("#Error").show().delay(3000).fadeOut();
                 
            }

    Thursday, October 8, 2020 1:48 PM

Answers

  • User2103319870 posted

    But I want to do it with the shorter code.

    You could make the function more generic like below

    function Message(messagecontent) {
    	$("#msgcontrol").html(messagecontent).fadeIn().delay(3000).fadeOut();
    }

    Update your html like below

    <h2 id="msgcontrol" style="display:none"></h2>

    and you can use same method to display error messages

    For Success

    Message('Showed successfully');

    For Failure

    Message('Failure Message Content');

    For Error

    Message('Error Message Content');

    Sample Demo

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, October 8, 2020 3:33 PM