MooTools Hings

MooToolsHint.html

   //Add keydown event to textbox
      $('SKUSearch').addEvent('keydown', function(event) {
        if(event.key == "enter") {
          PPI.searchSku($('SkuForm'));
        }
      });
      
  AJAX JSON
      /** send the request */
        new Request.JSON({
            'url': '/Xrefr/AddCross/', 
            'secure': false, 
            'data': {
                'action': 'cross', 
                'oem_code': oem, 
                'part_no': part
            }, 
            'onComplete': function(rs){
            /** check for success */
                if (!rs.success) new Notify({'text': 'An Error Occurred::' + rs.message, 'classes': ['inlineWarn']});
                else {
                /** add form var */
                    $('XrefrForm').cross_sku_number.value = rs.sku;
                /** show on page */
                    $('XSKU').set('text', rs.sku);
                }
            }
        }).send();
    }    
  
  Run the report in the background and not navigate to watch pages.
    
  <tal:block metal:fill-slot="onload">
  <script type="text/javascript">
  //<![CDATA[
  /** 
 *AJAX Route Submit 
 */
  
    function runRoute(routeName) {
  /** perform request */
    new Request.HTML({
      'url': '/OIE/runRoute2/', 
      'secure': false, 
      'data': {
        'routeName':routeName,
        'params': { 'subject': 'testRun'},
      }, 
      'onComplete': function() {
        new Notify({'text': 'Processing - Look for report in by email in a few minutes', 'classes': ['inlineNotice']});
      }
    }).send();
  }
  //]]>
  </script>
  </tal:block>
    <button onclick="runRoute('TEST_Mailback');">Run</button>
    
 Load form with Post:
  // get Report Data */
    new Request.HTML({
      'url': url,
      'secure': false, 
      'data': $('ReportMaker'), 
      'update': $('ReportArea'),
      'success': ''
    }).post();
    
 Load form with Rest:
   function getEmployeesLabor(br,period_end)	{
     period_end = (typeof period_end == 'undefined') ? false : period_end;
   	/* send the request to get branch employee template */
	 $('LaborContainer').load('/Payroll/renderLaborBilledData/' + br + '/' + period_end);
  } 
  
SLIDE PANEL

window.addEvent('domready', function(){

	$('Panel').setStyle('height','auto');
	var mySlide = new Fx.Slide('Panel').hide();  //starts the panel in closed state  

    $('TogglePanel').addEvent('click', function(e){
		e = new Event(e);
		mySlide.toggle();
		e.stop();
	});

    $('ClosePanel').addEvent('click', function(e){
		e = new Event(e);
		mySlide.slideOut();
		e.stop();
	});

});

<!-- Panel -->
<div id="Panel" class="gren3d" style="margin-top:-4px">
   
   <div class="panelContent" style="width:900px;margin:auto;height:75px">
      <button id="ClosePanel" class="close fl" />
      
        <div id="Routes" class="iwrap border" >
        <script>
         $(Routes).load('/Routes/render');
         </script>
        </div>
        
        <div id="Vista"  class="iwrap border">
        <script>
         $(Vista).load('/VistaSearch/render');
         </script>
        </div>
        
        <div id="Direct"  class="iwrap border">
        <script>
         $(Direct).load('/Directory/render');
         </script>
        </div>
   
    </div>
</div> 

<div style="width:10em;margin:auto">
    <a id="TogglePanel" href="#">Search</a>
</div>