Loading ...
Sorry, an error occurred while loading the content.

Re: [ydn-javascript] yahoo shopping 'refine by' navigation

Expand Messages
  • Eric Miraglia
    Rod, What they re doing there is pretty simple. They re using Event Utility to listen for a click on the More element; when that click happens, they make an
    Message 1 of 2 , Dec 9, 2006

      What they're doing there is pretty simple.  They're using Event Utility to listen for a click on the "More" element; when that click happens, they make an asynchronous request to the server using Connection Manager.  What is returned by the server is this:

      document.getElementById('afupdate').innerHTML="<!-- templates/default/ddUpdateFilters.ftl --> <!--#if
      (drilldownFilter.isAjax==true)--> <!-- templates/default/includes/pageFilterNavigation.ftl --><!--#else--
      > <!--div--> <!--/#if--> <a id=\"exp_fil_close\" class=\"grey\" href=\"\" onClick=\"javascript:divClose
      ('afupdate');return false;\">Hide</a> <br> </span> <ul class=\"exp_fil_list_nb\"> <li> <a href=\"/ctl
      /do/drilldown~100311823/Acer\"> Acer </a> <span class=\"dd_num\">(6)</span> </li> <li> <a href=\"/ctl
      /do/drilldown~100311823/LG\"> LG </a> <span class=\"dd_num\">(7)</span> </li> <li> <a href=\"/ctl/do
      /drilldown~100311823/Metz\"> Metz </a> <span class=\"dd_num\">(2)</span> </li> </ul> <ul class=\"exp_fil_list_b
      \"> <li> <a href=\"/ctl/do/drilldown~100311823/Panasonic\"> Panasonic </a> <span class=\"dd_num\">(8
      )</span> </li> <li> <a href=\"/ctl/do/drilldown~100311823/Philips\"> Philips </a> <span class=\"dd_num
      \">(1)</span> </li> <li> <a href=\"/ctl/do/drilldown~100311823/Samsung\"> Samsung </a> <span class=\"dd_num
      \">(4)</span> </li> </ul> <ul class=\"exp_fil_list_b\"> <li> <a href=\"/ctl/do/drilldown~100311823/Sharp
      \"> Sharp </a> <span class=\"dd_num\">(4)</span> </li> <li> <a href=\"/ctl/do/drilldown~100311823/Sony
      \"> Sony </a> <span class=\"dd_num\">(6)</span> </li> <li> <a href=\"/ctl/do/drilldown~100311823/Viewsonic
      \"> Viewsonic </a> <span class=\"dd_num\">(3)</span> </li> </ul> <div style=\"clear:left;font-size:x-small
      ;\">&nbsp;</div> </ul> </td> </tr> <div class=\"paging\"> </div> </div> <!--#if (drilldownFilter.isAjax
      ==true)--> <!--#else--> <!--div--> <!--/#if--> ";

      When this text comes back — into their Connection Manager success handler — they use the JavaScript eval() command to execute it.  The result is that the markup is set as the content of the element whose id attribute is "afupdate".

      All the steps you'd follow to do this are outlined on the Connection Manager documentation page and in its tutorial examples.


      Eric Miraglia
      Yahoo! Presentation Platform Engineering

      On Dec 9, 2006, at 5:10 PM, rod.good wrote:


      I've seen a feature on yahoo shopping which I'd like to replicate.
      Being very new to ajax, I'm just not sure where to begin.

      Take a look at the link :


      You can see in the 'refine by' section that there is a 'more' link
      under 'brand'. Clicking here opens a panel with all of the other
      available brands.

      This is a nice way of compressing content. Any pointers on how to
      replicate this functionality would be greatly appreciated.


    Your message has been successfully submitted and would be delivered to recipients shortly.