Question

HTML：

<table border="1">
    <tr id="main_account">
        <td width="50%">
            <h3 style="margin-left:10px">Details</h3> 
            <table width="270">
                <tr>
                    <td>First name:</td>
                    <td><input type="text" name="first_name" id="id_first_name" /></td>
                </tr>
                <tr>
                    <td>Last name:</td>
                    <td><input type="text" name="last_name" id="id_last_name" /></td>
                </tr>
                <!-- other html -->
            </table>
        </td>
    </tr>
    <tr id="authorised_reporter">
        <td  width="100%" colspan="2">                            
            <form method="post" action="." id="reporter-form">                                    
                <table  width="100%">
                    <tr>
                        <td style="width:100px;">First name:</td>
                        <td><input type="text" name="first_name" id="id_first_name" /> </td>
                    </tr>
                    <tr>
                        <td>Last name:</td>
                        <td><input type="text" name="last_name" id="id_last_name" /> </td>
                    </tr>
                    <tr>
                        <td>Daytime phone:</td>
                        <td><input id="id_phone_daytime" type="text" class="trim-space" name="phone_daytime" /></td>
                    </tr>
                </table>
            </form>
        </td>
    </tr> 
</table>

显示

onpage load id #main_account并隐藏id #authorised_reporter。如果单击#authorised_reporter，则#authorised_reporter在显示块中，＃main_account在display none状态。在#authorised_reporter选项卡中我使用ajax更新用户数据，在成功调用之后我正在重新加载页面。自上载后我默认显示#main_acount，重新加载后它将我带到#main_account但是我需要的是在页面上的成功ajax调用之后页面应该显示#authorised_reporter选项卡而不是#main_account选项卡

我尝试了以下但不工作，带我去#main_account

//other code not shown
success: function() {  
    location.reload();
    $('#authorised_reporter').css("display", "block");
    $('#main_account').css("display", "none");
    $("#sucess").show();
    $("#sucess").text("Changes has been updated."); 
}

Answer 1

尝试使用以下内容：

示例：1

$("#main_account").hide();

如果答案与您无关，请忽略它。

示例2

要获得优雅的降级，你可以坚持通过jQuery完成隐藏，只需将编辑<tr>行赋予一个类，例如<tr class="edit">然后使用jQuery在表外隐藏所有这些，如下所示：

<script type="text/javascript"> $(function() { $("tr #main_account").hide(); }); </script>

这种方法，而不是用CSS隐藏它们对于那些禁用JS的人来说更加友好，如果你可能有这样的用户，请使用这种.hide()方法。

Answer 2

您的更改可能不适用，

location.reload();

它将重新加载内容，之后部分成功功能将不起作用。如果你可以更具体，并提供更多的HTML，将能够给你一个答案。您也可以在jQuery中使用 .done（）。

ajax调用后重新加载到同一个tr上

2 个答案: