Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: для новичков > передача значений переменных из Javascript в PHP

Автор: TetraHC 8.6.2009, 17:04

Всем добрый день! Пишу сайтик http://cabel.skrovla.ru

Одним из условия заказчика, было реализовать строку подсказки поиска - введите например букву "а" (русскую) в поле поиска кабеля, и вылезет подсказка.
Собсвенно элемент позиционирован как:

position:absolute

Так вот дело в том, что в зависимости от экрана браузера координаты поля ввода меняются. Из можно определить ТОЛЬКО через JAVASCRIPT, что я с успехом делаю. Но вот далее, надо вывести css файл с этими координатами (я делаю это на php), и вот тут вопрос - как передать значения left и top в php? Вариант через GET не прокатит, так как адреса у страницы php нет - это МОДУЛЬ JOOMLA.

Вопрос - как быть? Код:

Код


<?php

//ОПРЕДЕЛЕНИЕ ПОЛЬЗОВАТЕЛЯ

$user =&JFactory::getUser();
$usertype=$user->get('usertype');
if(($usertype=='Manager') or ($usertype=='Administrator') or ($usertype=='Super Administrator')){
$manager=1;
}
else{
$manager=0;
}
?>


//ОПРЕДЕЛЯЕМ РАЗМЕР ЭКРАНА
<script type="text/javascript">
function getElementPosition(elemId)
{
   var elem = document.getElementById(elemId);

   var w = elem.offsetWidth;
   var h = elem.offsetHeight;

   var l = 0;
   var t = 0;

   while (elem)
   {
       l += elem.offsetLeft;
       t += elem.offsetTop;
       elem = elem.offsetParent;
   }

   return {"left":l, "top":t, "width": w, "height":h};
}

<script language="JavaScript" type="text/javascript" src="./suggest/clienthint.js"></script>

    <div align="center">
<br>
            <form action="./index.php?option=com_hello&view=hello&task=search" name="myform" method="post">
                <input type=radio name="answer" value="1" checked>поиск везде  
                <input type=radio name="answer" value="2">поиск в новом  
                <input type=radio name="answer" value="3">поиск в госрезерве<br><br>
                <input type="text" name="mytext" size="40" id="txt4" onkeyup="showHint(this.value)" autocomplete="off">
                <input name="Submit" type=submit value="Искать">
                <br>
                <br>
                <div id="txtHint" align="center" style="width: 263px; height: 0px;"></div>
            </form>
        </div>
</body>
pos = getElementPosition("txt4");
var left = pos.left; 
var top = pos.top;
var width = pos.width;
var height = pos.height;
var x0=left;
var y0=top+height;
document.write(
"Угол левый x0-" + x0 + "[px] y0-" + y0 + "[px] ширина" + width + "[px]  Начальные данные top-" + top + " height-" + height + "."
);
<style type="text/css" media="screen">        
    }
    #txtHint {
        position: absolute;
        <?php
            if($manager!=1){
                echo "left: 719px;";
                echo "top: 316px;";
            }
            else{
                echo "left: 719px;";
                echo "top: 546px;";
            }
        ?>
        background-color: #FFFFFF; 
        text-align: left; 
        border: 1px solid #000000;
    }
</style>

Примечание - строка "<script language="JavaScript" type="text/javascript" src="./suggest/clienthint.js"></script>" отношения к делу не имеет, это javascript для передачи данных технологией AJAX

Собсвтенно на JAVA мы определяем postion left и top, и надо их вставить вместо текущий фиксированных позиций ( 719px, 316px для обычного юзера и 719px и 546px для менеджера).

PS Есть вариант отказатся от php и сделать вывод только методом JAVSACSRIPT (documet.write), но я так и смог заставить document.write выводить html код в тело страницы (хотел делать вставки кода типа <input name="name" value="width" type=hidden>

Автор: Aliance 9.6.2009, 08:37

Я думаю Вы копаете не в ту сторону. Зачем PHP что-то знать о координатах? Мухи отдельно, котлеты отдельно - помните?
Делайте при загрузке страницы автоформатирование на JS.

Автор: TetraHC 9.6.2009, 11:55

Цитата(Aliance @ 9.6.2009, 08:37)

А как мне тогда средствами JS вывести в тело html следующие строки:

Код


<style type="text/css" media="screen">        
    }
    #txtHint {
        position: absolute;
        echo "left: X";
        echo "top: Y";
     }
        background-color: #FFFFFF; 
        text-align: left; 
        border: 1px solid #000000;
    }
</style>

, где X и Y - координаты элемента <input id="txt4" ...>

?

Автор: Aliance 9.6.2009, 13:02

Код


window.onload = function()
{
    var elem = document.getElementById( 'txtHint' );
    elem.style.top = '30px';
    elem.style.left = '1000px';
}

Я показал как статично задать координаты. Тебе же нужно не статично, а динамически, прочитав их из соотв. координат нужного тебе элемента ( т.е. input с id='txt4' ). Как это сделать - ответит тебе поиск по форуму, просмотр прикрепленных тем и FAQа

Автор: TetraHC 9.6.2009, 13:07

Цитата(Aliance @ 9.6.2009, 13:02)

Код


window.onload = function()
{
    var elem = document.getElementById( 'txtHint' );
    elem.style.top = '30px';
    elem.style.left = '1000px';
}

Погоди, но ведь элемент c id="txt4' появится уже после выполение JS? Как же я узнаю при загрузки страницы положение того элемента, которого нет?

Кстати, спасибо за ответы и попытку мне помочь. Ты первый (!) кто это сделал на 3 форумах!

Автор: Aliance 9.6.2009, 13:09

window.onload - событие, которое выполнится только после полной загрузки документа вместе со всем его содержимым (подробнее о событиях - по ссылке у меня в подписи). После этого мы будем уже знать о существовании элемента с id равным txt4.

Автор: TetraHC 15.6.2009, 11:37

Итак, я продолжаю ковырять свою задачу. Немного разобрался с кодом, понял что такое window.onload. Пока, для отладки скрипта, не вешаю его на window.onload - как получу 100% рабочий вариант, то повешу.

Итак имеем код:

Код


<div align="center">
<br>
            <form action="./index.php?option=com_hello&view=hello&task=search" name="myform" method="post">
                
                <input type="text" size="40" id="txt4" onkeyup="showHint(this.value)" autocomplete="off">
                <input name="Submit" type=submit value="Искать">
                <br>
                <br>
                <div id="txtHint" align="center" valign="top" style="width: 50px; height: 0px;" bgcolor="white"></div>
            </form>
</div>
<script language="JavaScript" type="text/javascript">

function getElementPosition(elemId) {
var elem = document.getElementById(elemId);
var w = elem.offsetWidth;
var h = elem.offsetHeight;
var l = 0;
var t = 0;
while (elem) {
    l += elem.offsetLeft;
    t += elem.offsetTop;
    elem = elem.offsetParent;
}
return {"left":l, "top":t, "width": w, "height":h};}

var elem1 = document.getElementById('txtHint');
var p = getElementPosition('txt4');
var left=p["left"];
var top=p["top"];
var h=p["height"];
var w=p["width"]-2;

var x0=left-1;
var y0=top+h;
    elem1.style.left = x0 + 'px';
    elem1.style.top = y0 + 'px';
    //elem1.style.width = w + 'px';
document.write("x0 "+x0+"px y0 "+y0+"px.Слева "+left+"px Сверху "+top+"px Высота "+h+ "px Ширина "+w+"px");
</script>

Итак, что мы имеем с "Гуся"

1) Скрипт работает в FireFox, Opera. Но только не в IE - там он определяет координаты как 0
2) В IE не работает команда

Код


elem1.style.width = w + 'px';

Помогите одолеть эту Майкрософтовую гадину! Пример работы скрипта с определением координат тут - http://cabel.skrovla.ru

Автор: Aliance 15.6.2009, 15:30

Возможно это именно от того что ты не сделал как я говорил - не повесил скрипт в window.onload и IE не видит еще этого элемента. Это лечится нулевым setTimeout.
Еще проблема может быть в том, что для того чтобы прочитать какое-то свойство из elem.style.*, нужно чтобы оно было явно объхявлено для элемента (через стили, например).

Автор: TetraHC 15.6.2009, 16:15

Цитата(Aliance @ 15.6.2009, 15:30)

C windows.onload работа скрипта не связана никак - в теле html скрипт 100% выполняется после этого элемента. Фишка в том, что не срабатывает (именно в IE) функция getElementPosition - возращает нули на выходе. В других браузерах все ОК

Автор: Astraller 15.6.2009, 16:23

Цитата(TetraHC @ 15.6.2009, 16:15

)

C windows.onload работа скрипта не связана никак - в теле html скрипт 100% выполняется после этого элемента. Фишка в том, что не срабатывает (именно в IE) функция getElementPosition - возращает нули на выходе. В других браузерах все ОК

Фишка в том что этой функцией пользуется пол интернета, включая меня лично, и она вполне адекватно работает во всех актуальных браузерах.
А теперь скажите какой версии у вас IE.

Автор: TetraHC 15.6.2009, 19:24

7.0.5730.13 точная версия

Значит, функция рабочая? Хм. Очень интересно....

Автор: Astraller 15.6.2009, 20:33

В 7 версии работает точно, за 5 я бы не поручился, но начиная с 6....

Автор: TetraHC 15.6.2009, 22:09

Цитата(Astraller @ 15.6.2009, 20:33)

В 7 версии работает точно, за 5 я бы не поручился, но начиная с 6....

Ну тогда говоря русским языком "мой косяк". Но глаз уже так замылен на сайте, что не понимаю где...Я вроде 3 функции разные там проверил ( GETBOUNDS, в инете тоже есть) - т.е. где то косяк вне :(

Автор: Astraller 15.6.2009, 23:22

Цитата(TetraHC @ 15.6.2009, 22:09

)

Вы бы выложили в сеть примерчик какой-нить мы бы посмотрели и помогли если что smile

Автор: TetraHC 16.6.2009, 08:32

Листинг примера:

Код


<style type="text/css" media="screen">
    #txtHint {
        position: absolute;
        left: 800px;
        top: 300px;
        background-color: #FFFFFF; 
        text-align: left; 
        border: 1px solid #000000;
        background: #fc0;
    }
</style>
<!-- -->

<script language="JavaScript" type="text/javascript" src="./suggest/clienthint.js"></script>

    <div align="center">
<br>
            <form action="./index.php?option=com_hello&view=hello&task=search" name="myform" method="post">
                <input type="text" size="40" id="txt4" name="mytext" onkeyup="showHint(this.value)" autocomplete="off">
                <input name="Submit" type=submit value="Искать">
                <br>
                <br>
                <div id="txtHint" align="center" valign="top" style="width: 50px; height: 0px;" bgcolor="white"></div>
            </form>
        </div>
<script language="JavaScript" type="text/javascript">

/*function getElementPosition(elemId) {
var elem = document.getElementById(elemId);
var w = elem.offsetWidth;
var h = elem.offsetHeight;
var l = 0;
var t = 0;
while (elem) {
    l += elem.offsetLeft;
    t += elem.offsetTop;
    elem = elem.offsetParent;
}
return {"left":l, "top":t, "width": w, "height":h};}

var elem1 = document.getElementById('txtHint');
var p = getElementPosition('txt4');
var left=p["left"];
var top=p["top"];
var h=p["height"];
var w=p["width"]-2;*/

function getBounds(element)
{
  var left = element.offsetLeft;
  var top = element.offsetTop;
  for (var parent = element.offsetParent; parent; parent = parent.offsetParent)
  {
    left += parent.offsetLeft - parent.scrollLeft;
    top += parent.offsetTop - parent.scrollTop
  }
  return {left: left, top: top, width: element.offsetWidth, height: element.offsetHeight};
}

var elem1 = document.getElementById('txtHint');
var element = document.getElementById('txt4');
var bounds = getBounds(element);

var left=bounds.left;
var top=bounds.top;
var h=bounds.height;
var w=bounds.width-2;
var x0=left-1;
var y0=top+h;
    elem1.style.left = x0 + 'px';
    elem1.style.top = y0 + 'px';
    //elem1.style.width = w + 'px';
document.write("x0 "+x0+"px y0 "+y0+"px.Слева "+left+"px Сверху "+top+"px Высота "+h+ "px Ширина "+w+"px");
//var br=this.getBoundingClientRect();
//document.write("Top:"+br.top+", Left:"+br.left+", Right:"+br.right+", Bottom:"+br.bottom);
</script>

Автор: Aliance 16.6.2009, 08:52

getElementPosition возвращает объект, а не массив, и обращаться к нему стоит так: переменная_объекта.свойство

Автор: Astraller 16.6.2009, 09:10

Результат работы вашего скрипта:
FireFox3:
x0 404px y0 52px.Слева 405px Сверху 28px Высота 24px Ширина 266px
IE8:
x0 394px y0 59px.Слева 395px Сверху 35px Высота 24px Ширина 266px
IE6:
x0 467px y0 56px.Слева 468px Сверху 33px Высота 24px Ширина 266px

Автор: TetraHC 16.6.2009, 10:37

Что за фигня smile

Результат работы скрипта на готовом сайте http://cabel.skrovla.ru

IE 7:

x0 -1px y0 0px.Слева 0px Сверху 0px Высота 0px Ширина -2px

Alliance, попробую.

Значит, скрипт рушится только в окружении всего html

И, как всегда, спасибо за ответы! Продолжу ковырять!

Автор: Astraller 16.6.2009, 10:55

Цитата

Что за фигня Результат работы скрипта на готовом сайте http://cabel.skrovla.ru

IE8:
x0 835px y0 294px.Слева 836px Сверху 272px Высота 22px Ширина 273px

P.S. Cоряйте, до IE6 долго идти, он на работе smile

Автор: TetraHC 16.6.2009, 11:21

Проверил и я, очистив Куки и Кэш. На версии 7.0.5730.11 таже петрушка:

x0 -1px y0 0px.Слева 0px Сверху 0px Высота 0px Ширина -2px

Сейчас ставлю 8.0

Автор: Astraller 16.6.2009, 11:26

То-то я думал - зачем М$ с такой поспешностью отплевался IE7-IE8, это потому что даже в семье генетических уродов (IE*) может родится архиурод - IE7 smile

Автор: Soah 16.6.2009, 11:56

Цитата(Aliance @ 16.6.2009, 08:52

)

getElementPosition возвращает объект, а не массив, и обращаться к нему стоит так: переменная_объекта.свойство

http://dklab.ru/chicken/nablas/38.html

Цитата

Свойства (и методы, кстати, тоже) объекта — это просто элементы хэша. Для обращения к ним можно использовать две разновидности синтаксиса:

Код


var element1 = hash.element;
var element2 = hash['element'];

Автор: TetraHC 16.6.2009, 12:34

Мда, у меня отпад мозгов smile

IE 8.0

Работа скрипта:

x0 841px y0 294px.Слева 842px Сверху 272px Высота 22px Ширина 273px

Давить мелкософт надо за такое!

Автор: TetraHC 16.6.2009, 13:57

Так, ну вроде я все сделал С ВАШЕЙ ВЕЛИКОЙ ПОМОЩЬЮ! СПАСИБО ВСЕМ А теперь вопрос знатокам (я подвесил на событие window.onload) - можно ли обновление сделать чаще? А то я взял товар в корзину, сайт раздивнулся, а строчка поправиться только по событию (клик там ) или еще что

Автор: Astraller 16.6.2009, 14:03

Цитата(TetraHC @ 16.6.2009, 13:57

)

А то я взял товар в корзину, сайт раздивнулся, а строчка поправиться только по событию (клик там ) или еще что

1) А при добавлении в корзину почему не править все что нужно? smile

2) можно по setInterval'у проверять, но ИМХО - это заплатка.
3) Корзину можно сверстать так что-бы она не раздвигала диз сайта, ибо это тоже не хорошо.

Автор: Aliance 16.6.2009, 16:14

Есть событие window.onresize, но я бы действительно лучше сверстал ее так, чтобы ничего не раздвигалось.

Автор: TetraHC 16.6.2009, 20:40

PS Еще раз огромное спасибо Мужики, без вас и без направки Soah в личке даже бы и не подумал IE проверить на другую версию...Astraller, Alliance - тоже спасибо!

Последний вопрос, так сказать, на "вкусное" - как задать размер таблицы в пикселях? Скажу сразу, ответ

<table width="600px" ...> не прокатывает если есть вложенная таблица!

Автор: Aliance 17.6.2009, 09:40

Модератор: Пожалуйста, один топик - один вопрос.

TetraHC, с этим вопросом обратитесь в раздел Верстки.

Автор: TetraHC 17.6.2009, 11:37

Все, тогда спасибо, тему можно закрыть!