Действительный jQuery при разработке не работает на производстве
Я пишу довольно простой сценарий с использованием jQuery. Однако сценарий ведет себя по-разному в зависимости от того, запускаю ли я его на своем локальном веб-сервере (localhost) или на производственном сервере.
При разработке следующий код возвращает ожидаемый HTML-код:
$('#objID').siblings('.mAddress').html();
При производстве тот же оператор возвращает undefined.
Структура документов одинакова на обеих машинах. Единственное отличие, которое я могу найти, - это когда я использую Firebug для пошагового выполнения сценария. На машине разработки установка часов на $ ('# objID'). Siblings ('. MAddress') приводит к [ span#object ], в то время как на производстве те же часы приводят к [ [ span#object ] ]
(Обратите внимание на двойные квадратные скобки).
Есть идеи?
Добавлен:
Я убедился, что эти две библиотеки идентичны.
Я провел еще несколько экспериментов с Firebug. Другая часть скрипта захватывает набор элементов с помощью оператора:
$('.ParentColumn2').each(function(i) { ... })
В теле этой функции, если я установил часы на this, при разработке значение this будет таким, как я ожидал: div.ParentColumn2, но при производстве значение this возвращает то, что выглядит как массив: [ div.ParentColumn2, div.ParentColumn2, div.ParentColumn2, .....]
HTML - это в основном таблица (я удалил ненужный HTML, и строки повторяются):
<table>
<tr>
<td>
<div class = "ItemTemplate">
<div class = "ParentColumn2">
<div><span id = "dnn_ctr45874_ViewProjectGrid_GridView1_ctl02_lbl_Address" class = "lbl_Address mAddress">111 W Wacker Dr, </span><span id = "dnn_ctr45874_ViewProjectGrid_GridView1_ctl02_lbl_City" class = "lbl_Address mCity">Chicago</span> <span id = "dnn_ctr45874_ViewProjectGrid_GridView1_ctl02_lbl_PostalCode" class = "lbl_Address mPostalCode">60601</span> <a href = "javascript:MapMe(this);" id = "dnn_ctr45874_ViewProjectGrid_GridView1_ctl02_hypMap" class = "hypMap">Map</a> <span id = "dnn_ctr45874_ViewProjectGrid_GridView1_ctl02_lbl_Area" class = "mArea">Loop</span><span id = "dnn_ctr45874_ViewProjectGrid_GridView1_ctl02_lt" class = "mLt">41.8868010285473</span><span id = "dnn_ctr45874_ViewProjectGrid_GridView1_ctl02_lg" class = "mLg">-87.6312860701286</span>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class = "ItemTemplate">
<div class = "ParentColumn2">
<div><span id = "dnn_ctr45874_ViewProjectGrid_GridView1_ctl03_lbl_Address" class = "lbl_Address mAddress">...</span> ...
</div>
</div>
</div>
</td>
</tr>
</table>
HTML на двух машинах настолько идентичен, насколько это возможно, учитывая, что он все сгенерирован .Net (не заставляйте меня начинать).
HTML-код одинаков на обеих машинах? Внедряет ли ваша производственная среда другой HTML через AJAX?
Это то, что размещено в DNN? И если да, то содержит ли ваша машина разработки точно такие же модули, что и производственная машина на той же странице?
Ответы 6
Я не использую jQuery регулярно, но первое подозрение, что ваши библиотеки не синхронизированы.
Я убедился, что эти две библиотеки идентичны.
Учитывая, что у вас разное поведение, разумно предположить, что что-нибудь отличается на двух страницах, поэтому я предлагаю уменьшить обе страницы до минимума, который сохраняет текущее поведение, а затем посмотреть, что отличается.
я не использую .siblings () ... (или не нужно было) ...
согласно jquery docs .... запуск .siblings () в div (ниже) ничего не вернет, но на одном из p $ ('p: first') вернет другой
<div><p></p><p></p></div>
попробуйте использовать
$('#objID').find('.mAddress').html();
или же
$('#objID').children('.mAddress').html();
или же
$('#objID .mAddress').html();
кажется странным, что это будет работать разработчика, но не на производстве ... но попробуйте это.
-брюс
Я также рекомендовал бы использовать .find ()
Я бы сказал, что пара областей, на которые следует обратить внимание, - это кеширование, в вашей среде разработки все, вероятно, перезагружается с каждым запросом, попробуйте поставить «? Asdfasfrandom» в конце вашего тега включения javascript, чтобы убедиться, что все это обновляется.
Если это не так, объединяются ли ваши файлы javascript, когда вы их обслуживаете? В Rails, например, поведение по умолчанию - поместить их все в один файл, что может повредить чему-то.
Если это не так, возможно, файлы javascript на сервере загружаются в другом порядке или выполняются в другом порядке, чем локально, из-за времени загрузки. Перед выполнением кода убедитесь, что dom готов.
По сути, кажется, что это, вероятно, не проблема с вашим кодом (при условии, что вы используете тот же браузер и тот же HTML), а проблема с порядком, в котором происходят вещи.
Поместите в dev те же данные, что и в prod, затем создайте дамп исходного кода для обоих и сделайте различие.
Зачем использовать собственность братьев и сестер, а не только:
$('#objID .mAddress').html();
Также я бы подумал, что оба брата и сестры и приведенное выше возвращают массив элементов, а не только один элемент, поэтому я бы, вероятно, выбрал что-то вроде этого:
$($('#objID .mAddress').get(0)).html();
Чтобы вернуть только html для первого элемента.
Находится ли ваш код в $ (document) .ready (function () {...}); ?
В противном случае это может привести к другому поведению. На вашей локальной машине разработки, возможно, все загружается так быстро, что дерево DOM завершается в соответствии с типом, который вызывается вашим Javascript, но на производственном сервере, возможно, что-то еще не завершено.
Однако это не объясняет появление дополнительных вложенных скобок в FireBug.
Не могли бы вы поделиться с нами образцом HTML-кода, который у вас есть?