ajax + js.tooltip
есть файл index.php (в него приходит вся информация)
файл pcl_tooltip.js (это файл с кодом для всплывающих подсказок) in-search.php (тут обрабатывается Ajax и формируется результат) вобщем проблема в следующем - если подключить файл pcl_tooltip.js в index.php то результат в файле in-search.php его не видит я думал что если результат выводится в файл index то скрипт должен подхватыватся вопрос: как мне подключить файл js чтоб он работал при формировании результата? |
Цитата:
1) Индексный файл - подключение css/js и вывод. Если все запросы через него, то это вообще одно место (шаблон шапки), где будет подключение медиа ресурсов. 2) Если окно запрашивают в индексном файле, а файл обработчик ajax запросов, это in-search.php (адрес запроса), то достаточно подключения pcl_tooltip.js в индексном файле. 3) Если окно запрашивают в индексном файле, а файл обработчик ajax запросов, это in-search.php, но адресом запроса является также индексный файл, то достаточно подключения pcl_tooltip.js в индексном файле, и в нем же подключается search.php, но по наличию ajax запроса. 4) Если файл in-search.php он не только обрабатывает ajax запрос, но и формирует html-код страницы, на которой и запрашивается это окно, то pcl_tooltip.js обязательно должен подключатся при запросе этого файла. Адресом ajax запроса при этом будет текущий URL. Так что разберитесь, что такое pcl_tooltip.js, где оно требуется и подключайте соответственно. |
index.php
<!DOCTYPE html>
<html>
<head>
<title>Выбор марки и модели автомобиля</title>
<!-- Подключаем библиотеку jQuery -->
<script src="//libs.raltek.ru/libs/jquery/1.8.3/js/jquery-1.8.3.js"></script>
<!-- Подключаем таблицу стилей -->
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!-- Подключаем JavaScript-файл с нашим сценарием, который и будет получать данные об автомобилях -->
<script src="js/custom.js"></script>
<script src="js/table.js"></script>
<script src="js/search.js"></script>
<script src="js/pcl_tooltip.js"></script>
</head>
<body onload="PCL_TooltipInit();">
<div id="info" >
</div>
<span title="<h1 style='margin:0px; padding:0px; text-align:center; color:#FF0000;'>Я подсказка!</h1><img src='example.gif' >">Подсказка с HTML-кодом</span>
</body>
</html>
подключаю скрипт tooltips Код:
<script src="js/pcl_tooltip.js"></script>Код:
<body onload="PCL_TooltipInit();">Код:
<span title="<h1 style='margin:0px; padding:0px; <div id="info" > </div> сюда текст попадает с этого файла in-search.php <?php
include('db.php');
$searchq = $_GET['name'];
$amortizators = searchJoin($searchq);
//$amortizators = searchAjax($searchq);
//print_r ($amortizators);
$getKurs = kurs();
$kurs = "";
foreach($getKurs AS $k){
$kurs = $k['KURS_EURO'];
}
?>
<hr/>
<div class="tbl-header">
<table cellpadding="0" cellspacing="0" border="0">
<thead>
<tr>
<th>AUTO</th><th>YEAR</th><th>RANGE</th><th>INSTALL</th><th>NUMBER</th><th>STATUS</th><th>PRICE, ГРН.</th>
</tr>
</thead>
</table>
</div>
<div class="tbl-content" id="infox">
<table>
<?php foreach($amortizators as $amort): ?>
<?php
$price = round($kurs * $amort['PRICE_EURO']);
if($amort['correction'] != ''){
echo "<tr><td colspan='7'><hr /></td></tr>";
echo "<tr><td>". ucfirst($amort['marka_name']). " " . ucfirst($amort['model_name']). "</br>".$amort['car_name'] ."</br>". $amort['correction']."</td><td>"
. $amort['year'] . "</td><td>"
. $amort['range_type'] . "</td><td>"
. $amort['install'] . "</td><td>"
. $amort['art_number']. "</td><td>"
. $amort['status']. "</td><td>"
. $price;
}else{
echo "<tr><td>". ucfirst($amort['marka_name']). " " . ucfirst($amort['model_name']). " ".$amort['car_name'] ."</td><td>" .
$amort['year'] . "</td><td>"
. $amort['range_type'] . "</td><td>"
. $amort['install'] . "</td><td>"
. $amort['art_number']. "</td><td>"
. $amort['status']. "</td><td>"
. $price;
}
?>
</td>
</tr>
<?php endforeach; ?>
</table>
<span title="<h1 style='margin:0px; padding:0px; text-align:center; color:#FF0000;'>Я тоже подсказка!</h1><img src='example.gif' >">Подсказка с HTML-кодом</span>
</div>
и тут подсказка уже не работает я уже и так пробовал подгружать, и ничего не получилось Код:
<script type="text/javascript"> |
Вопрос надо было ставить иначе и код вызывающий проблемы, а не ... У вас проблема в следующем - pcl_tooltip.js при загрузке страницы устанавливает подсказки на какие-то элементы. То что загружено Ajax, это динамическое добавление новых элементов в документ, на момент body onload их не было на странице, а значит и не будет у них подсказок.
Для того чтобы работало, нужно после получения ответа сервера и добавления его в документ заново инициализировать плагин. Если есть документация на него, читать, возможно у него есть метод для этого. |
да, есть метод
ну я его поидее и вызываю, но видимо не там где надо есть метод PCL_TooltipUpdate() и есть PCL_TooltipInit() (но PCL_TooltipUpdate() вызывается в нём) попробовал вызывать PCL_TooltipUpdate() в конце </body> Код:
<script type="text/javascript"> PCL_TooltipUpdate(); </script>// Для каких элементов устанавливать подсказки
var tooltiptags = ['a', 'img', 'span'];
var tooltip_lehgth=0;
var show=false;
// Показать всплывающую подсказку
function PCL_TooltipShow(e) {
// Получить событие
var e = e ? e : window.event;
var doc = document.documentElement;
var body = document.body;
// Получить текущие координаты мыши
// Используется короткий метод определения IE от Gareth Heyes
if ("\v" == "v") {
var mouse_x = e.clientX;
if (doc.clientLeft) { mouse_x -= doc.clientLeft; }
if (doc && doc.scrollLeft) { mouse_x += doc.scrollLeft; }
if (body && body.scrollLeft) { mouse_x += body.scrollLeft; }
var mouse_y = e.clientY;
if (doc.clientTop) { mouse_y -=doc.clientTop; }
if (doc && doc.scrollTop) { mouse_y += doc.scrollTop; }
if (body && body.scrollTop) { mouse_y += body.scrollTop; }
}
else {
var mouse_x=e.pageX;
var mouse_y=e.pageY;
}
var my_width = 0;
var my_height = 0;
// Получить размеры видимой области экрана
if (typeof(window.innerWidth) == 'number') {
my_width = window.innerWidth;
my_height = window.innerHeight;
}
else if (doc && (doc.clientWidth || doc.clientHeight)) {
my_width = doc.clientWidth;
my_height = doc.clientHeight;
}
else if (body && (body.clientWidth || body.clientHeight)) {
my_width = body.clientWidth;
my_height = body.clientHeight;
}
var tmpdd = document.getElementById('tooltipdiv');
var rr = document.getElementById('rulediv');
// Если подсказка еще не показывается, то расчитать ее размеры
if (!show) {
// Если ширина "рулетки" больше заданного размера, то установить
// ширину подсказки заданного размера, иначе установить ширину
// "рулетки". Это устраняет искажение размера tooltip'а у края
// экрана или в горизонтально прокрученной области.
if (rr.offsetWidth>tooltip_lehgth) {
// Скорректировать ширину подсказки, чтобы не было пустого места справа
rr.style.width=tooltip_lehgth+'px';
var old_rheight=rr.offsetHeight;
var new_rwidth=tooltip_lehgth;
while (true) {
rr.style.width=new_rwidth+'px';
if (rr.offsetHeight>old_rheight) {
new_rwidth++;
break;
}
new_rwidth--;
if (new_rwidth==0) { break; }
}
if (new_rwidth==0) { new_rwidth=tooltip_lehgth; }
tmpdd.style.width=new_rwidth+'px';
tmpdd.style.whiteSpace='normal';
}
else {
tmpdd.style.width='auto';
tmpdd.style.whiteSpace='nowrap';
}
}
// Относительное смещение по вертикали
var scrollY = 0;
if (doc && doc.scrollTop) {
scrollY = doc.scrollTop;
}
else if (body && body.scrollTop) {
scrollY = body.scrollTop;
}
else if (window.pageYOffset) {
scrollY = window.pageYOffset;
}
else if (window.scrollY) {
scrollY = window.scrollY;
}
// Относительное смещение по горизонтали
var scrollX = 0;
if (doc && doc.scrollLeft) {
scrollX = doc.scrollLeft;
}
else if (body && body.scrollLeft) {
scrollX = body.scrollLeft;
}
else if (window.pageXOffset) {
scrollX = window.pageXOffset;
}
else if (window.scrollX) {
scrollX = window.scrollX;
}
mouse_y-=scrollY;
mouse_x-=scrollX;
// Получить размеры tooltip'а
var div_width = tmpdd.offsetWidth;
var div_height = tmpdd.offsetHeight;
// Расчитать новые координаты tooltip'а
if (mouse_y+div_height+40>my_height) {
var new_y = my_height-div_height-20;
}
else {
var new_y = mouse_y+20;
}
if (mouse_x+div_width+40>my_width) {
var new_x = my_width-div_width-20;
}
else {
var new_x = mouse_x+20;
}
// Если подсказка получается поверх курсора, то сместить ее влево
if (new_x<mouse_x && new_y<mouse_y) {
var new_x = mouse_x-10-div_width;
}
with (tmpdd) {
// Установить новые координаты tooltip'а
style.left=(new_x+scrollX)+'px';
style.top=(new_y+scrollY)+'px';
// Убирает неприятное мерцание в Opera
style.visibility = 'visible';
}
show=true;
}
// Обработчик наведения курсора мыши на элемент
function PCL_TooltipMouseOver(e) {
var x = e.target ? e.target : e.srcElement;
var tmpdd = document.getElementById('tooltipdiv');
// Записать текст подсказки в основной и вспомогательный DIV
do {
var tmp=x.getAttribute('tooltip');
if (typeof tmp=='string' && tmp!='') {
tmpdd.innerHTML=tmp;
break;
}
else {
x=x.parentNode;
if (!x) { return false; }
}
} while (true);
var rr = document.getElementById('rulediv');
rr.style.whiteSpace='normal';
rr.style.width='auto';
rr.innerHTML=tmpdd.innerHTML;
}
// Обработчик ухода курсора мыши с элемента
function PCL_TooltipMouseOut(e) {
var tmpdd = document.getElementById('tooltipdiv');
// Спрятать подсказку
tmpdd.style.visibility = 'hidden';
// Подсказка не показывается
show=false;
}
// Обновление tooltip'ов на странице, например при первом вызове скрипта
// или после использования ваших функций AJAX
function PCL_TooltipUpdate() {
for (var i=0; i<tooltiptags.length; i++) {
var element = document.getElementsByTagName(tooltiptags[i]);
for (var j=0; j<element.length; j++) {
var x=element[j];
// Если установлен атрибут alt или title, то установить наш обработчик
if ((typeof(x.alt)=='string' && x.alt!='') ||
(typeof(x.title)=='string' && x.title!='')) {
// Создать дополнительный атрибут 'tooltip' и записать в него значение
if (typeof(x.title)=='string' && x.title!='') {
x.setAttribute('tooltip',x.title);
x.tooltip=x.title;
}
else {
x.setAttribute('tooltip',x.alt);
x.tooltip=x.alt;
}
// Обнулить атрибуты alt и title, чтобы подсказка не дублировалась
// штатными средствами браузера
x.setAttribute('alt','');
x.alt='';
x.setAttribute('title','');
x.title='';
// Установить для элемента обработчики событий по наведению,
// перемещению и уходу курсора мыши
if (x.addEventListener) {
x.addEventListener("mouseover", PCL_TooltipMouseOver, false);
x.addEventListener("mousemove", PCL_TooltipShow, false);
x.addEventListener("mouseout", PCL_TooltipMouseOut, false);
}
else {
x.attachEvent("onmouseover", PCL_TooltipMouseOver);
x.attachEvent("onmousemove", PCL_TooltipShow);
x.attachEvent("onmouseout", PCL_TooltipMouseOut);
}
}
}
}
// При обновлении и инициализации принудительно спрятать подсказку
var tmpdd = document.getElementById('tooltipdiv');
tmpdd.style.visibility = 'hidden';
}
// Инициализация скрипта. Эта функция должна вызываться по событию
// onload или находиться в самом конце страницы
function PCL_TooltipInit() {
// Установить ширину подсказки, по умолчанию 300
tooltip_lehgth=(typeof(arguments[0])!='number'?300:arguments[0]);
if (tooltip_lehgth<10) { tooltip_lehgth=300; }
var need_to_create = false;
if (!(tooltipDiv=document.getElementById('tooltipdiv'))) {
var tooltipDiv = document.createElement("DIV");
need_to_create = true;
}
with (tooltipDiv) {
setAttribute('id','tooltipdiv');
className = 'tooltip';
style.position = 'absolute';
style.top='0px';
style.left='0px';
style.opacity = '.95';
style.filter = "alpha(opacity:95)";
style.zIndex=9999;
style.visibility = 'hidden';
innerHTML=' ';
}
if (need_to_create) {
// Добавить на страницу плавающий DIV с подсказкой
document.getElementsByTagName('body')[0].appendChild(tooltipDiv);
}
need_to_create = false;
if (!(ruleDiv=document.getElementById('rulediv'))) {
var ruleDiv = document.createElement("DIV");
need_to_create = true;
}
with (ruleDiv) {
setAttribute('id','rulediv');
className = 'tooltip';
style.position = 'absolute';
style.zIndex=0;
style.top='0px';
style.left='0px';
style.visibility = 'hidden';
innerHTML=' ';
}
if (need_to_create) {
// Добавить на страницу вспомогательный DIV для расчета нужного
// размера окна подсказки
document.getElementsByTagName('body')[0].appendChild(ruleDiv);
}
// Инициализировать tooltip'ы на странице
PCL_TooltipUpdate();
}
|
graf_vorontsov,
в Ajax и добавьте PCL_TooltipUpdate(); |
ааа, супер
спасибо! а его и добавлял сначала, только перед выдачей результата и ясно что не работало! Спасибо за помощь! |
| Часовой пояс GMT +3, время: 09:12. |