Ошибка при использовании jqtransform.«offset (). top» является нулем или не объектом.<select> заполнено JavaScript, а не <option>тегами - PullRequest
Новая
       23

Ошибка при использовании jqtransform.«offset (). top» является нулем или не объектом.<select> заполнено JavaScript, а не <option>тегами

0 голосов
/ 04 сентября 2011

Эта моя следующая задача связана с jqtransform, который можно найти здесь http://www.dfc -e.com / metiers / multimedia / opensource / jqtransform /

У меня есть раскрывающийся список, и егоэлементы заполняются с помощью функции buildSelect1(), которая находится на <head> страницы (особая благодарность Брайану Глазу за написание такого замечательного скрипта на написании меток для тегов на основе selectedIndex с использованием JavaScript )

Стиль окна <select> разрабатывается с использованием популярного плагина jqTransform для jQuery.Кажется, в этом есть ошибка.При использовании jqTransform кажется, что стилизованные им элементы (или, возможно, просто выпадающие списки) не могут быть пустыми.

Чтобы продемонстрировать это, у меня есть следующая песочница: (при тестировании вам нужно скачать jqTransform и поместить файл "jqtransform.css" в папку с именем "css" и файл«jquery.jqtransform.js» в папке с именем «jquery», библиотека jquery связана с https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js)

<code><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />

<title>Title Drop</title>

<link rel="stylesheet" href="css/jqtransform.css" type="text/css" media="all" />

<script type='text/javascript'> 
//<![CDATA[ 
//hosts labels or "titles" of templates
function buildSelect1() {
var labels = ["Please select a template...",
              "Head Option 1",
              "Head Option 2",
              "Head Option 3",
              "Head Option 4",
              "Head Option 5",
              "Head Option 6",
              "Head Option 7",
              "Head Option 8",
              "Head Option 9"
         ];

        for(var i=0; i<labels.length; i++) {
            var selectBox = document.getElementById('foo');
            var newOption = document.createElement('option');
            newOption.label = labels[i];
            newOption.innerHTML = labels[i];
            newOption.value = labels[i];
            if(i==0) { newOption.setAttribute('selected','selected'); }
            selectBox.appendChild(newOption);
        }
    }
showSelectedTemplate = function(elem) {
   var selectedTemplate = elem.options[elem.options.selectedIndex].value;
    alert(selectedTemplate);
}
//]]> 
</script>
<script type='text/javascript'>
//<![CDATA[ 
window.onload=function()
{
buildSelect1();
}
//]]> 
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<script type="text/javascript" src="jquery/jquery.jqtransform.js">
</script>

<script type="text/javascript">
//<![CDATA[ 
              $(function(){
                    $('form.test').jqTransform({imgPath:'jqtransformplugin/img/'});
            });
//]]>
</script>
</head>
<body>
<form class="test">
<p>

    <select id="foo" class="c10"> <!--toggle class="test" to show the problem -->
              <option>Please select a template...</option>
    <option>body option 1</option>
    </select>
</p>
If you disable jqtransform (simplest way is to remove class="test" from < form >) you'll see the dropdown list populates using both the option tags as well as the buildSelect1() function in the head of the page. But if jqtransform is enabled, the dropdown list will not populate using the buildSelect1() function, the only items that will appear will be the option tags    
</form>
<form class="test">
<p>

    <select id="foo" class="c10">

    </select>
</p>
</form>
If you leave a jQtransform enabled < select > box empty (i.e. no < option > tags assigned) when you click on it you'll see the following error:
<br /><br /><br />
<i>
<pre>
Webpage error details

Timestamp: Sun, 4 Sep 2011 16:24:36 UTC


Message: 'offset().top' is null or not an object
Line: 298
Char: 7
Code: 0
URI: file:///H:/New%20OLH%20Project/Note%20Generator/jquery/jquery.jqtransform.js
Надеюсь, если ошибка будет исправлена, конечный результат должен выглядеть следующим образом:

Пожалуйста, выберите шаблон ... вариант головки 1 вариант головки 2 вариант головки 3 вариант головки 4 опция головы 5 опция головы 6 опция головы 7 опция головы 8 опция головы 9

Я искал по всем форумам, так как, кажется, есть несколько «ошибок» с jqtransform, и большинство из них были решены либодобавление новых функций или замена существующих функций, но до сих пор я не нашел решения этой проблемы.

Есть какие-нибудь подсказки?

Большое спасибо заранее!

1 Ответ

1 голос
/ 24 октября 2011

У меня была похожая проблема сегодня. Я решил его следующим кодом ( строка 250 ): 

          if ($select.hasClass('jqTransformHidden')) { return; }
            if ($select.attr('multiple')) { return; }

            var oLabel = jqTransformGetLabel($select);
            /* First thing we do is Wrap it */
            var $wrapper;
            if (!$select.hasClass('jqNeedsUpdate')) {
                $wrapper = $select
                .addClass('jqTransformHidden')
                .wrap('<div class="jqTransformSelectWrapper"></div>')
                .parent()
                .css({ zIndex: 10 - index });
            }
            else {
                $wrapper = $select.parent();
                $select.addClass('jqTransformHidden');
                $wrapper.find('div,ul').remove();
            }
            /* Now add the html for the select */
            $wrapper.prepend('<div><span></span><a href="#" class="jqTransformSelectOpen"></a></div><ul></ul>');

            var $ul = $('ul', $wrapper).css('width', $select.width()).hide();            
            /* Now we add the options */

, а затем после обновления выберите Я обновляю выпадающий список следующим кодом: 

$(destination).removeClass('jqTransformHidden');
$(destination).addClass('jqNeedsUpdate');
$(destination).jqTransSelect();

Надеюсь, это все еще на самом деле для вас. Приветствия

...