Databases
StackOverflow2013
Postsdbo
PODOM object only requires two clicks in Internet Explorer
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PODOM object only requires two clicks in Internet Explorer
    primarykey
    data
    text
    <p>I'm really struggling with the following bit of code. I'm still really new to using DOM with javascript and this script is running flawlessly in FireFox, Chrome and Safari. In Internet Explorer it requires two clicks. If you visit the following link in FireFox (<a href="http://bit.ly/yabAQg" rel="nofollow">http://bit.ly/yabAQg</a>) and then the same link in Internet Explorer you'll see that if you click a shape in FireFox it immediately shows the colour options if you do this in Internet Explorer it will not show the colour options until you've clicked on the shape twice or on a shape and then another shape. Can an IE, DOM, Javascript Ninja tell me what's wrong with the script that cause the need for two clicks in IE?</p> <pre><code>&lt;?php $swatches = $this-&gt;get_option_swatches(); ?&gt; &lt;script type="text/javascript"&gt; document.observe('dom:loaded', function() { try { var swatches = &lt;?php echo Mage::helper('core')-&gt;jsonEncode($swatches); ?&gt;; function find_swatch(key, value) { for (var i in swatches) { if (swatches[i].key == key &amp;&amp; swatches[i].value == value) return swatches[i]; } return null; } function has_swatch_key(key) { for (var i in swatches) { if (swatches[i].key == key) return true; } return false; } function create_swatches(label, select) { // create swatches div, and append below the &lt;select&gt; var sw = new Element('div', {'class': 'swatches-container'}); select.up().appendChild(sw); // store these element to use later for recreate swatches select.swatchLabel = label; select.swatchElement = sw; // hide select select.setStyle({position: 'absolute', top: '-9999px'}); $A(select.options).each(function(opt, i) { if (opt.getAttribute('value')) { var elm; var key = trim(opt.innerHTML); // remove price if (opt.getAttribute('price')) key = trim(key.replace(/\+([^+]+)$/, '')); var item = find_swatch(label, key); if (item) elm = new Element('img', { src: '&lt;?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_MEDIA); ?&gt;swatches/'+item.img, alt: opt.innerHTML, title: opt.innerHTML, 'class': 'swatch-img'}); else { console.debug(label, key, swatches); elm = new Element('a', {'class': 'swatch-span'}); elm.update(opt.innerHTML); } elm.observe('click', function(event) { select.selectedIndex = i; fireEvent(select, 'change'); var cur = sw.down('.current'); if (cur) cur.removeClassName('current'); elm.addClassName('current'); }); sw.appendChild(elm); } }); } // Hide Second Option's Label function hideStuff(id) { if (document.getElementById(id)) { document.getElementById(id).style.display = 'none'; } } hideStuff("last-option-label"); function showStuff(id) { if (document.getElementById(id)) { document.getElementById(id).style.display = ''; } } function recreate_swatches_recursive(select) { // remove the old swatches if (select.swatchElement) { select.up().removeChild(select.swatchElement); select.swatchElement = null; } // create again if (!select.disabled) showStuff("last-option-label"); create_swatches(select.swatchLabel, select); // recursively recreate swatches for the next select if (select.nextSetting) recreate_swatches_recursive(select.nextSetting); } function fireEvent(element,event){ if (document.createEventObject){ // dispatch for IE var evt = document.createEventObject(); return element.fireEvent('on'+event, evt); } else{ // dispatch for firefox + others var evt = document.createEvent("HTMLEvents"); evt.initEvent(event, true, true ); // event type,bubbling,cancelable return !element.dispatchEvent(evt); } } function trim(str) { return str.replace(/^\s\s*/, '').replace(/\s\s*$/, ''); } $$('#product-options-wrapper dt').each(function(dt) { // get custom option's label var label = ''; $A(dt.down('label').childNodes).each(function(node) { if (node.nodeType == 3) label += node.nodeValue; }); label = trim(label); var dd = dt.next(); var select = dd.down('select'); if (select &amp;&amp; has_swatch_key(label)) { create_swatches(label, select); // if configurable products, recreate swatches of the next select when the current select change if (select.hasClassName('super-attribute-select')) { select.observe('change', function() { recreate_swatches_recursive(select.nextSetting); }); } } }); } catch(e) { alert("Color Swatches javascript error. Please report this error to support@galathemes.com. Error:" + e.message); } }); &lt;/script&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USJacob
    1. USTravelingAdMan
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. PODOM object only requires two clicks in Internet Explorer
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PODOM object only requires two clicks in Internet Explorer
      1. USTravelingAdMan
      1. VTFavorite
    1. COCan you try to cut down the code example to just the part that is relevant to your problem?
      singulars
      1. PODOM object only requires two clicks in Internet Explorer
      1. USBen Lee
    2. COHi Ben there's no error being produced and I'm not quite sure where the problem lies... That's why I've dropped in the entire script. Like I said it works fine in FF, Chrome & Safari it's only in IE the strange behaviour occurs.
      singulars
      1. PODOM object only requires two clicks in Internet Explorer
      1. USTravelingAdMan
    3. COHi @TravelingAdMan It seems you are using http://www.magentocommerce.com/magento-connect/gala-color-swatches-free-9787.html Is it still working for you. for me it works for me in FF and Chrome with a js error. TypeError: select.up is not a function select.up().appendChild(sw); Can you help me if you have ever got it worknig properly.
      singulars
      1. PODOM object only requires two clicks in Internet Explorer
      1. USAnand
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload