2013-09-20 2 views
0

HTML:перезарядка на том же тр после вызова Ajax

<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 #main_account нагрузки идентификатор показан и идентификатор #authorised_reporter является hidden.If #authorised_reporter щелкают #authorised_reporter находится в блоке дисплея и #main_account является на дисплее нет состояния. В закладке #authorised_reporter я обновляю данные пользователя с помощью ajax после вызова sucess. Я перезагружаю страницу. Так как onload я показываю #main_acount по умолчанию после перезагрузки, он принимает меня в #main_account, но то, что мне нужно, после успешного вызова ajax на странице pagereload страница должна отображать вкладку #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."); 
}  
+0

Можете ли вы создать демо? –

+0

Основная причина, по которой вы используете AJAX, заключается в том, что вы ** не ** должны отправить форму/перезагрузить страницу. Верните новый контент для затронутых/обновленных разделов в ответ на вызов AJAX, а затем обновите необходимые разделы страницы с помощью jQuery/JavaScript. –

ответ

0

Попробовать ниже:

Пример: 1

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

если ответ не связанные с вами, пожалуйста, не обращайте на него внимания.


Пример: 2

Чтобы иметь изящную с деградацией, а также, вы можете придерживаться бегов сделано с помощью JQuery, просто дать Отредактируйте <tr> строки класса, например, <tr class="edit"> затем скрыть все те сразу с JQuery за пределами таблицы, например:

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

Этот подход, вместо того, чтобы прятать их от летучей мыши с помощью CSS является более дружественным для тех, кто с JS отключен, если вы могли бы иметь аудитория таких пользователей, придерживайтесь этого подхода .hide().

0

Ваши изменения не могут применяться, поскольку,

location.reload(); 

Это перезагрузит содержание, а затем часть функции успеха не будет эффект. Если вы можете быть более конкретным и предоставить больше html, вы сможете дать вам ответ. Вы также можете использовать .done() в jQuery.

Смежные вопросы