title: Magento - How to Display Multiple Configurable Products on Category Page - Dropdown Values Not Displaying
body: <p>I'm trying to add multiple configurable products onto a category list page in Magento 1.7.2.  I am using the Organic Internet SCP extension along with EM Gala Colorswatches which is making this a bit trickier than normal.  I have followed the tutorials from these sites....they are pretty much the same idea...</p>
  
  <p><a href="http://inchoo.net/ecommerce/magento/display-multiple-configurable-products-with-options-on-one-page-in-magento/" rel="nofollow">http://inchoo.net/ecommerce/magento/display-multiple-configurable-products-with-options-on-one-page-in-magento/</a></p>
  
  <p><a href="http://www.catgento.com/adding-configurable-product-options-to-category-list-in-magento/" rel="nofollow">http://www.catgento.com/adding-configurable-product-options-to-category-list-in-magento/</a></p>
  
  <p>The dropdowns and color swatches display fine on the product page, however on the category page the dropdowns, labels, and price display but the product values are not displaying when the dropdown is selected. I have included all of the same .js files from the product page where it is working.  The only difference I can see is in the console I am getting the following errors from prototype.js</p>
  
  <pre><code>TypeError: document.getElementById(...) is null
  element.attachEvent("ondataavailable", responder);
  prototype.js (line 5644)
  
  TypeError: element.attachEvent is not a function    
  element.attachEvent("ondataavailable", responder);
  prototype.js (line 5644)
  
  TypeError: element.attachEvent is not a function
  element.attachEvent("on" + actualEventName, responder);
  
  TypeError: element.dispatchEvent is not a function  
  element.dispatchEvent(event);
  </code></pre>
  
  <p>The third error appears only when I have the configurable product block uncommented on the page.  The function it is referring to is in prototype.js and is as follows</p>
  
  <pre><code>function observe(element, eventName, handler) {
  element = $(element);
  var responder = _createResponder(element, eventName, handler);
  if (!responder) return element;
  if (eventName.include(':')) {
  if (element.addEventListener)
  element.addEventListener("dataavailable", responder, false);
  else {
  element.attachEvent("ondataavailable", responder);
  element.attachEvent("onlosecapture", responder);
  }
  } else {
  var actualEventName = _getDOMEventName(eventName);
  if (element.addEventListener)
  element.addEventListener(actualEventName, responder, false);
  else
  element.attachEvent("on" + actualEventName, responder);
  }
  return element;
  } 
  </code></pre>
  
  <p>when I view the source I can see that the JSON object is there and the data is available but for some reason it's not getting added to the select boxes as options like on the product page.... Any help would be appreciated. </p>
  
  <p>Here is the code from app/design/frontend/default/mytheme/catalog/product/list.phtml</p>
  
  <pre><code>    &lt;?php if ($_product-&gt;getData('type_id') == "configurable"){  
                   Mage::unregister('product');
                      Mage::register('product', $_product);
                      $block = $this-&gt;getLayout()-&gt;createBlock(
                          'OrganicInternet_SimpleConfigurableProducts_Catalog_Block_Product_View_Type_Configurable',
                          'options_configurable',
                          array('template' =&gt; 'catalog/product/view/type/options/configurable.phtml')
                          );
                      echo $block-&gt;toHtml(); 
  
                     $priceBlock = $this-&gt;getLayout()-&gt;createBlock(
                          'OrganicInternet_SimpleConfigurableProducts_Catalog_Block_Product_Price',
                          $_product-&gt;getFinalPrice(),
                          array('template' =&gt; 'catalog/product/price.phtml')
                          );
                      echo $priceBlock-&gt;toHtml(); 
      }   
   ?&gt;
  </code></pre>
  
  <p>Here is the code that this block calls at /app/design/frontend/default/mytheme/template/catalog/product/view/type/options/configurable.phtml</p>
  
  <pre><code>&lt;?php
  $_product    = $this-&gt;getProduct();
  $_attributes = Mage::helper('core')-&gt;decorateArray($this-&gt;getAllowAttributes());
  ?&gt;
  &lt;?php if ($_product-&gt;isSaleable() &amp;&amp; count($_attributes)):?&gt;
  
      &lt;dl&gt;
      &lt;?php foreach($_attributes as $_attribute): ?&gt;
        &lt;dt&gt;&lt;label class="required"&gt;&lt;!--  &lt;em&gt;*&lt;/em&gt;--&gt;&lt;?php echo $_attribute-&gt;getLabel() ?&gt;&lt;/label&gt;&lt;/dt&gt;
          &lt;dd&lt;?php if ($_attribute-&gt;decoratedIsLast){?&gt; class="last"&lt;?php }?&gt;&gt;
              &lt;div class="input-box"&gt;
                  &lt;select name="super_attribute[&lt;?php echo $_attribute-&gt;getAttributeId() ?&gt;]" id="attribute&lt;?php echo $_attribute-&gt;getAttributeId() ?&gt;" class="required-entry super-attribute-select_&lt;?php echo $_product-&gt;getId()?&gt;"&gt;
                      &lt;option&gt;&lt;?php echo $this-&gt;__('Choose an Option...') ?&gt;&lt;/option&gt;
                  &lt;/select&gt;
                &lt;/div&gt;
          &lt;/dd&gt;
      &lt;?php endforeach; ?&gt;
      &lt;/dl&gt;
  
      &lt;script type="text/javascript"&gt;
          var spConfig_&lt;?php echo $_product-&gt;getId()?&gt; = new Inchoo_Product.Config(&lt;?php echo $this-&gt;getJsonConfig() ?&gt;);
      &lt;/script&gt;
  &lt;?php endif;?&gt;
  </code></pre>
  
  <p>Thanks in advance, let me know if you need any more info... </p>