ajaxLoad - окно в окне после запроса. Как убрать?

@zbs2000 · Регистрация: 23.06.2012

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

Помогите пож

Есть JS код

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<script language=JavaScript>
<!--
function getObj(objID)
{
    if (document.getElementById) {return document.getElementById(objID);}
    else if (document.all) {return document.all[objID];}
    else if (document.layers) {return document.layers[objID];}
}
 
function ajaxLoad(obj,url,defMessage,post,callback){
  var ajaxObj;
  if (defMessage) document.getElementById(obj).innerHTML=defMessage;
  if(window.XMLHttpRequest){ 
      ajaxObj = new XMLHttpRequest(); 
  } else if(window.ActiveXObject){ 
      ajaxObj = new ActiveXObject("Microsoft.XMLHTTP");  
  } else { 
      return; 
  } 
  ajaxObj.open ((post?'POST':'GET'), url);
  if (post&&ajaxObj.setRequestHeader)
    //  ajaxObj.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=windows-1251;");
        ajaxObj.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=utf-8;");
 
  ajaxObj.onreadystatechange = ajaxCallBack(obj,ajaxObj,(callback?callback:null));
  ajaxObj.send(post); 
  return false;
  } 
function updateObj(obj, data, bold, blink){ 
   if(bold)data=data.bold();
   if(blink)data=data.blink();
   document.getElementById(obj).innerHTML = data; // упрощенный вариант, работает не во всех браузерах
  } 
function ajaxCallBack(obj, ajaxObj, callback){
return function(){
    if(ajaxObj.readyState == 4){
       if(callback) if(!callback(obj,ajaxObj))return;
       if (ajaxObj.status==200)
        updateObj(obj, ajaxObj.responseText);
       else updateObj(obj, ajaxObj.status+' '+ajaxObj.statusText,1,1);
    }
}}
 
//-->
</script>

есть список который активирует запрос в базу и отправляет результат в 'info' div.

Список в HTML выглядит вот так:

HTML5
1
2
<select style="WIDTH: 200px; height:21px" name="single" id="single" onchange="getObj('info').disabled=''; ajaxLoad('info', '<?=$script?>?single='+this.options[this.selectedIndex].value+'&add_rol_subgr='+document.getElementById('subgr').options[document.getElementById('subgr').selectedIndex].value,'','','');" <?=(@$id_single?'':'disabled="disabled"') ?> >
</select>

Туда еще опции подгружаются из базы - там все ок.

Как бы все нормально работает, только в инфо диве после вывода нужной формы появляется все окно - из которого был сделан ajax запрос. Тоесть то старое окно с инфо дивом. И в єтом инфо диве такое же окно, только еще и с формой, которая должна была быть в инфо диве. Как убрать не подскажете чтобы в инфо диве не появлялось все окно, а только форма и все. ? Мож кто знает?

@kalabuni · 12.08.2012, 01:15

zbs2000, на какой помойке вы выкопали столь древний скрипт?
1. на хрена комментарии в скриптовом блоке?
2. на хрена функция getObj (), если в других функциях вы её не используете, а прямо пишете единственный метод getElementById ()?
3. на хрена "application/x-www-form-urlencoded" и метод post, если посылаете чисто текст и без всякой формы?
и прочее-прочее-прочее...

AJAX - удивительно простая технология.
Вся она свободно укладывается в пять-шесть строчек кода.
У вас же... посчитайте сами.
Попытки "заумничания" ведут к глупейшим ошибкам.
-----

По сути помочь вам трудно, ибо, во-первых, вы не дали HTML-кода тега <SELECT>, а дали его заготовку с PHP-вставками; во-вторых - вы не дали HTML-кода тега с id="info", в котором у вас и возникают проблемы.

@zbs2000 · 12.08.2012, 17:11 **[ТС]**

Скрипт взял на форуме. В нем только поменял кодировку. Так как смог предположить что кодировка как-то могла влиять. Экспериментальным путем узнал что она не влияет. Ну так и осталось. UTF-8 поставил потому, что сайт на этой кодировке.

getObj - взял там же на форуме.

info div пустой вообще

<option>выводится вот так:

PHP
1
2
3
4
5
6
7
8
9
f(is_numeric($_GET['subgr'])){/* risovat single */
        $id_subgr=intval($_GET['subgr']);
            $res_single = mysql_query("SELECT * FROM `rol` WHERE `rol_type`='single' AND `rol_in_gr`='".$id_subgr."' ORDER by id;")or die(mysql_error());
            echo "<option value='0' selected >выберите</option>\n";
            while($res_single2 = mysql_fetch_array($res_single)){
            echo "<option value='".$res_single2['id']."'>".$res_single2['id']."&nbsp;".$res_single2['rol_name']."</option>\n";
        };
        
    } else {/* ne delat nichego */};

После этого выводится список . все значения в норме. А когда выбираешь один из пунктов <select>. Срабатывает то что написано по onchange оно имеет такой вид в <select>:

HTML5
1
2
3
4
5
<select style="WIDTH: 200px; height:21px" name="single" id="single" onchange="getObj('info').disabled=''; ajaxLoad('info', '<?=$script?>?single='+this.options[this.selectedIndex].value+'&add_rol_subgr='+document.getElementById('subgr').options[document.getElementById('subgr').selectedIndex].value,'','','');" <?=(@$id_single?'':'disabled="disabled"') ?> >
//
Тут идут <option> которые выводятся скриптом выше из mysql. И они действительно есть и нормальные.
//
</select>

Потом вкогда выбираешь один из

HTML5
1
 <option>

Он находит свой обработчик

PHP
1
if ()

. Он находится. И выводит даданные которые выводятся через

PHP
1
 echo 'some data';

в

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

. Все хорошо и данные те, только к данным которые выводятся с помощью

PHP
1
 echo 'some data';

еще прилипает страница которая находится вокруг

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

. Как -то бы сказать, чтобы в инфо див попадали только данные из echo и никаких больше.

Сильно не пинайте пожалуйста. Что такое Ajax узнал неделю назад. Но уже чувствую что технология хорошая. Прошу прощения за некоторые "кривые" вопросы и попытки путей решения. Постараюсь как можно быстрее сократить путь к "красивым" вопросам.

Зараннее благодарен

@kalabuni · 12.08.2012, 18:08

Повторяю!
Нужен браузерный код (браузерный, а не заготовка со вставками PHP-кода) того, что написано в открывающем теге <SELECT>.

<select style="width: 200px; height: 21px" name="single" id="single" onchange="что_именно_ВИДИТ_БРАУЗЕР_здесь?">

Запустите страницу в браузере, посмотрите "Исходный код" и сделайте копи-паст сюда.
-----

* HTML-код тегов <OPTION> не нужен.
* PHP-код не нужен совсем.

@zbs2000 · 12.08.2012, 20:51 **[ТС]**

ок сейчас сделаю 1 мин

Добавлено через 5 минут
По Ctrl-U Firefox

HTML5
1
2
<select style="WIDTH: 200px; height:21px" name="single" id="single" onchange="getObj('info').disabled=''; ajaxLoad('info', '/cab/rol_admin.php?single='+this.options[this.selectedIndex].value+'&add_rol_subgr='+document.getElementById('subgr').options[document.getElementById('subgr').selectedIndex].value,'','','');" disabled="disabled" >
        </select>

Добавлено через 4 минуты
Странно на экране у меня div info не пустой. А в коде :

HTML5
1
<div id="info" style="border: solid green 2px; overflow:auto;"></div>

может надо по другому смотреть?

@kalabuni · 13.08.2012, 00:24

Ну давайте разберём то, что вы написали в onchange

Первый оператор: getObj ('info').disabled = '';
Это что?
Тег с id="info" - это у вас <DIV>.

Где и когда вы видели "задисабленный" тег <DIV>? В какой-такой страшной сказке?
Читаем стандарт HTML4.01 и видим, что атрибут DISABLED поддерживается только у тегов <BUTTON>, <INPUT>, <OPTGROUP>, <OPTION>, <SELECT> и <TEXTAREA>. В HTML5 этот атрибут поддерживают ещё и теги <COMMAND>, <FIELDSET> и <KEYGEN>.
Ну и где вы тут <DIV> видите?

Ладно, про AJAX вы узнали неделю назад...
А про HTML вы когда узнали? Две недели назад?

Вычёркиваем, как полную и бесполезную глупость.
Согласны?
-----

Второй оператор: ajaxLoad ('info', '/cab/rol_admin.php?single=' + this.options [this.selectedIndex].value + '&add_rol_subgr=' + document.getElementById ('subgr').options [document.getElementById ('subgr').selectedIndex].value, '', '', '')

Вызываете функцию ajaxLoad (), которой передаёте два аргумента и три пустоты.
Почему здесь не воспользовались функцией getObj () при обращении к элементу с id="subgr"?
Или эта функция у вас предназначена только для глупого "задисабливания" div'ов?

Запись ведь станет короче на десяток символов:
ajaxLoad ('info', '/cab/rol_admin.php?single=' + this.options [this.selectedIndex].value + '&add_rol_subgr=' + getObj ('subgr').options [getObj ('subgr').selectedIndex].value, '', '', '')

Согласны?
-----

Итак вызвали функцию.
Рассматриваем её.

JavaScript
1
2
3
function ajaxLoad (obj, url, defMessage, post, callback)
{
var ajaxObj;

Стоп! Типичная ошибка.
Объект HTTP-реквест выполняется ВНЕ функций (по крайней мере при назначении ему onreadystatechange) и должен поэтому быть ГЛОБАЛЬНЫМ.
Значит, var здесь никоим образом прописывать нельзя - первую строку функции вычёркиваем.

Далее:

JavaScript
1
if (defMessage) document.getElementById (obj).innerHTML = defMessage;

Нахрена, если DIV изначально пустой?
Но почему опять не используем getObj ()?
Переписываем:

JavaScript
1
if (defMessage) getObj (obj).innerHTML = defMessage;

Далее:

JavaScript
1
2
3
if (window.XMLHttpRequest) ajaxObj = new XMLHttpRequest (); 
else if (window.ActiveXObject) ajaxObj = new ActiveXObject ('Microsoft.XMLHTTP');  
else return;

Для чего написан последний else? Для красоты?
Проще будет так (в одну строчку):

JavaScript
1
ajaxObj = ('v' == '\v') ? new ActiveXObject ('Microsoft.XMLHTTP') : new XMLHttpRequest ();

Далее:

JavaScript
1
ajaxObj.open ((post ? ' POST' : 'GET'), url);

Если ВДРУГ значения value, кое вы отправляете из двух тегов <SELECT> содержат не ASCII-символы (кириллические, к примеру), то здесь могут быть проблемы. Здесь вообще-то надо использовать метод encodeURIComponent (). Но бум надеяться, что символы у вас не кириллические.

Далее:

JavaScript
1
2
if (post && ajaxObj.setRequestHeader)
   ajaxObj.setRequestHeader ('Content-Type', 'application/x-www-form-urlencoded; charset=utf-8');

Никому не нужный бред, но при пустом аргументе post он никому не мешает. Пусть висит.

Далее:

JavaScript
1
ajaxObj.onreadystatechange = ajaxCallBack (obj, ajaxObj, callback ? callback : null);

Вот здесь ваша главная ошибка.
Когда поименованную функцию назначают скриптом - прописывать можно только имя функции. Вот так:
ajaxObj.onreadystatechange = ajaxCallBack;
И никаких скобок!
Передать поименованной функции аргументы при скриптовом назначении НЕЛЬЗЯ!
Как только прописываете скобки, то функция не назначается, а моментально исполняется.
И это не AJAX - это проcтой Javascript, о котором вам, видимо, не повезло узнать ни неделю назад, ни две...
Значится, переписываете, как указано выше, без скобок.

Далее:

JavaScript
1
2
3
ajaxObj.send (post); 
return false;
}

Раз post у вас пустой, то можно оставить. Хотя и бред это.
Но чего вы тут отменяете самой последней строкой функции?
Событие onchange отменить нельзя. Строка эта бесполезна. Вычёркивайте.
-----

Разбирать далее надо функцию ajaxCallBack ().
Но "рука бойца колоть устала"... разбирать бред неохота.
Поэтому просто быстренько напишу рабочий вариантик:

JavaScript
1
2
function ajaxCallBack () 
{if (ajaxObj.readyState == 4) getObj ('info').innerHTML = ajaxObj.responseText}

-----
В общем, как видите, если не писать с умным видом глупости, то всё уложится в пять-шесть строк.

@zbs2000 · 14.08.2012, 01:03 **[ТС]**

Ого спасибо. Сейчас только не спеша прочитаю и попробую, чтобы не задавать больше глупых вопросов .

Добавлено через 18 минут
Ого спасибо. Сейчас только не спеша прочитаю и попробую, чтобы не задавать больше глупых вопросов .

Добавлено через 10 часов 50 минут
Сейчас скрипт имеет такой вид. Пробовал сделать согласно Ваших подсказок. Но при этом функциональность либо нарушалась либо вообще исчезала. Это проявлялось в следующем:
1) при убирании скобок для вызова функции сдесь ajaxObj.onreadystatechange = ajaxCallBack(obj,ajaxObj,(callback?callb ack:null)); Когда убрал вообще ничего не выводилось. Вы можете сказать что надо еще и функцию ajaxCallBack заменить на Ваш вариант. Делал это и получилось еще интереснее все стало выводиться в div info. А там надо сначала выводить на одни id потом на другие. Получается из функции ajaxLoad изнутри надо управлять выводом. Тоесть подставлять то одни ид то другие. А он то и делалось как раз в тех скобках, что я попробовал закомментировать. Там все подставлялось. А разве той функции вредит то что она исполняется немедленно ? Ведь ajaxLoad то вызывается из HTML много раз с разными параметрами. И он и ajaxCallBack и ajaxLoad должны исполняться немедленно ? правильно?
2) А можно еще спросить что вот это ('v' == '\v') делает? Точнее что означает. Я понял что браузер определяет по всей видимости. Если есть дока и долго рассказывать бросьте ссылкой пож.
3) А страницу в странице так как выводило так и выводит не зависимо от всего выше написанного. Интуитивно почувствовал что это где-то в функции ajaxCallBack наверно. Там же ж вывод правильно? А да еще пробовал Ваш вариант полностью - тоже самое - в info div запихивает всю старую страницу.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<script type="text/javascript">
<!--
function getObj(objID)
{
    if (document.getElementById) {return document.getElementById(objID);}
    else if (document.all) {return document.all[objID];}
    else if (document.layers) {return document.layers[objID];}
}
 
function ajaxLoad(obj,url,defMessage,post,callback){
 // var ajaxObj; 
    ajaxObj = ('v' == '\v') ? new ActiveXObject ('Microsoft.XMLHTTP') : new XMLHttpRequest ();
  //~ if (defMessage) getObj(obj).innerHTML=defMessage;
  //~ if(window.XMLHttpRequest){ 
      //~ ajaxObj = new XMLHttpRequest(); 
  //~ } else if(window.ActiveXObject){ 
      //~ ajaxObj = new ActiveXObject("Microsoft.XMLHTTP");  
  //~ } else { 
      //~ return; 
  //~ } 
  ajaxObj.open ((post?'POST':'GET'), url);
  if (post&&ajaxObj.setRequestHeader)
    //  ajaxObj.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=windows-1251;");
        ajaxObj.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=utf-8;");
 
  ajaxObj.onreadystatechange = ajaxCallBack(obj,ajaxObj,(callback?callback:null));
// ajaxObj.onreadystatechange = ajaxCallBack;
  ajaxObj.send(post);
  return false;
  } 
function updateObj(obj, data, bold, blink){ 
   if(bold)data=data.bold();
   if(blink)data=data.blink();
   document.getElementById(obj).innerHTML = data; // упрощенный вариант, работает не во всех браузерах
  }
// function ajaxCallBack (){if (ajaxObj.readyState == 4) getObj ('info').innerHTML = ajaxObj.responseText}
function ajaxCallBack(obj, ajaxObj, callback){
    return function(){
     if(ajaxObj.readyState == 4){
        if(callback) if(!callback(obj,ajaxObj))return;
        if (ajaxObj.status==200)
        updateObj(obj, ajaxObj.responseText);
        else updateObj(obj, ajaxObj.status+' '+ajaxObj.statusText,1,1);
     }
}}
 
//-->
 
</script>

@kalabuni · 15.08.2012, 04:23

1. ajaxObj - это у вас ОБЪЕКТ.
А любому объекту можно назначить любое нужное вам свойство и этому свойству дать нужное вам значение.

И кто вам мешает перед
ajaxObj.onreadystatechange = ajaxCallBack;
ajaxObj.send ();
прописать ajaxObj.conteinerID = obj;,

а в моём варианте функции ajaxCallBack () прописать
getObj (ajaxObj.conteinerID).innerHTML = ajaxObj.responseText;?

И таким образом закрыть проблему разных контейнеров для вывода респонса.

Ещё раз - назначать поименованную функцию на событие можно только указанием имени функции безо всяких скобок после имени.
У этого правила НЕТ исключений!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

2.

JavaScript
1
2
if ('v' =='\v') alert ('Это браузер MSIE');
else alert ('А это НЕ браузер MSIE');

-----

И уберите вы всю ненужную муть - defMessage, post, callback вам для вашей задачи не нужны.
Уберите их из определений функций, и все упоминания этих ненужностей внутри функций также уберите.
Соответственно, и при вызове вам не надо будет три пустоты прописывать.

@zbs2000 · 15.08.2012, 13:00 **[ТС]**

>>И уберите вы всю ненужную муть - defMessage, post, callback вам для вашей задачи не нужны.

сейчас буду убирать

Добавлено через 1 час 5 минут
Вот что получилось в итого:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script type="text/javascript">
<!--
function getObj(objID){
    if (document.getElementById) {return document.getElementById(objID);}
    else if (document.all) {return document.all[objID];}
    else if (document.layers) {return document.layers[objID];}
};
function ajaxLoad(obj,url){
    ajaxObj = ('v' == '\v') ? new ActiveXObject ('Microsoft.XMLHTTP') : new XMLHttpRequest ();
    ajaxObj.open ('GET',url);
    ajaxObj.conteinerID = obj;
    ajaxObj.onreadystatechange = ajaxCallBack;
    ajaxObj.send ();
}; 
function ajaxCallBack (){
    if (ajaxObj.readyState == 4){
        getObj (ajaxObj.conteinerID).innerHTML = ajaxObj.responseText;
        };
};
//-->
</script>

Правда глюк который я называл окно в окне так и не ушел. Но метдом экстперимента я сделал новый чистый шаблон страницы и поместил код туда. Он заработал и работает нормально. Из этого понял что проблема была не в в коде JS & AJAX а где-то скорее всего в шаблоне самом. Ну и Бог с ним . Сделал другой и все на этом. Хочу сказать спасибо kalabuni от него узнал много интересного и полезного. Еща раз спасибо.

@kalabuni · 15.08.2012, 13:16

zbs2000, комментарии уберите (которые после <script> и перед </script>), в данном случае они не нужны.

Да и самую первую функцию упростите до

JavaScript
1
function getObj (objID) {return document.getElementById (objID)}

@zbs2000 · 15.08.2012, 14:26 **[ТС]**

убрал \ упростил ...

Да ладно ниче. Спасибо. Переделал шаблон без излишков css и внешних функций. И заработало. Может оно с чем-то там конфликтовало. Правда ошибок не видно было. Сейчас шаблон просто легче стал.

Новые блоги и статьи Все статьи Все блоги /
Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .
Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ	Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	12.08.2012, 01:15
	zbs2000, на какой помойке вы выкопали столь древний скрипт? 1. на хрена комментарии в скриптовом блоке? 2. на хрена функция getObj (), если в других функциях вы её не используете, а прямо пишете единственный метод getElementById ()? 3. на хрена "application/x-www-form-urlencoded" и метод post, если посылаете чисто текст и без всякой формы? и прочее-прочее-прочее... AJAX - удивительно простая технология. Вся она свободно укладывается в пять-шесть строчек кода. У вас же... посчитайте сами. Попытки "заумничания" ведут к глупейшим ошибкам. ----- По сути помочь вам трудно, ибо, во-первых, вы не дали HTML-кода тега <SELECT>, а дали его заготовку с PHP-вставками; во-вторых - вы не дали HTML-кода тега с id="info", в котором у вас и возникают проблемы. 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	12.08.2012, 18:08
	Повторяю! Нужен браузерный код (браузерный, а не заготовка со вставками PHP-кода) того, что написано в открывающем теге <SELECT>. <select style="width: 200px; height: 21px" name="single" id="single" onchange="что_именно_ВИДИТ_БРАУЗЕР_здесь?"> Запустите страницу в браузере, посмотрите "Исходный код" и сделайте копи-паст сюда. ----- * HTML-код тегов <OPTION> не нужен. * PHP-код не нужен совсем. 0

@zbs2000 0 / 0 / 1 Регистрация: 23.06.2012 Сообщений: 29
	15.08.2012, 14:26 [ТС]
	убрал \ упростил ... Да ладно ниче. Спасибо. Переделал шаблон без излишков css и внешних функций. И заработало. Может оно с чем-то там конфликтовало. Правда ошибок не видно было. Сейчас шаблон просто легче стал. 0