Question

At my view i am using Jquery tabs .Initially everthing works fine for me. But later when click the button (event) from tab-1 view to change contet of it and then again i use to switch to another tab(say tab-2) and coming back to tab-1 by clicking it gives Error ::Eror:: jQuery UI Tabs: Mismatching fragment identifier

Script

 <script type="text/javascript">
    $(function () {
        $("#tabs").tabs({collapsible:true});
    });
</script>

  <script type="text/javascript">
   $(function () {
       $("#button").click(function () {
           $("#tabs-1").replaceWith($("h1")) 
        });
   });

View

 <h1>Chenger heading for tab-1 after clicking the button</h1>
    <div id="tabs">
<ul>
    <li><a href="#tabs-1">Info</a></li>
    <li><a href="#tabs-2">Address</a></li>
    <li><a href="#tabs-3">Contacts</a></li>
</ul>
<div id="tabs-1">
    <table >
    <tr>
    <td>First Name</td>
    <td><%: Model.InfoName%></td>
    </tr>
    <tr><td>Last Name</td><td> <%: Model.infoLastName%></td></tr>
    <tr><td>Fathers Name</td><td> <%: Model.infoFatherName%></td></tr>
    </table>
    <input type="button" value="Edit" id="button" />
    </div>

Why i am getting this?????

Answer 1

<script type="text/javascript">
$(function () {
$("#button").click(function () {
$("#tabs-1").replaceWith($("h1"))
});
});