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 и внешних функций. И заработало. Может оно с чем-то там конфликтовало. Правда ошибок не видно было. Сейчас шаблон просто легче стал.

Новые блоги и статьи Все статьи Все блоги /
http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит переходные токи и напряжения на элементах схемы. . . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.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