[Java][AJAX]Ajax Live nie działa Tooltip oraz toggle Opcje

[casperii]

Panowie, wczytuje wyniki poprzez ajax na stronę, lecz nie działa w wynikach dialog czy tooltip.

[HTML] pobierz, plaintext 
function search() {
		var value = $('input#name').val();
		if(value !== ''){
			$.ajax({
				type: "POST",
				url: "/ajaxSearch.php",
				data: { query: value },
				cache: false,
				success: function(html){
					$("#table").html(html);
				}
			});
		}return false;    
	}
[HTML] pobierz, plaintext 

poza pobraniem wyników poprzez ajax tooltip czy toggle działa bez problemów, konsola też nic nie wywala.

Problem rozwiązany w połowie, dla tooltip wystarczy zrobić:

[HTML] pobierz, plaintext 
$(document).on('mouseover',function () {
    $("[data-toggle=tooltip]").tooltip();
});
[HTML] pobierz, plaintext 

ale dla toggle() problem pozostaje dalej.

Ten post edytował casperii 10.05.2017, 00:25:50

[bostaf]

Dla toggle() teoretycznie tak samo, ale jeśli działa przed przeładowaniem tabeli ajaxem a po nie działa, to być może html który dostajesz w ajaxSearch.php nie jest spójny z tym, który generowany jest przy pierwszym załadowaniu strony. Może jakieś id mają inne nazwy...

[casperii]

@bostaf po wczytaniu HTMLa poprzez ajaxa dane są takie same ID etc.

może problem polega w tym, że te dane są tak jakby z zewnątrz wczytywane ?

poniżej kod JS dla toggle:

[HTML] pobierz, plaintext 
	var uiDropdown = new function() {
  	var self;
  	self = this;
  	this.hideDialog = function($el) {
    		return $el.find(".dialog").hide().removeClass("is-visible");
  	};
  	this.showDialog = function($el) {
    		return $el.find(".dialog").show().addClass("is-visible");
  	};
		return this.initialize = function() {
  		$("html").click(function() {
    		$(".ui-dropdown .head").removeClass("active");
      		return self.hideDialog($(".ui-dropdown"));
    		});
    		$(".ui-dropdown .body").click(function(e) {
      		return e.stopPropagation();
    		});
    		return $(".ui-dropdown").each(function(index, el) {
      		return $(el).click(function(e) {
      			e.stopPropagation();
      			$(el).find(".head").toggleClass("active");
      			if ($(el).find(".head").hasClass("active")) {
        			return self.showDialog($(el));
      			} else {
        			return self.hideDialog($(el));
      			}
      		});
    		});
    	};
  	};
[HTML] pobierz, plaintext 

ale nijak nie mogę tego ugryźć.

[bostaf]

może problem polega w tym, że te dane są tak jakby z zewnątrz wczytywane ?

Tak. Tutaj to jest wyjaśnione:

Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time.

I gdzieś widziałem zalecenie, żeby zamiast starych eventhandlerów "click", "keydown", ... używać on(), tak jak to zrobiłeś z tooltipem. Chociażby dlatego, że radzą sobie z elementami dodawanymi dynamicznie.

[casperii]

@bostaf zmiana na :

[HTML] pobierz, plaintext 
$(document).on('click',function(event) {
 
});
[HTML] pobierz, plaintext 

nic nie daje. Jakiś inny pomysł?

[viking]

Ale co konkretnie zastępujesz bo w kodzie wyżej nie widać wywołania toggle. Jeśli podmieniasz cały html to wszystkie przypięte zdarzenia przestaną działać.
https://prophp.pl/article/15/jquery%2C_zdar...e_metoda_%24.on

[casperii]

@viking na stronie mam 10 rekordów po kliknięciu w nie jest wszystko w porządku, następnie w wyszukiwarkę wpisuje frazę, rekordy są wczytywane poprzez ajaxa i tu zero reakcji, spoglądając w kod źródłowy wydaje się , że wszystko jest tak samo.

kod odpowiedzialny za uruchomienie toggle/dialog:

[HTML] pobierz, plaintext 
	var uiDropdown = new function() {
  	var self;
  	self = this;
  	this.hideDialog = function($el) {
    		return $el.find(".dialog").hide().removeClass("is-visible");
  	};
  	this.showDialog = function($el) {
    		return $el.find(".dialog").show().addClass("is-visible");
  	};
		return this.initialize = function() {
  		$("html").on('click', function() {
    		$(".ui-dropdown .head").removeClass("active");
      		return self.hideDialog($(".ui-dropdown"));
    		});
    		$(".ui-dropdown .body").on('click', function(e) {
      		return e.stopPropagation();
    		});
    		return $(".ui-dropdown").each(function(index, el) {
      		return $(el).on('click', function(e) {
      			e.stopPropagation();
      			$(el).find(".head").toggleClass("active");
      			if ($(el).find(".head").hasClass("active")) {
        			return self.showDialog($(el));
      			} else {
        			return self.hideDialog($(el));
      			}
      		});
    		});
    	};
  	};
 
  	new uiDropdown();
[HTML] pobierz, plaintext 

[bostaf]

@viking toggleClass tam ma

@casperii

[HTML] pobierz, plaintext 
return $(el).click(function(e) {
[HTML] pobierz, plaintext 

zmień na

[HTML] pobierz, plaintext 
return $(el).on("click", function(e) {
[HTML] pobierz, plaintext 

[casperii]

@bostaf zobacz post przed dodaniem swojego posta:) JS został zedytowany.

[bostaf]

@bostaf zobacz post przed dodaniem swojego posta:) JS został zedytowany.

Niom, w tym samym czasie rzeźbiliśmy

Ciekawe to, a byłbyś w stanie spreparować fidla żeby zobaczyć co tam się dzieje. Fidla bez ajaxa, tak żeby chociaż mieć lepsze wyobrażenie o strukturze.

[casperii]

@bostaf podesłałem na PW link do działającego triala, by tu nie spamować.

[bostaf]

Problem rozwiązany.
Dosyć długi kod został zdefiniowany jako osobna funkacja, która następnie została wywołana osobno dla oryginalnego dokumentu jak i tego zmienionego dynamicznie:

[JAVASCRIPT] pobierz, plaintext 
function mojaFunkcja () {
    // cały długi kod, który nie hulał po ajaxie
}
$(document).ready(function() {mojaFunkcja();});
$(document).ajaxStop(function() {mojaFunkcja();});
[JAVASCRIPT] pobierz, plaintext 

document.ready oddziałuje tylko na elementy utworzone przed jego wywołaniem, a zatem nie uwzględnia tych utworzonych dynamicznie (np ajaxem), a ajaxStop operuje tylko na elementach dodanych dynamicznie. Stąd konieczność dwóch wywołań całego kodu.