При получении из ajax-a ответа, в него поместить все присланное содержимое с заменой

MirDj

Здравствуйте. У меня есть меню на сайте:
 <div class="toolbar">
 
    <table><tr>
    <td class="menu_home" style="width:200px;">
Тут ссылка
</td>
<td class="menu_home"><a id="link_navi" href="login.php">Войти</a></td>
   </tr></table></div>
И есть еще div:
<div id="auth_block"></div>
Смысл которого в том, что при получении из ajax-a ответа, в него помещается все присланное содержимое, заменяя, то, что уже находится внутри него.Мне надо чтобы внутри этого дива была строка:
<td class="menu_home"><a id="link_navi" href="login.php">Войти</a></td>
тобишь вот так:
<div id="auth_block"><td class="menu_home"><a id="link_navi" href="login.php">Войти</a></td></div>
чтобы при получении ответа от ajax-a вместо одной ячейки "Вход" подставлять две ячейки "Выход" и ссылку на профиль. Все бы ничего, но не заменяется так как мне надо. Кнопки появляются сдвигая все меню, а не взамен той что надо.Если делать так:
<td class="menu_home"><div id="auth_block"><a id="link_navi" href="login.php">Войти</a></div></td>";
то ссылка заменяется на другую, а так как мне надо не хочет. Видимо я что-то делаю не так? Кстати, для первого дива toolbar, в котором все меню находится стиль:
.toolbar {
height: 47px;
background: rgba(49, 120, 175, 0.9);
align-text: center;
border:1px solid #666666;
position: fixed;
width: 100%;
z-index:1;
padding-left:2px;
}
для дива auth_block стиль не назначен. Помогите разобраться в чем беда.
14 ответов

MirDj

Тема еще актуальна. Неужели никто не знает как решить данную проблему


MirDj

if(isset($_SESSION['login']))
{
 
}else{
 
}


MirDj

if(isset($_SESSION['login']))
{
 
}else{
 
}
Прошу прощения, а это тут причем? И к чему это? У меня проблема вообще не с этим, а с тем что когда срабатывает ajax запрос на проверку авторизован ли человек, то в элементе дива(указанного выше) должны исчезнуть ячейки таблицы и прийти от ajaxa другие, ответ приходит и авторизация проходит, но данные пришедшие от ajaxa не заменяют ячейки, а выводятся за пределами таблицы. Да, кстати, страницы работают без перезагрузки контента, по этому даже если бы я не знал как делать проверку на авторизацию, то php код все равно бы не сработал и кнопки в меню не перезагрузились бы пока ВСЮ страницу не обновить, а мне так делать нельзя. На сайте mp3 плейер используется и для того, чтобы он не отключался, реализован сайт без полной перезагрузки страницы


MirDj

Не сразу верно вас понял, просто я предложил вам делать проверку, ну и соответственно необходимую область обновлять. Будет проще если вы свой ajax запрос покажите.


MirDj

Не сразу верно вас понял, просто я предложил вам делать проверку, ну и соответственно необходимую область обновлять. Будет проще если вы свой ajax запрос покажите.
Ну по сути там обычный запрос к urlу
var fullurl = "http://домен.ru/login_auth.php";
Затем php скрипт проверяет пользователя и дальше отправляет ответ, например такой:
echo"Вы успешно авторизованы, ".$users."";
Потом опять js обрабатывает:
if(xml3.readyState==4&&xml3.status==200) // Если все получилось без ошибок
          document.getElementById('content_div').innerHTML=xml3.responseText; // Отправляем в определенный див ответ php скрипта 
           var str_otv = xml3.responseText;
var val_otv=str_otv.search('Вы успешно авторизованы,') // Проверяем действительно ли пришел положительный ответ
if (val_otv!=-1) {  // Если да, то обрабатываем замену меню:
    var str_arr = xml3.responseText.split(","); //отделяем имя пользователя, чтобы поместить на кнопку меню
        var user_name = str_arr[str_arr.length-1];
          document.getElementById('auth_block').innerHTML='<table style="width:200px;"><tr><td class="menu_home"><a id="link_navi" data-pjax="#content" href="index.php">Главная</a> </td><td class="menu_home"><a id="link_navi" data-pjax="#content" href="a_dj.php">Аксессуары</a> </td><td class="menu_home"><a id="link_navi" data-pjax="#content" href="i_dj.php">История</a> </td><td class="menu_home"><a id="link_navi" data-pjax="#content" href="b_dj.php">Будущее</a> </td><td class="menu_home"><a id="link_navi" data-pjax="#content" href="user.php"><b>'+ user_name +'</a> </td><td class="menu_home"><a id="link_navi" data-pjax="#content" href="login.php?mode=exit">Выйти</a> </td> </tr></table>';
 
             }
Как видно из скрипта, сейчас приходится полностью всю таблицу обнавлять - так работает, а отдельно ячейки не обновляет почему-то. Может это особенность какая-=то разметки, о которой я что-то не знаю?


MirDj

.innerHtml(); по сути заменяет всё содержимое блока, к которому он применим. Чтобы обновить конкретную ячейку нужно .innerHtml(); применять к ней. А ненужные просто кикать .empty();я авторизацию делал таким макаром
$(document).ready(function(){
 $('.auth_block input[name=submit]').click(function(){
    $.ajax({
      type: 'POST',
      url: '/includes/auth.php',
      data: {
        mode: 'login',
        login: $('#form-login input[name=login]').val(),
        password: $('#form-login input[name=password]').val()
      },
      dataType: 'json',
      success: function(result){
        if(result.status)
          location.reload();
        else
         alert(result.message);
      }
    });
  });
 });
т.е если вам нужно сразу добавить что-то, то вместо location.reload(); я бы через .append(); добавлял то что мне нужно


MirDj

.innerHtml(); по сути заменяет всё содержимое блока, к которому он применим. Чтобы обновить конкретную ячейку нужно .innerHtml(); применять к ней. А ненужные просто кикать .empty();я авторизацию делал таким макаром
$(document).ready(function(){
 $('.auth_block input[name=submit]').click(function(){
    $.ajax({
      type: 'POST',
      url: '/includes/auth.php',
      data: {
        mode: 'login',
        login: $('#form-login input[name=login]').val(),
        password: $('#form-login input[name=password]').val()
      },
      dataType: 'json',
      success: function(result){
        if(result.status)
          location.reload();
        else
         alert(result.message);
      }
    });
  });
 });
т.е если вам нужно сразу добавить что-то, то вместо location.reload(); я бы через .append(); добавлял то что мне нужно
Ну я вроде так и пытаюсь делать:див элемент, внутри которого все должно замениться, в него помещаю ячейки
<div id="auth_block"><td> Кнопка 1</td> <td> Кнопка 2</td><td> Кнопка 3</td></div>
с кнопками, которые в последствии должны замениться на те, что придут из .innerHtml();
<td> Кнопка 5</td> <td> Кнопка 6</td>
Но этого не происходит. Т.е эти ячейки приходят на исходную страницу, но не вместо указанных ячеек внутри дива, а вообще за пределами всей таблицы, смещая все элементы


MirDj

попробуйте не innerHtml а html
document.getElementById('auth_block').html('<table style="width:200px;"><tr><td class="menu_home"><a id="link_navi" data-pjax="#content" href="index.php">Главная</a> </td><td class="menu_home"><a id="link_navi" data-pjax="#content" href="a_dj.php">Аксессуары</a> </td><td class="menu_home"><a id="link_navi" data-pjax="#content" href="i_dj.php">История</a> </td><td class="menu_home"><a id="link_navi" data-pjax="#content" href="b_dj.php">Будущее</a> </td><td class="menu_home"><a id="link_navi" data-pjax="#content" href="user.php"><b>'+ user_name +'</a> </td><td class="menu_home"><a id="link_navi" data-pjax="#content" href="login.php?mode=exit">Выйти</a> </td> </tr></table>');
}


MirDj

попробуйте не innerHtml а html
document.getElementById('auth_block').html('<table style="width:200px;"><tr><td class="menu_home"><a id="link_navi" data-pjax="#content" href="index.php">Главная</a> </td><td class="menu_home"><a id="link_navi" data-pjax="#content" href="a_dj.php">Аксессуары</a> </td><td class="menu_home"><a id="link_navi" data-pjax="#content" href="i_dj.php">История</a> </td><td class="menu_home"><a id="link_navi" data-pjax="#content" href="b_dj.php">Будущее</a> </td><td class="menu_home"><a id="link_navi" data-pjax="#content" href="user.php"><b>'+ user_name +'</a> </td><td class="menu_home"><a id="link_navi" data-pjax="#content" href="login.php?mode=exit">Выйти</a> </td> </tr></table>');
}
Если я делаю так:
document.getElementById('auth_block').html('<td class="menu_home"><a id="link_navi" data-pjax="#content" href="user.php"><b>'+ user_name +'</a> </td><td class="menu_home"><a id="link_navi" data-pjax="#content" href="login.php?mode=exit">Выйти</a> </td>');
То вообще ошибка скрипта какая-то. Нажимаю отправку данных для авторизации и вообще ничего не происходит. Или синтаксис неверный в этой строке или я чего-то не понимаю.


MirDj

Что в консоли пишет ?


MirDj

Была другая ошибка, но сейчас её нет почему-то. Зато другая появилась : Uncaught TypeError: Object # has no method 'html'


MirDj

document.getElementById('auth_block').html$("#auth_block").html


MirDj

Судя по просмотру исходного кода в браузере, то все осталось как и было:
 <table style="width:200px;"><tr>
    <td class="menu_home"><a id="link_navi" data-pjax='#content' href="index.php">Главная</a> </td>
<td class="menu_home"><a id="link_navi" data-pjax='#content' href="a_dj.php">Аксессуары</a> </td>
<td class="menu_home"><a id="link_navi" data-pjax='#content' href="i_dj.php">История</a> </td>
<td class="menu_home"><a id="link_navi" data-pjax='#content' href="b_dj.php">Будущее</a> </td>
<div id="auth_block">
<td class="menu_home"><a id="link_navi" data-pjax="#content" href="login.php">Войти</a></td>         </div>
    </tr></table>
Кнопка войти не исчезла, а вот кнопки дополнительные появились, но сдвинули всю таблицу:


MirDj

А по просмотру кода в консоли, то див почему то оказывается за пределами таблицы вообще. Хотя в коде страницы див внутри таблицы и охватывает кнопку Войти