Автор Тема: Проблемы с jQuery  (Прочитано 9628 раз)

0 Пользователей и 1 Гость просматривают эту тему.

Bisaram

  • Гость
Проблемы с jQuery
« : 08 октября 2008, 07:27:14 »
Доброго времени суток!
При попытке использования jQuery для написания админки к разрабатываемому модулю возникли проблемы.
Конкретно хотел использовать плагин зебра. В самом плагине все очень просто и логично, ошибок быть не может.
Если использовать встроенную библиотеку (/components/extjs/adapter/jquery.js), консоль ошибок не вылетает, но ничего и не работает. При использовании последнего релиза jQuery c оффсайта вылетают ошибки.
В чем причина может быть?

Страница выглядит так:

<script type="text/javascript" src="../modules/orders/templates_admin/jquery-1.2.6.js"></script>
<script type="text/javascript" src="../modules/orders/templates_admin/jquery.zebra.js"></script>

<script type="text/javascript">
alert('1');
$(document).ready(function(){

$('table.bClass').zebra();

$('table.cClass').zebra({
bgEven: '#CC66CC',
    bgOdd: '#E6ACE6',
    fontEven: '#662266',
    fontOdd: '#662266',
    bgHover: '#331133',
    fontHover: '#FFFFFF'
});

});
</script>

<h3>Таблица 2 оформлена с настройками по умолчанию.</h3>
<table class="bClass">

  <tr>
    <th>Столбец 1</th><th>Столбец 2</th><th>Столбец 3</th><th>Столбец 4</th><th>Столбец 5</th>
  </tr>
  <tr>
    <td>1-1</td><td>1-2</td><td>1-3</td><td>1-4</td><td>1-5</td>

  </tr>
  <tr>
    <td>2-1</td><td>2-2</td><td>2-3</td><td>2-4</td><td>2-5</td>
  </tr>
  <tr>
    <td>3-1</td><td>3-2</td><td>3-3</td><td>3-4</td><td>3-5</td>

  </tr>
  <tr>
    <td>4-1</td><td>4-2</td><td>4-3</td><td>4-4</td><td>4-5</td>
  </tr>
  <tr>
    <td>5-1</td><td>5-2</td><td>5-3</td><td>5-4</td><td>5-5</td>

  </tr>
  <tr>
    <td>6-1</td><td>6-2</td><td>6-3</td><td>6-4</td><td>6-5</td>
  </tr>
  <tr>
    <td>7-1</td><td>7-2</td><td>7-3</td><td>7-4</td><td>7-5</td>

  </tr>
</table>
<h3>Таблица 3 оформлена с пользовательскими настройками.</h3>
<table class="cClass">
  <tr>
    <th>Столбец 1</th><th>Столбец 2</th><th>Столбец 3</th><th>Столбец 4</th><th>Столбец 5</th>
  </tr>

  <tr>
    <td>1-1</td><td>1-2</td><td>1-3</td><td>1-4</td><td>1-5</td>
  </tr>
  <tr>
    <td>2-1</td><td>2-2</td><td>2-3</td><td>2-4</td><td>2-5</td>

  </tr>
  <tr>
    <td>3-1</td><td>3-2</td><td>3-3</td><td>3-4</td><td>3-5</td>
  </tr>
  <tr>
    <td>4-1</td><td>4-2</td><td>4-3</td><td>4-4</td><td>4-5</td>

  </tr>
  <tr>
    <td>5-1</td><td>5-2</td><td>5-3</td><td>5-4</td><td>5-5</td>
  </tr>
  <tr>
    <td>6-1</td><td>6-2</td><td>6-3</td><td>6-4</td><td>6-5</td>

  </tr>
  <tr>
    <td>7-1</td><td>7-2</td><td>7-3</td><td>7-4</td><td>7-5</td>
  </tr>
</table>

Консоль выдает следующее:

JavaScript
Event thread: BeforeScript
Opera has modified the JavaScript on eps.develop.it (legacy TinyMCE enter fix + link button fix). See browser.js for details
JavaScript - http://eps.develop.it/admin/index.php?
Timeout thread: delay 20 ms
Error:
name: ReferenceError
message: Statement on line 3: Undefined variable: $
Backtrace:
  Line 3 of eval script
    $(document).ready(function(){
  ...  Line 14 of linked script http://eps.develop.it/components/extjs/ext-all.js
    function(){var hd=document.getElementsByTagName("head")[0];var re=/(?:<script([^>]*)?>)((\n|\r|.)*?)(?:<\/script>)/ig;var srcRe=/\ssrc=([\'\"])(.*?)\1/i;var typeRe=/\stype=([\'\"])(.*?)\1/i;var match;while(match=re.exec(html)){var attrs=match[1];var srcMatch=attrs?attrs.match(srcRe):false;if(srcMatch&&srcMatch[2]){var s=document.createElement("script");s.src=srcMatch[2];var typeMatch=attrs.match(typeRe);if(typeMatch&&typeMatch[2]){s.type=typeMatch[2]}hd.appendChild(s)}else{if(match[2]&&match[2].length>0){if(window.execScript){window.execScript(match[2])}else{window.eval(match[2])}}}}var el=document.getElementById(id);if(el){el.parentNode.removeChild(el)}if(typeof callback=="function"){callback()}}
  ...  Line 11 of linked script http://eps.develop.it/components/extjs/adapter/yui/yui-utilities.js
    function(){if(this.locked){return false}this.locked=true;var Q=!H;if(!Q){Q=(C>0)}var P=[];for(var L=0,K=E.length;L<K;++L){var O=E[L];if(O){var N=this.getEl(O.id);if(N){if(!O.checkReady||H||N.nextSibling||(document&&document.body)){var M=N;if(O.override){if(O.override===true){M=O.obj}else{M=O.override}}O.fn.call(M,O.obj);E[L]=null}}else{P.push(O)}}}C=(P.length===0)?0:C-1;if(Q){this.startInterval()}else{clearInterval(this._interval);this._interval=null}this.locked=false;return true}
  Line 11 of linked script http://eps.develop.it/components/extjs/adapter/yui/yui-utilities.js
    function(){K._tryPreloadAttach()}
  ...
stacktrace: n/a; see 'opera:config#UserPrefs|Exceptions Have Stacktrace'

Оффлайн Shturman

  • Разработчики
  • Опытный лис
  • *****
  • Сообщений: 416
  • Авторитет: 71
  • Пол: Мужской
    • Просмотр профиля
Re: Проблемы с jQuery
« Ответ #1 : 09 октября 2008, 17:30:24 »
После магических плясок с бубном проблема была найдена.

Собственно, проблема заключена в том, что при формирование административного интерфейса модуля контент подгружается через HTTPRequest запросы (функциями Ext-a). При таком запросе не обрабатывается строчки, которые подгружают внешний JavaScript код.

То есть, стока вида  <script type="text/javascript" src="/modules/my_modules/templates_admin/myscript.js"> </script> будет не выполнена, и код находящейся в файле myscript.js не будет выполнен.
Поэтому, весь код JavaScript должен непосредственно содержаться в блоке шаблона. Если скрипов много, их можно вынести в отдельный файл, и подключать его уже с помощью PHP , путём получения контента этого файла и присоединения его к выводимо блоку.