Master-X
Форум | Новости | Статьи
Главная » Форум » Программинг, Скрипты, Софт, Сервисы » 
Тема: AJAX не выполняется JavaScript
цитата
11/07/15 в 21:02
 EagleOwl
Загружаемый через AJAX Load фрагмент содержит элементы, которые должны обрабатываться через JavaScript. Но скрипт не работает, где бы он ни находился. В принципе это ожидаемо, но как его заставить работать? Надо его как-то переинициализировать после отработки AJAX запроса.

Нашел такой код:

Код:
$.ajaxSetup({
    complete: function(){
        $("your_selector").tooltip();
    }
});

Но не понял как им пользоваться. Что понимается под "your_selector"?

Кто как решает эту проблему?

Последний раз редактировалось: EagleOwl (12/07/15 в 01:43), всего редактировалось 1 раз
цитата
11/07/15 в 21:29
 EagleOwl
---
цитата
12/07/15 в 08:55
 rickdeckard
что то намутил. зачем setup

$.get(тут урл).then(function (data) {

тут код который отработает после загрузки блока

your_selector - это например класс подгружаемой менюшки '.menu'


например

$('#menu').html(data); // вставили меню в <div id="menu"></div>
$('.menu li').tooltip(); // инициализировали тултипы на пункты
});
цитата
13/07/15 в 04:01
 EagleOwl
Вот тут дело все в том, что подгружается просто таблица. Никаких классов ей не присвоено. А скрипт - обработчик кликов по таблице - подсветка строк, столбцов и тому подобное.

Я его тут приведу под катом т.к. он довольно большой, но там видно как он инициализируется в нормальных условиях.

this.tablecloth = function(){
   
   // CONFIG
   
   // if set to true then mouseover a table cell will highlight entire column (except sibling headings)
   var highlightCols = false;
   
   // if set to true then mouseover a table cell will highlight entire row   (except sibling headings)
   var highlightRows = true;   
   
   // if set to true then click on a table sell will select row or column based on config
   var selectable = true;
   
   // this function is called when
   // add your own code if you want to add action
   // function receives object that has been clicked
   this.clickAction = function(obj){
      //alert(obj.innerHTML);
      
   };


   
   // END CONFIG (do not edit below this line)
   
   
   var tableover = false;
   this.start = function(){
      var tables = document.getElementsByTagName("table");
      for (var i=0;i<tables.length;i++){
         tables[i].onmouseover = function(){tableover = true};
         tables[i].onmouseout = function(){tableover = false};         
         rows(tables[i]);
      };
   };
   
   this.rows = function(table){
      var css = "";
      var tr = table.getElementsByTagName("tr");
      for (var i=0;i<tr.length;i++){
         css = (css == "odd") ? "even" : "odd";
         tr[i].className = css;
         var arr = new Array();
         for(var j=0;j<tr[i].childNodes.length;j++){            
            if(tr[i].childNodes[j].nodeType == 1) arr.push(tr[i].childNodes[j]);
         };      
         for (var j=0;j<arr.length;j++){            
            arr[j].row = i;
            arr[j].col = j;
            if(arr[j].innerHTML == "&nbsp;" || arr[j].innerHTML == "") arr[j].className += " empty";               
            arr[j].css = arr[j].className;
            arr[j].onmouseover = function(){
               over(table,this,this.row,this.col);
            };
            arr[j].onmouseout = function(){
               out(table,this,this.row,this.col);
            };
            arr[j].onmousedown = function(){
               down(table,this,this.row,this.col);
            };
            arr[j].onmouseup = function(){
               up(table,this,this.row,this.col);
            };            
            arr[j].onclick = function(){
               click(table,this,this.row,this.col);
            };                        
         };
      };
   };
   
   // appyling mouseover state for objects (th or td)
   this.over = function(table,obj,row,col){
      if (!highlightCols && !highlightRows) obj.className = obj.css + " over"; 
      if(check1(obj,col)){
         if(highlightCols) highlightCol(table,obj,col);
         if(highlightRows) highlightRow(table,obj,row);      
      };
   };
   // appyling mouseout state for objects (th or td)   
   this.out = function(table,obj,row,col){
      if (!highlightCols && !highlightRows) obj.className = obj.css;
      unhighlightCol(table,col);
      unhighlightRow(table,row);
   };
   // appyling mousedown state for objects (th or td)   
   this.down = function(table,obj,row,col){
      obj.className = obj.css + " down"; 
   };
   // appyling mouseup state for objects (th or td)   
   this.up = function(table,obj,row,col){
      obj.className = obj.css + " over"; 
   };   
   // onclick event for objects (th or td)   
   this.click = function(table,obj,row,col){
      if(check1){
         if(selectable) {
            unselect(table);   
            if(highlightCols) highlightCol(table,obj,col,true);
            if(highlightRows) highlightRow(table,obj,row,true);
            document.onclick = unselectAll;
         }
      };
      clickAction(obj);       
   };      
   
   this.highlightCol = function(table,active,col,sel){
      var css = (typeof(sel) != "undefined") ? "selected" : "over";
      var tr = table.getElementsByTagName("tr");
      for (var i=0;i<tr.length;i++){   
         var arr = new Array();
         for(j=0;j<tr[i].childNodes.length;j++){            
            if(tr[i].childNodes[j].nodeType == 1) arr.push(tr[i].childNodes[j]);
         };                     
         var obj = arr[col];
         if (check2(active,obj) && check3(obj)) obj.className = obj.css + " " + css;       
      };
   };
   this.unhighlightCol = function(table,col){
      var tr = table.getElementsByTagName("tr");
      for (var i=0;i<tr.length;i++){
         var arr = new Array();
         for(j=0;j<tr[i].childNodes.length;j++){            
            if(tr[i].childNodes[j].nodeType == 1) arr.push(tr[i].childNodes[j])
         };            
         var obj = arr[col];
         if(check3(obj)) obj.className = obj.css;
      };
   };   
   this.highlightRow = function(table,active,row,sel){
      var css = (typeof(sel) != "undefined") ? "selected" : "over";
      var tr = table.getElementsByTagName("tr")[row];      
      for (var i=0;i<tr.childNodes.length;i++){      
         var obj = tr.childNodes[i];
         if (check2(active,obj) && check3(obj)) obj.className = obj.css + " " + css;       
      };
   };
   this.unhighlightRow = function(table,row){
      var tr = table.getElementsByTagName("tr")[row];      
      for (var i=0;i<tr.childNodes.length;i++){
         var obj = tr.childNodes[i];         
         if(check3(obj)) obj.className = obj.css;          
      };
   };
   this.unselect = function(table){
      tr = table.getElementsByTagName("tr")
      for (var i=0;i<tr.length;i++){
         for (var j=0;j<tr[i].childNodes.length;j++){
            var obj = tr[i].childNodes[j];   
            if(obj.className) obj.className = obj.className.replace("selected","");
         };
      };
   };
   this.unselectAll = function(){
      if(!tableover){
         tables = document.getElementsByTagName("table");
         for (var i=0;i<tables.length;i++){
            unselect(tables[i])
         };      
      };
   };   
   this.check1 = function(obj,col){
      return (!(col == 0 && obj.className.indexOf("empty") != -1));
   }
   this.check2 = function(active,obj){
      return (!(active.tagName == "TH" && obj.tagName == "TH"));
   };
   this.check3 = function(obj){
      return (obj.className) ? (obj.className.indexOf("selected") == -1) : true;
   };   
   
   start();
   
};

window.onload = tablecloth;
цитата
13/07/15 в 11:47
 Blackout
$(document).bind("ajaxComplete",function(){
    твой код
});

Попробуй так
цитата
13/07/15 в 17:03
 EagleOwl
Увы, не хочет так работать.
цитата
13/07/15 в 17:26
 Retox
1. а jQuery подключен?
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>


2. поставил ли скрип в теги
<script>
</script>

3. Вставил ли <div id="your_selector"></div> в код страницы. Где хочешь выводить результат.
и в скрипте решетку "#your_selector"
цитата
13/07/15 в 19:10
 Ailk
js и аякс в частности работают с утф8 только. Проверь кодировку получаемых страниц.
цитата
13/07/15 в 19:17
 Magistrator
eval
цитата
14/07/15 в 00:06
 EagleOwl
Retox:, Ailk: - подгрузка страниц у меня работает четко, так что про библиотеки и кодировку тут рассуждать уже не нужно. Тут вопрос не в этом.
Magistrator: А как применить?

Еще раз - для элементов на загруженных страницах не работают JavaScript обработчики, т.к. эти элементы появились уже после того, как скрипт отработал. Нужно произвести переинициализацию JavaScript.
цитата
01/08/15 в 20:52
 IgorZ
EagleOwl писал:
эти элементы появились уже после того, как скрипт отработал. Нужно произвести переинициализацию JavaScript.


Для этого применяется реакция на событие родительского контейнера, с уточняющим селектором.

Код:

$(document).on('click', '#селектор элемента', function(event){
   event.preventDefault();                       

   обработка события

});   


Эта страница в полной версии