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

@MirDj · Регистрация: 16.01.2013

Студворк — интернет-сервис помощи студентам

Здравствуйте. У меня есть меню на сайте:

HTML5
1
2
3
4
5
6
7
8
 <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:

HTML5
1
<div id="auth_block"></div>

Смысл которого в том, что при получении из ajax-a ответа, в него помещается все присланное содержимое, заменяя, то, что уже находится внутри него.

Мне надо чтобы внутри этого дива была строка:

HTML5
1
<td class="menu_home"><a id="link_navi" href="login.php">Войти</a></td>

тобишь вот так:

HTML5
1
<div id="auth_block"><td class="menu_home"><a id="link_navi" href="login.php">Войти</a></td></div>

чтобы при получении ответа от ajax-a вместо одной ячейки "Вход" подставлять две ячейки "Выход" и ссылку на профиль.

Все бы ничего, но не заменяется так как мне надо. Кнопки появляются сдвигая все меню, а не взамен той что надо.

Если делать так:

HTML5
1
<td class="menu_home"><div id="auth_block"><a id="link_navi" href="login.php">Войти</a></div></td>";

то ссылка заменяется на другую, а так как мне надо не хочет. Видимо я что-то делаю не так?
Кстати, для первого дива toolbar, в котором все меню находится стиль:

CSS
1
2
3
4
5
6
7
8
9
10
.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 стиль не назначен.
Помогите разобраться в чем беда.

@MirDj · 17.02.2014, 09:03 **[ТС]**

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

@dolte · 17.02.2014, 11:23

PHP
1
2
3
4
5
6
if(isset($_SESSION['login']))
{
 
}else{
 
}

@MirDj · 17.02.2014, 13:19 **[ТС]**

Сообщение от dolte

PHP
1
2
3
4
5
6
if(isset($_SESSION['login']))
{
 
}else{
 
}

Прошу прощения, а это тут причем? И к чему это? У меня проблема вообще не с этим, а с тем что когда срабатывает ajax запрос на проверку авторизован ли человек, то в элементе дива(указанного выше) должны исчезнуть ячейки таблицы и прийти от ajaxa другие, ответ приходит и авторизация проходит, но данные пришедшие от ajaxa не заменяют ячейки, а выводятся за пределами таблицы.

Да, кстати, страницы работают без перезагрузки контента, по этому даже если бы я не знал как делать проверку на авторизацию, то php код все равно бы не сработал и кнопки в меню не перезагрузились бы пока ВСЮ страницу не обновить, а мне так делать нельзя. На сайте mp3 плейер используется и для того, чтобы он не отключался, реализован сайт без полной перезагрузки страницы

@dolte · 17.02.2014, 13:27

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

@MirDj · 17.02.2014, 15:05 **[ТС]**

Сообщение от dolte

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

Ну по сути там обычный запрос к urlу

JavaScript
1
var fullurl = "http://домен.ru/login_auth.php";

Затем php скрипт проверяет пользователя и дальше отправляет ответ, например такой:

PHP
1
echo"Вы успешно авторизованы, ".$users."";

Потом опять js обрабатывает:

JavaScript
1
2
3
4
5
6
7
8
9
10
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>';
 
             }

Как видно из скрипта, сейчас приходится полностью всю таблицу обнавлять - так работает, а отдельно ячейки не обновляет почему-то. Может это особенность какая-=то разметки, о которой я что-то не знаю?

@dolte · 17.02.2014, 15:21

.innerHtml(); по сути заменяет всё содержимое блока, к которому он применим.
Чтобы обновить конкретную ячейку нужно .innerHtml(); применять к ней.
А ненужные просто кикать .empty();

я авторизацию делал таким макаром

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$(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 · 17.02.2014, 15:39 **[ТС]**

Сообщение от dolte

.innerHtml(); по сути заменяет всё содержимое блока, к которому он применим.
Чтобы обновить конкретную ячейку нужно .innerHtml(); применять к ней.
А ненужные просто кикать .empty();

я авторизацию делал таким макаром

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$(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(); добавлял то что мне нужно

Ну я вроде так и пытаюсь делать:

див элемент, внутри которого все должно замениться, в него помещаю ячейки

HTML5
1
<div id="auth_block"><td> Кнопка 1</td> <td> Кнопка 2</td><td> Кнопка 3</td></div>

с кнопками, которые в последствии должны замениться на те, что придут из .innerHtml();

HTML5
1
<td> Кнопка 5</td> <td> Кнопка 6</td>

Но этого не происходит. Т.е эти ячейки приходят на исходную страницу, но не вместо указанных ячеек внутри дива, а вообще за пределами всей таблицы, смещая все элементы

@dolte · 17.02.2014, 15:54

попробуйте не innerHtml а html

JavaScript
1
2
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 · 17.02.2014, 16:08 **[ТС]**

Сообщение от dolte

попробуйте не innerHtml а html

JavaScript
1
2
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>');
}

Если я делаю так:

JavaScript
1
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>');

То вообще ошибка скрипта какая-то. Нажимаю отправку данных для авторизации и вообще ничего не происходит. Или синтаксис неверный в этой строке или я чего-то не понимаю.

@dolte · 17.02.2014, 16:09

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

@MirDj · 17.02.2014, 16:24 **[ТС]**

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

@dolte · 17.02.2014, 16:49

document.getElementById('auth_block').ht ml

$("#auth_block").html

@MirDj · 17.02.2014, 17:25 **[ТС]**

Судя по просмотру исходного кода в браузере, то все осталось как и было:

HTML5
1
2
3
4
5
6
7
8
 <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>

Кнопка войти не исчезла, а вот кнопки дополнительные появились, но сдвинули всю таблицу:

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

@MirDj · 17.02.2014, 17:46 **[ТС]**

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

Новые блоги и статьи Все статьи Все блоги /
Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .
Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .	Фото: Daniel Greenwood kumehtar 13.11.2025	Расскажи мне о Мире, бродяга kumehtar 12.11.2025 — Расскажи мне о Мире, бродяга, Ты же видел моря и метели. Как сменялись короны и стяги, Как эпохи стрелою летели. - Этот мир — это крылья и горы, Снег и пламя, любовь и тревоги, И бескрайние. . .	PowerShell Snippets iNNOKENTIY21 11.11.2025 Модуль PowerShell 5. 1+ : Snippets. psm1 У меня модуль расположен в пользовательской папке модулей, по умолчанию: \Documents\WindowsPowerShell\Modules\Snippets\ А в самом низу файла-профиля. . .

@MirDj 3 / 3 / 2 Регистрация: 16.01.2013 Сообщений: 471
	17.02.2014, 09:03 [ТС]
	Тема еще актуальна. Неужели никто не знает как решить данную проблему 0

@dolte Человек 331 / 205 / 63 Регистрация: 04.02.2013 Сообщений: 1,223
	17.02.2014, 13:27
	Не сразу верно вас понял, просто я предложил вам делать проверку, ну и соответственно необходимую область обновлять. Будет проще если вы свой ajax запрос покажите. 0

@dolte Человек 331 / 205 / 63 Регистрация: 04.02.2013 Сообщений: 1,223
	17.02.2014, 16:09
	Что в консоли пишет ? 0

@MirDj 3 / 3 / 2 Регистрация: 16.01.2013 Сообщений: 471
	17.02.2014, 16:24 [ТС]
	Была другая ошибка, но сейчас её нет почему-то. Зато другая появилась : Uncaught TypeError: Object #<HTMLDivElement> has no method 'html' 0

@dolte Человек 331 / 205 / 63 Регистрация: 04.02.2013 Сообщений: 1,223
	17.02.2014, 16:49
	document.getElementById('auth_block').ht ml $("#auth_block").html 0

@MirDj 3 / 3 / 2 Регистрация: 16.01.2013 Сообщений: 471
	17.02.2014, 17:46 [ТС]
	А по просмотру кода в консоли, то див почему то оказывается за пределами таблицы вообще. Хотя в коде страницы див внутри таблицы и охватывает кнопку Войти 0