Never been to CodeSnippets before?

Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world (or not, you can keep them private!)

27 total

On This Page:

  1. 1 Crea Objeto XMLHTTPRequest
  2. 2 Ajax-creaObjeto-XMLHttpRequest
  3. 3 jQuery namespaced event binding/unbinding
  4. 4 jQuery and Rails' respond_to
  5. 5 Ajax / Effects-only link
  1. 6 Never render the full layout in a Rails view when called via AJAX
  2. 7 AJAX multiple updates to calling page without using RJS template
  3. 8 programmatically firing object event using javascript
  4. 9 Ajax link_to_remote replace with spinner on click
  5. 10 Multiple updates to calling page in AJAX call

Crea Objeto XMLHTTPRequest

to ajax xmlhttprequest by delta14 on Apr 27, 2008 
function ajaxFunction()
{
var xmlhttp;
try
  { 
 	 // Firefox, Opera 8.0+, Safari 
      xmlhttp=new XMLHttpRequest(); 
  }
catch (e)
    { 	 // Internet Explorer  
     try
    {   
     xmlhttp=new ActiveXObject("Msxml2.XMLHTTP"); 
    }
    catch (e)
    	{
	 try
     	 {
	  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
	 }
   	catch (e)
    	    {
	     alert("Explorador no soporta--------AJAX!");  
	     xmlhttp= false;  
	    }
       }	// fin si no es Internet Explorer
     }   // fin si no es Firefox
return xmlhttp;
} // fin de crear objeto XMLHTTPRequest

Ajax-creaObjeto-XMLHttpRequest

to ajax xmlhttprequest by delta14 on Apr 27, 2008
// description of your code here

Código JavaScript:
/*
*Esta libreria es una libreria AJAX creada por Javier Mellado con la inestimable
*colaboracion de Beatriz Gonzalez.
*y descargada del portal AJAX Hispano http://www.ajaxhispano.com
*contacto javiermellado@gmail.com
*
*Puede ser utilizada, pasada, modificada pero no olvides mantener
*el espiritu del software libre y respeta GNU-GPL
*/ 
function creaAjax(){
         var objetoAjax=false;
         try {
          /*Para navegadores distintos a internet explorer*/
          // jajajajaja ... IE tambien entra aqui ...
          objetoAjax = new ActiveXObject("Msxml2.XMLHTTP");
         } catch (e) {
          try {
                   /*Para explorer*/
                   objetoAjax = new ActiveXObject("Microsoft.XMLHTTP");
                   }
                   catch (E) {
                   objetoAjax = false;
          }
         }

         if (!objetoAjax && typeof XMLHttpRequest!='undefined') {
          objetoAjax = new XMLHttpRequest();
         }
         return objetoAjax;
}

jQuery namespaced event binding/unbinding

to javascript dom ajax js jquery events scraping scrape by jamiew on Jan 12, 2008
// from a comment by Steven Bristol on errtheblog.com

I just wanted to share a really killer event handling tidbit:

Generally you do something like:

jQuery(’.class’).click(function(){//whatever});


Everyone knows this can be rewritten as:

jQuery(’.class’).bind(‘click’, function(){//whatever});


But sometimes you need to unbind something:

jQuery(’.class’).unbind(‘click’, function(){//});


The problem with this is that it will unbind all the click events, not just yours. So if multiple bits of javascript have a click event handler for ’.class’, unbinding removes them all. (This is because there is no way to identify an anonymous function.)

But jQuery is so good that there is a way to handle this: Namespacing your events:

jQuery(’.class’).bind(‘click.namespace’, function(){//}); 
jQuery(’.class’).unbind(‘click.namespace’);


or for reinitializing an element added via ajax:

jQuery(’.class’)unbind(‘click.namespace’).bind(‘click.namespace’, function(){//});

jQuery and Rails' respond_to

to ruby rails javascript rubyonrails ajax js jquery respond_to by jamiew on Jan 12, 2008
// Just throw this at the bottom of your application.js and you’re good to go: all jQuery ajax requests will trigger the wants.js block of your respond_to declaration, exactly like you’d expect. Enjoy.
// via: http://ozmm.org/posts/jquery_and_respond_to.html

jQuery.ajaxSetup({ ‘beforeSend’: function(xhr) {xhr.setRequestHeader(“Accept”, “text/javascript”)} })

Ajax / Effects-only link

to ajax by deckard on Sep 23, 2007
To create a link that is used purely for some Scriptaculous effects or for an Ajax call, use # as the href target and return false from the javascript onlick call.

<a href="#" onclick="Effect.toggle('widget_preview', 'blind');return false;">Blog this ...</a>

Never render the full layout in a Rails view when called via AJAX

to ruby rails javascript rubyonrails ajax programming jquery degradation degradable by jamiew on Sep 09, 2007
Essential for degradable javascript, when one never knows if a view or partial is being called via XmlHttpRequest or not. Throw the below code in your ApplicationController (application.rb)

More info in this blog post

def render(*args)
  	args.first[:layout] = false if request.xhr? and args.first[:layout].nil?
	super
end

AJAX multiple updates to calling page without using RJS template

to rails ajax by deckard on Jul 25, 2007
When a controller action is called via XHR (XmlHttpRequest), the action will look for a .rjs template first, then a .rhtml template if not available.

To skip using the .rjs template, include a render(:update) {|page| <block code> } call to perform updates.

  def toggle_showall
    render(:update) do |page|
      page[:fb_content].replace_html "just text? ripoff!"
      page[:flash_box].visual_effect :blind_down, :duration => 0.25
    end
  end


We use page as a hash to reference elements by id from the originating page.

page[:fb_content]


Then perform the updates to the element. Here we're replacing the contents of the element with id of "fb_content" with the string of text.
page[:fb_content].replace_html "just text? ripoff!"


You can render anything you could normally using a render call, example, some partial.
page[:fb_content].replace_html :partial => "shared/some_partial"


If the partial you're calling has instance vars you need to fill before, just include them before the render(:update) block and they'll be available to the partial during rendering.


Here we execute scriptaculous' Effect.BlindDown on element 'flash_box' with option of duration of .25 seconds.
page[:flash_box].visual_effect :blind_down, :duration => 0.25


There are plenty of other methods you can call on a page element. Refer to the Agile WebDev PDF for more details.

programmatically firing object event using javascript

to javascript ajax by deckard on Jul 22, 2007
Simply call the event of the object.

<select id='element_id' onChange="some_javascript_func">

<a href="#" onclick="$('element_id').onchange();">


Note that this uses Prototype's $ function to find the element.

More details here:
http://tinyurl.com/2b45me

Ajax link_to_remote replace with spinner on click

to ajax by deckard on Jul 21, 2007
This combination of CSS and prototype allows you to swap out the text with a spinner element, then back when loading is complete.

CSS

div.loading {
	background: url(/images/dots-white.gif) no-repeat 8px 6px;
	text-indent: -999px;
}


RHTML
<div id="lc" class="">
<%= link_to_remote 'toggle action', {
	:url => toggle_showall_new_recipe_path, 
	:method => :get,
	:before => "Element.addClassName('lc', 'loading')",
	:complete => "Element.removeClassName('lc', 'loading')"}, 
	:class => 'loading xhr', 
	:id => 'xhr-link' %>
</div>


Upon link click, the loading class will be added, moving the text off the window, effectively hiding it, while showing the background (not background-image). When XHR call is complete, simply remove the class and you're back to normal display properties.

Multiple updates to calling page in AJAX call

to rails ajax by deckard on Jul 20, 2007
Uses Rails' .rjs template to form multiple update calls, server side, that will update the calling page with the included javascript.

Example:

def original_control_handler
 [misc methods and other things]
 [done normally in this controller]
 render :update do |page|
  page.replace_html 'calling_element_id', :partial => 'updated_template'
  page.helper 'helper_id', :helper_options => 'go here'
 end
end


Without rjs templates, you would have to write complex javascript by hand to update multiple elements on the calling page after returning from an XMLHTTPREQUEST (XHR) request. This allows you to avoid that, and do it all server side.

You can also place the update calls into an actual view templates instead of in the controller. Just put the contents of the update block into app/views/[controller]/original_control_handler

To replace simple tag contents, just provide a string of what to replace it with
 ...
 page.replace_html 'element_to_update', "this string goes in element"


Or replace the entire tag itself.
 page.replace 'element2_to_update', 
  (link_to_remote "link_text", {:url => dest, :method => :get, :id => 'element2_to_update')



27 total

On This Page:

  1. 1 Crea Objeto XMLHTTPRequest
  2. 2 Ajax-creaObjeto-XMLHttpRequest
  3. 3 jQuery namespaced event binding/unbinding
  4. 4 jQuery and Rails' respond_to
  5. 5 Ajax / Effects-only link
  1. 6 Never render the full layout in a Rails view when called via AJAX
  2. 7 AJAX multiple updates to calling page without using RJS template
  3. 8 programmatically firing object event using javascript
  4. 9 Ajax link_to_remote replace with spinner on click
  5. 10 Multiple updates to calling page in AJAX call