Почему атрибут элемента отображается с запаздыванием (при 2ой итерации показывается 1ый вариант)?

Question

[ligisayan]

Всем привет! Есть сайт на wordpress и таблица wpDataTables с фильтром select с выбором по городам.
Хочу в переменной получать название городов для последующего вывода на странице, но почему-то сталкиваюсь с невозможностью получить атрибут элемента title на первой итерации.

custom.js

jQuery.noConflict();
jQuery(window).load(function(){
  wpDataTables.table_1.addOnDrawCallback(
  function(){
    var newcity = jQuery('#table_1_1_filter_sections button.dropdown-toggle').attr('title');
    var city = jQuery('#table_1_1_filter button.dropdown-toggle')[0];
    console.log(newcity,city);
});

UPD: Вот что удалось обнаружить - код

var newcity = jQuery('#table_1_1_filter_sections button.dropdown-toggle').attr('title');

работает, но запаздывает с итерацией, т.е. при первом выборе города считывает пустоту, а при выборе следующего - отображает предыдущее значение и так далее.

А забавное то, что city уже сразу в консоли вот в таком виде.

<button type="button" class="btn dropdown-toggle btn-default" 
data-toggle="dropdown" role="button" title="Кемерово" aria-expanded="false">
<span class="filter-option pull-left">Кемерово</span>&nbsp;
<span class="bs-caret"><span class="caret"></span></span>
</button>

Какие могут быть мысли?

Answer 1

[Beliyadm]

Плагин (судя по демо) при поиске посылает ajax запрос на сервер и возвращает данные, потому и не работает (DOM то ведь новый)
Попробуйте заменить
jQuery(window).load(function(){
на
jQuery(window).on('load', function(){

Comments

[ligisayan]

$ в wordpress не прокатит, там noConflict режим.
Тогда получается вот так?
jQuery(window).on('load', function(){

[Beliyadm]

Да, конечно, изменил комментарий, скопировал с файлика не заметив что там ноконфликт

[ligisayan]

Beliyadm попробовал, но ничего не поменялось.. а почему с возвращенными данными ничего сделать нельзя? Ведь вроде как в переменной перехватываю.
Даже делаю так:

var newc = jQuery('#table_1_1_filter button.dropdown-toggle .filter-option')[0]; выводится: <span class="filter-option pull-left">Москва</span> Но, затем я не могу получить даже текст из span var title1 = newc.textContent; var title2 = newc.innerHTML; var title3 = newc.text(); console.log(title1,title2,title3);

[Beliyadm]

ligisayan, Совершенно не знаком с этим скриптом, но я бы пошел следующим путем, надо читать документацию.
Если сайт в сети - дайте ссылку и конкретно что откуда вы хотите получить на уровне JS

[ligisayan]

Beliyadm, нет, сайт на локалке тестирую. Ссылка на сам плагин
Самое полезное, что я для себя там обнаружил - это колбек, который реагирует на изменения фильтра wpDataTables.table_1.addOnDrawCallback();

Прикол в том, что данные из таблицы я могу получить, а вот из фильтра не удается..

jQuery('#table_1 tbody tr').each(function() {
	var $this = jQuery(this);
    	city = $this.find("td").eq(1).text();
});

[Beliyadm]

ligisayan, Зашел на демо страницу плагина, ввел ваш код

jQuery('#table_1 tbody tr').each(function() {
  var $this = jQuery(this);
        city = $this.find("td").eq(1).text();
alert(city);
});

получил все значения первых ячеек в алерте, отфильтровал тут же в строке select по titanic и в консоли повторил - код снова нормально отработал.
так что даже не знаю, с виду все работает, нужно разбираться конкретно с вашим кодом

[ligisayan]

Beliyadm, понял.. Смотрите, а у вас получится обратиться на той же демо странице к скрытым полям в мобильной версии и получить из них значения?
К примеру, получить жанры фильмов по названию:
Adventure
Action
Science Fiction

[Beliyadm]

ligisayan, В мобильной версии геморно.
Они не просто скрывают строку с подробностями (и по клику ее показывают), они для мобилы пихают все эти параметры в скрытое поле (перед началом таблицы) в виде JSON и потом на лету формируют новую строку под заголовком class="row-detail"

<input type="hidden" id="table_1_desc" value='{"tableId":"table_1","tableType":"mysql","selector":блаблабла

В принципе вытянуть оттуда можно, но нужно изучить структуру этого массива, что уже немного мне лениво, прошу простить

[Ihor Bratukh]

P.S Не нужно постоянно писать jQuery, даже если nonConflict, просто возьмите ваш код в IIFE выражение.

;(function ($) {
 // Ваш код с $
}(jQuery));

[ligisayan]

Beliyadm, спасибо, но смотрите, вот мы получаем получаем json и расшифровываем

var obj = JSON.parse(jQuery('#table_1_desc').val());
console.log(obj);

Но, я сомневаюсь, что здесь содержатся данные из таблицы, наблюдаю только каркас, структуру

[ligisayan]

BRAGA96, насколько я понимаю, такая конструкция подходит для замены jQuery(document).ready(function($) { но, не jQuery(window).load(function(){

[Beliyadm]

ligisayan, Вроде немного разобрался, при загрузке страницы они подтягивают данные для таблицы из скрипта на лету (в консоли хорошо видно приходящий массив)
https://wpdatatables.com/wp-admin/admin-ajax.php?a...

В том скрытом поле находятся все сочетания значений по типам, и видимо как то хитро (может по ID) показывают\скрывают данные для разных размеров

Найдете где они потом его хранят (то что пришло по ajax загрузки) - сможете вытаскивать информацию )

[ligisayan]

Beliyadm, появилась новая информация в связи с чем изменил вопрос - взгляните?

Answer 2

[ligisayan]

Не нашел ничего лучше, как установить задержку на 0,5сек. По крайней мере работает

setTimeout(function() { 
            city = jQuery('#table_1_1_filter button.dropdown-toggle').attr("title"); jQuery('.city').text("г. "+city); }, 500);