Home/ Questions/Q 6750673
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T12:50:07+00:00

This next challenge of mine involves jqtransform which can be found here http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/ I

  • 0

This next challenge of mine involves jqtransform which can be found here
http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/

I have a dropdownlist, and its items are populated using the function buildSelect1() which is located in the <head> of the page (special thanks to Brian Glaz for writing such a wonderful script at write labels for <option> tags based on selectedIndex using JavaScript)

The <select> box is being styled using the popular jqTransform plugin for jQuery. There seems to be a bug in it however. When using jqTransform, it seems that elements being styled by it (or perhaps just dropdownlists) can not be empty.

To demonstrate this, I have the below sandbox page: (if testing you’ll need to download jqTransform, and put the file “jqtransform.css” in a folder called “css” and the file “jquery.jqtransform.js” in a folder called “jquery”, the jquery library is linked from https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js)

<!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

</pre>
</i>
<br /><br />Hopefully if the bug can be fixed, the final result should look like this:
<p>
<form class="test">
<p>
    <select id="foo" class="c10">
              <option>Please select a template...</option>
    <option>head option 1</option>
    <option>head option 2</option>
    <option>head option 3</option>
    <option>head option 4</option>
    <option>head option 5</option>
    <option>head option 6</option>
    <option>head option 7</option>
    <option>head option 8</option>
    <option>head option 9</option>
    </select>
</p>
</form>
</p>
</body>
</html>

I’ve searched all over the forums, as there seems to be a few “bugs” with jqtransform, and most have been solved by either adding new functions or replacing existing functions, but so far I have not found a solution to this problem.

Any clues?

Thanks very much in advance!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I had similar issue today. I resolved it with following code (line 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 */

    and then after updating select I update dropdown with following code:

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

    Hope this is still actually for you. Cheers

    • 0