Question

Facts

• I have an mvc project.
• I am using jquery.

The problem

$(‘#ModalData’).empty(); is not working as I expected.

Details

When I click on the test link three times I get

However, the hello world was supposed to be emptied by
$(‘#ModalData’).empty();
but it doesnt. Instead everytime I click on test link it open the modal dialog and creates a new hello world.

Also note that If I append the html without using partial view then jquery empty works. Any help?

 $(".modal").on("click", function () {

        $.ajaxSetup({

        cache: false
    });
    $("#dialog-form").dialog("open");

    $('#ModalData').empty();//not working to well

    $.get("/MedicineManagement/GetModal/", function (data)
    { $("#ModalAjaxData").append(data); });
});


$("#dialog-form").dialog({
    autoOpen: false,
    height: 400,
    width: 550,
    modal: true,
    buttons: {
        "Modify Actual Potential": function () {


            if (true) {
                $(this).dialog("close");

            }
        },
        Cancel: function () {
            $(this).dialog("close");

        }
    },
    close: function () {


    }
});

Controller

     [HttpGet]
        public PartialViewResult GetModal()
        {
            return PartialView("_AddMedicineList");
        }

HTML that triggers jquery

 <div id="dialog-form" title="Edit Actual Potential">
        <div class="ModalAjaxData" id="ModalAjaxData"></div>
    </div>
    <a href="#" class ="modal">test </a>

Answer 1

In your AJAX success callback you are appending:

$("#ModalAjaxData").append(data);

instead of setting the html of the #ModalAjaxData div:

$("#ModalAjaxData").html(data);

Also you seem to be emptying some #ModalData element which I cannot see anywhere in your markup so it is not surprising that $('#ModalData').empty(); does nothing. You probably meant $('#ModalAjaxData').empty();. But if you use $("#ModalAjaxData").html(data); instead of appending you don’t need to be emptying anything.