I have a jQuery dialog box that I use as a form, when I click the button it performs what it needs to, but does not close. How would I go about making it close on button click.

My current code looks like this:

<script type=text/javascript charset=utf-8>

$(document).ready(function () {

    $('#HeatNameDiv').dialog({

        autoOpen: false

    });

});

$(document).ready(function () {

    $('#Change_Heat_Name').click(function (e) {

        e.preventDefault();

        $('#HeatNameDiv').dialog('open');

    });

});

</script>

Button that opens the dialog:

Heat Name<input type=text name=heat_name [email protected](x => x.heatname) class=search-query placeholder=Search style =width:100px/>

        <button class=btn btn-success id=Change_Heat_Name value=Change_Heat_Name name=action:Change_Heat_Name type=button> Change Heat Name</button>

Form inside the dialog box:

<div id=HeatNameDiv title=Change Heat Name>

@using (Ajax.BeginForm(ChangeHeatName, Home, FormMethod.Post, new AjaxOptions(){UpdateTargetId = chemDiv, InsertionMode = InsertionMode.Replace, OnSuccess = $(document).ready(function () { $('#ChangeHeatName').click(function () { $('#HeatNameDiv').dialog('close');});}); }))

{

    <section>

        Heat Name:<input type=text name=heatName [email protected](x => x.heatname) style =width:100px/>

        Change to:<input type=text name=updatedHeat value= style=width: 100px />

        <input type=submit name=ChangeHeatName value=Change />

    </section>

}