DZone Snippets: ajax code

Rails ajax star rater

sporkyy (Todd Sayre) — Fri, 20 Jun 2008 04:19:32 GMT

Here's some Rails code I created to try out the CSS Star Rating Redux from Komodo Media.

I set up my routes.rb to use REST.

map.resources :titles, :member => { :rate => :any }

I use the Ruby Linguistics Framework to make this implementation easier. Install it using RubyGems (sudo gem install linguistics). And then put the following code at the top of your application_helper.rb file.

require 'linguistics'

Linguistics::use(:en)  # extends Array, String, and Numeric

This code goes in the page you want the rater to appear in, in this example, show.html.erb.

<%= render :partial => '/partials/star_rating', :locals => { :record => @title } %>

Create a partial called _star_rating.html.erb in your RAILS_ROOT/views/partials directory.

Currently <%= record.rating -%>/5 Stars.

<% (1..5).each do |i| -%>

    <%= link_to_remote pluralize(i, 'Star'), {

        :update => "#{dom_id(record)}_rating",

        :url => eval("rate_#{record.class.name.downcase}_url(:rating => #{i})")

    }, {

        :class => "#{i.en.numwords}-#{i.abs == 1 ? 'star' : 'stars'}",

        :title => "#{pluralize(i, 'star')} out of 5"

    } -%>

<% end -%>

Generating Taconite command documents

desfrenes (desfrenes) — Thu, 08 May 2008 02:50:20 GMT

// description of your code here
Hello,

This is a port of a php class used to generate XML taconite command documents, useful for (very) easy and powerful ajaxy stuff, if you don't know what that is just check it there in french : http://www.desfrenes.com/playground/taconite/ or there in english : http://www.malsup.com/jquery/taconite/.

Basically what it does is generate an XML document that is later processed by a javascript plugin which executes a serie of DOM modifications.

About the code, I'm a Django beginner as well as a Python beginner so kind advices are welcome.

Cheers.



# usage:

#

# t = Taconite()

#

# t.append("#toto","test")

# t.remove("#tutu")

# t.js('alert("hello world");')

# t.toggleClass('blue','body')

# t.css("body","background-color","white")

# [...]

# print t.toprettyxml()



import xml.dom.minidom as dom



class Taconite(dom.Document):

    def __init__(self):

        dom.Document.__init__(self)

        taconite = self.createElement("taconite")

        self.appendChild(taconite)



    def __str__(self):

        return self.toxml(encoding="utf-8")

    

    def camelizeCssProperty(self,property):

        words = property.split('-')

        camelized = words[0].lower()

        for word in words[1:] :

            camelized = camelized + word[0].upper() + word[1:]

        return camelized

    

    def js(self,script):

        command = self.createElement("eval")

        js = self.createTextNode(script)

        command.appendChild(js)

        self.childNodes[0].appendChild(command)

    

    def changeContentCommand(self,method,selector,content):

        html_dom = dom.parseString(content)

        command = self.createElement(method)

        command.setAttribute("select",selector)

        command.appendChild(html_dom.childNodes[0])

        self.childNodes[0].appendChild(command)

    

    def changeStateCommand(self,action,selector):

        command = self.createElement(action)

        command.setAttribute("select",selector)

        self.childNodes[0].appendChild(command)

    

    def CssCommand(self,action,css_class,selector):

        command1 = self.createElement(action)

        command1.setAttribute("select",selector)

        command1.setAttribute("arg1",css_class)

        command2 = self.createElement(action)

        command2.setAttribute("select",selector)

        command2.setAttribute("value",css_class)

        self.childNodes[0].appendChild(command1)

        self.childNodes[0].appendChild(command2)

    

    def addClass(self,css_class,selector):

        self.CssCommand("addClass",css_class,selector)



    def removeClass(self,css_class,selector):

        self.CssCommand("remove",css_class,selector)



    def toggleClass(self,css_class,selector):

        self.CssCommand("toggleClass",css_class,selector)

    

    def append(self,selector,content):

        self.changeContentCommand("append",selector,content)

    

    def prepend(self,selector,content):

        self.changeContentCommand("prepend",selector,content)

        

    

    def before(self,selector,content):

        self.changeContentCommand("before",selector,content)

        

    

    def after(self,selector,content):

        self.changeContentCommand("after",selector,content)

    

    def wrap(self,selector,content):

        self.changeContentCommand("wrap",selector,content)

    

    def replace(self,selector,content):

        self.changeContentCommand("replace",selector,content)

    

    def replaceContent(self,selector,content):

        self.changeContentCommand("replaceContent",selector,content)

    

    def remove(self,selector):

        self.changeStateCommand("remove",selector)

    

    def show(self,selector):

        self.changeStateCommand("show",selector)

    

    def hide(self,selector):

        self.changeStateCommand("hide",selector)

    

    def removeContent(self,selector):

        self.changeStateCommand("empty",selector)

    

    def css(self,selector,property,value):

        command = self.createElement("css")

        command.setAttribute("select",selector)

        command.setAttribute("name",self.camelizeCssProperty(property))

        command.setAttribute("value",value)

        self.childNodes[0].appendChild(command)

Simple javascript XHR object with fix for missing onreadystatechange event in Firefox (for synchronous calls)

ChrisBloom7 (Chris Bloom) — Mon, 21 Apr 2008 17:35:19 GMT

This code fixes the issue in Firefox where the onreadystatechange event is not called for synchronous XHR requests. It is based on the XHConn script from http://xkr.us/code/javascript/XHConn/, patched with the fix documented at http://lukav.com/wordpress/2007/04/12/firefox-firebug-and-synchronos-calls-problem/



/** XHConn - Simple XMLHTTP Interface - bfults@gmail.com - 2005-04-08        **

 ** Code licensed under Creative Commons Attribution-ShareAlike License      **

 ** http://creativecommons.org/licenses/by-sa/2.0/                           **/

/**

 * Modified slightly from original to support synchoronous transactions

 * CDB 2007-05-16, 2007-06-05

 */



function XHConn()

{

	var xmlhttp, bComplete = false;

	try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); }

	catch (e) { try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); }

	catch (e) { try { xmlhttp = new XMLHttpRequest(); }

	catch (e) { xmlhttp = false; }}}

	if (!xmlhttp) return null;

	this.connect = function(sURL, sMethod, sVars, fnDone, bAsynch)

	{

		if (!xmlhttp) return false;

		bComplete = false;

		sMethod = sMethod.toUpperCase();



		if (bAsynch == null) bAsynch = true; //treat asynch as an optional argument



		try {

			if (sMethod == "GET")

			{

				xmlhttp.open(sMethod, sURL+"?"+sVars, (bAsynch == true));

				sVars = "";

			}

			else

			{

				xmlhttp.open(sMethod, sURL, (bAsynch == true));

				xmlhttp.setRequestHeader("Method", "POST "+sURL+" HTTP/1.1");

				xmlhttp.setRequestHeader("Content-Type",

					"application/x-www-form-urlencoded");

			}



			xmlhttp.onreadystatechange = function(){

				if (xmlhttp.readyState == 4 && !bComplete)

				{

					bComplete = true;

					fnDone(xmlhttp);

				}

			};

			xmlhttp.send(sVars);



			/**

			 * Firefox <= 2.0.0 doesn't fire onreadystatechange for synchronous requests.

			 * See http://lukav.com/wordpress/2007/04/12/firefox-firebug-and-synchronos-calls-problem/

			 */

			var isGecko = (document.addEventListener) ? true : false;

			try {

				if (!bAsynch && isGecko && xmlhttp.onreadystatechange == null) {

					bComplete = true;

					fnDone(xmlhttp);

					return true;

				}

			}

			catch (e) { return false; }

			/**

			 * End synchronous request patch

			 */

		}

		catch(z) { return false; }

		return true;

	};

	return this;

}

Basic XMLHttprequest

Yansky (Yansky) — Tue, 25 Mar 2008 19:46:23 GMT

Non-IE version:





xhr = new XMLHttpRequest();                     

xhr.open(

    "GET",                          

    "http://foo.com",       

    true                            

  );

xhr.onreadystatechange=function(){

    if (xhr.readyState==4){

      if (xhr.status==200){

        parseResponse(xhr);

      }else{

        //handle the HTTP error...

      }

    };

  };

xhr.send(null);

// Basic XMLHttprequest (code from http://www.sitepoint.com/article/take-command-ajax)



function makeHttpRequest(url){



   var http_request = false;



   if (window.XMLHttpRequest) { // Mozilla, Safari,...

   

       http_request = new XMLHttpRequest();

	   

       if (http_request.overrideMimeType){

	   

           http_request.overrideMimeType('text/xml');

		   

       }

	   

   } 

   else if (window.ActiveXObject) { // IE

   

       try{

	   

           http_request = new ActiveXObject("Msxml2.XMLHTTP");

		   

       } 

	   catch(e){

	   

           try{

		   

               http_request = new ActiveXObject("Microsoft.XMLHTTP");

			   

           } 

		   catch (e) {}

       }

	   

   }



   if (!http_request) {

   

       alert('Unfortunatelly you browser doesn\'t support this feature.');

	   

       return false;

	   

   }

   http_request.onreadystatechange = function() {

   

       if (http_request.readyState == 4){

	   

           if (http_request.status == 200){



				alert(http_request.responseText);



           } 

		   else{

		   

               alert('There was a problem with the request.(Code: ' + http_request.status + ')');

			   

           }

		   

       }

	   

   };

   

   http_request.open('GET', url, true);

   http_request.send(null);

}

miniAJAX.js - updated to be a bit more robust

Michael.Lowden (Michael Lowden) — Wed, 27 Feb 2008 18:51:38 GMT

inspired by timmorgan's post here: http://snippets.dzone.com/posts/show/2025

see CHANGELOG in details.

function $(e){if(typeof e=='string')e=document.getElementById(e);return e};

function collect(a,f){var n=[];for(var i=0;i

ajax={};

ajax.x=function(){try{return new ActiveXObject('Msxml2.XMLHTTP')}catch(e){try{return new ActiveXObject('Microsoft.XMLHTTP')}catch(e){return new XMLHttpRequest()}}};

//ajax.serialize=function(f){var g=function(n){return f.getElementsByTagName(n)};var nv=function(e){if(e.name)return encodeURIComponent(e.name)+'='+encodeURIComponent(e.value);else return ''};var i=collect(g('input'),function(i){if((i.type!='radio'&&i.type!='checkbox')||i.checked)return nv(i)});var s=collect(g('select'),nv);var t=collect(g('textarea'),nv);return i.concat(s).concat(t).join('&');};

ajax.serialize=function(f){var g=function(n){return f.getElementsByTagName(n)};var nv=function(e){if(e.name)return encodeURIComponent(e.name)+'='+encodeURIComponent(e.value);else return ''};var i=collect(g('input'),function(i){if((i.type!='radio'&&i.type!='checkbox')||i.checked)return nv(i)});var s=collect(g('select'),nv);var t=collect(g('textarea'),nv);var sOutput = i.concat(s).concat(t).join('&'); while (sOutput.indexOf('&&')>0) sOutput = sOutput.replace("&&","&"); return sOutput;}; // i've modified to clear out instances of "&&" in the POSTback

ajax.send=function(u,f,m,a){var x=ajax.x();x.open(m,u,true);x.onreadystatechange=function(){if(x.readyState==4)f(x.responseText)};if(m=='POST')x.setRequestHeader('Content-type','application/x-www-form-urlencoded');x.send(a)};

ajax.sendNoCache=function(u,f,m,a){u = u + (u.indexOf('?') < 0 ? '?' : '&') + 'noCache=' + new Date().getTime();var x=ajax.x();x.open(m,u,true);x.onreadystatechange=function(){if(x.readyState==4)f(x.responseText)};if(m=='POST')x.setRequestHeader('Content-type','application/x-www-form-urlencoded');x.send(a)};

ajax.get=function(url,func){ajax.send(url,func,'GET')};

ajax.getNoCache=function(url,func){url = url + (url.indexOf('?') < 0 ? '?' : '&') + 'noCache=' + new Date().getTime();ajax.send(url,func,'GET')};

ajax.gets=function(url){var x=ajax.x();x.open('GET',url,false);x.send(null);return x.responseText};

ajax.getsNoCache=function(url){url = url + (url.indexOf('?') < 0 ? '?' : '&') + 'noCache=' + new Date().getTime();var x=ajax.x();x.open('GET',url,false);x.send(null);return x.responseText};

ajax.post=function(url,func,args){ajax.send(url,func,'POST',args)};

ajax.postNoCache=function(url,func,args){ajax.sendNoCache(url,func,'POST',args)};

ajax.update=function(url,elm){var e=$(elm);var f=function(r){e.innerHTML=r};ajax.get(url,f);};

ajax.updateNoCache=function(url,elm){var e=$(elm);var f=function(r){e.innerHTML=r};ajax.getNoCache(url,f);};

ajax.submit=function(url,elm,frm){var e=$(elm);var f=function(r){e.innerHTML=r};ajax.post(url,f,ajax.serialize(frm))};

ajax.submitNoCache=function(url,elm,frm){var e=$(elm);var f=function(r){e.innerHTML=r};ajax.postNoCache(url,f,ajax.serialize(frm))};







/** HOW TO USE

ajax.x - The XMLHttpRequest object (or MS equivalent) used for communication



ajax.serialize(f)

  f = the form element you wish to be serialized

  This function serializes all the fields in a form so that they can be passed as a query string in the form 'arg1=val1&arg2=val2'.



ajax.getNoCache(url, func)

ajax.get(url, func)

  url = the url to query (can contain arguments after a '?')

  func = the function to call once the response is returned (no quotes)

  This function uses a GET request to query the specified url and return a response to the specified function.



ajax.getsNoCache(url)

ajax.gets(url)

  url = the url to query (can contain arguments after a '?')

  This function uses a GET request to query the specified url and return a response synchronously. Use this sparingly, as synchronous calls can lock up the browser.



ajax.postNoCache(url, func, args)

ajax.post(url, func, args)

  url = the url to query

  func = the function to call once the response is returned (no quotes)

  args = a string containing arguments to be passed to the url

  This function uses a POST request to query the specified url and return a response to the specified function.



ajax.updateNoCache(url, elm)

ajax.update(url, elm)

  url = the url to query

  elm = the (name of the) element to update

  This function uses a GET request to query the specified url and insert the result into the specified element.



ajax.submitNoCache(url, elm, frm)

ajax.submit(url, elm, frm)

  url = the url to query

  elm = the (name of the) element to update

  frm = the form element to submit

  This function is typically used in the onsubmit handler of a function. The form is not submitted the usual way; the form is instead serialized using 'ajax.serialize' and submitted using 'ajax.post'. The result is then inserted into the specified element.

*/





/** CHANGES - by Michael Lowden

[2/27/2008 10:43 AM] 

Update the "serialize" function to get rid of risk of consecutive "&" symbols.  where "&&&&&&" may throw either an exception or a warning on some webservers (e.g. Tomcat).



[2/26/2008 4:47 PM]

Adapted it a little to handle for IE's stupid Caching issue when using AJAX:

I simply added the following functions:

  ajax.sendNoCache(url,func,method,args), not called by user, but called by some below functions.

  ajax.getNoCache(url, func)

  ajax.getsNoCache(url)

  ajax.postNoCache(url, func, args)

  ajax.updateNoCache(url, elm)

  ajax.submitNoCache(url, elm, frm)

*/

Upload a file using Ajax

jrobertson (James Robertson) — Sat, 23 Feb 2008 14:33:52 GMT

This code is categorised as Ajax because it "fits within my definition of Ajax" as explained from the Ajax File Upload [openjs.com] article.



  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">



  

    File upload

Pull JavaScript code dynamically into your web page at run-time.

jrobertson (James Robertson) — Fri, 21 Dec 2007 22:36:04 GMT

Using the JavaScript keyword Eval() with AJAX makes it possible to dynamically add JavaScript code at run-time to your web page.

Here's the complete code dynalert.html, dynalert.js, and dynalert.cgi

file:dynalert.html



	"http://www.w3.org/TR/xhtml1-strict.dtd">



	

		dynalert

		

		

	



	

123

file: dynalert.js



function populatePage(results){

  eval(results);

}



//send the update

function update() {



	var strServer = "dynalert.cgi";

	url2 = "";

	SubmitRBData(strServer,"?" + url2);



}



function SubmitRBData(strUrl, strPostFields) {

	http.open("GET", strUrl + strPostFields, true);

	http.onreadystatechange = handleHttpResponse;

	http.send(null);

}

function handleHttpResponse() {



	if (http.readyState == 4) {

		if (http.status == 200)

		{

		results = http.responseText;

		populatePage(results); // string response

		}

	}



}



function getHTTPObject() {



	var objXMLHttp=null



	if (window.XMLHttpRequest)

	{

		objXMLHttp=new XMLHttpRequest()

	}

	else if (window.ActiveXObject)

	{

		objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")

	}



return objXMLHttp



}



var http = getHTTPObject(); // We create the HTTP Object

file:dynalert.cgi



#!/usr/bin/ruby

# dynalert.cgi



require 'cgi'



cgi = CGI.new



#title = cgi['title']



puts "Content-Type: text/html"

puts

puts "function transcript(){ alert('and Bob said this idea might work.');}"

puts "alert('this is a success');"

puts "alert('we can now pass back anything we like');"

puts "transcript();"

puts "oNew = document.createElement('strong');"

puts "oNew.innerHTML = 'yes - this is bold text';"

puts "document.getElementById('i1').appendChild(oNew);"

Capturing the value from an HTML text box - Ajax style

jrobertson (James Robertson) — Tue, 18 Dec 2007 17:08:23 GMT

This extract of JavaScript code illustrates how the value of a text box on an HTML form could be saved efficiently when used with AJAX.



  onkeyup="timed_updateSummaryCRecord(event.keyCode, '1','project', this.value)" />

The onkeyup event retrieves the user input as soon as the key is pressed, then the event.keyCode is validated to ensure only alpha-numeric characters trigger the save routine.



function timed_updateSummaryCRecord(keyCode, parent_id, field,  val) {

  if (val.length > 0 && ((keyCode > 40) || (keyCode == 8)) ) {

    clearTimeout(t);

    t = setTimeout("updateSummaryCRecord('" + parent_id + "', '" + field + "', '" + val + "')", 1000);

  }

}

The setTimeout will trigger the save routine after 1 second, however if the user continues to type before the 1 second timer has elapsed, the running timer will be cancelled and the new timer will start.

Note: keyCode value '8' is accepted because it is the backspace key. It would also be helpful to accept the delete key press.

jQuery Maps Interface - Easily create Google or Yahoo maps

digitalspaghetti (Tane Piper) — Fri, 27 Jul 2007 11:52:21 GMT

/* jQuery Maps (jmaps) - A jQuery plugin for Google Maps API
* Author: Tane Piper (digitalspaghetti@gmail.com)
* With special thanks Dave Cardwell (who helped on getting the first version of this plugin to work).
* Website: http://code.google.com/p/gmapp/
* Licensed under the MIT License: http://www.opensource.org/licenses/mit-license.php
* This plugin is not affiliated with Google or Yahoo.
* For Google Maps API and T&C see http://www.google.com/apis/maps/
* For Yahoo! Maps API and T&C see http://developer.yahoo.com/maps/
*
* === Changelog ===
* Version 1.3
* Added support for creating Yahoo! Maps, can create Map, Satallite or Hybrid. Check out available options below
* Added support for creating points on Yahoo! maps.
* Added support for creating Polylines on Yahoo! maps.
* Added support for GeoRSS files on both Yahoo! and Google maps, as well as existing KML support for Google, method
* name was changed from .addKml to .addRss
* Moved directions search out of main namespace, now function that is called from within plugin by providing fields
*
* Version 1.2 (25/07/2007)
* Moved GClientGeocoder into searchAddress method
* Fixed bug in searchAddress method regarding getPoint().
*
* Version 1.1 (16/07/2007)
* Changed name to remove Google from main name - namespace now .jmap.
* Added additional options:
* + Add map dragging enable/disable.
* + Add scroll wheel zooming.
* + Add smooth continuous zooming (on certain browsers).
* + Added clean unloading of Google objects.
* Added .addPoly method. Allows the creation of polylines on the map.
* Added .addKml support for rendering KML Files.
* Added .directions Driving Direction support.
*
* Version 1.0 (13/07/2007)
* Initial version.
* Creates Google Map.
* Add points to map.
* Takes address or postcode, Geocodes and centers map. Also creates a draggable marker.
*/





(function($) {

	/* function searchAddress(jmap, address, settings)

	 * This function is an internal plugin method that returns a GLatLng that can be passed

	 * to a Google map.

	 */

	function searchAddress(jmap, address, settings) {

		

		if (jmap._mapType) {

			alert('Yahoo Maps Geocoding not yet supported');

		}

		

		if (jmap.i.Au) {

			GGeocoder = new GClientGeocoder();

			GGeocoder.getLatLng(address, function(point){

				if (!point) {

					alert(address + " not found");

				} else {

					jmap.setCenter(point,settings.zoom);

					var marker = new GMarker(point, {draggable: true});

					jmap.addOverlay(marker);

					pointlocation = marker.getPoint();

					marker.openInfoWindowHtml("Latitude: " + pointlocation.lat() + "
Longitude: " + pointlocation.lng());

					GEvent.addListener(marker, "dragend", function(){

						mylocation = marker.getPoint();

						marker.openInfoWindowHtml("Latitude: " + pointlocation.lat() + "
Longitude: " + pointlocation.lng());			

					});

				}

			});

		}	

	}

	

	/* directions: function(map,query, panel)

	 * Takes a Direction query and returns directions for map.  Optional panel for text information

	 */

	function searchDirections(jmap,query,panel) {

		// Yahoo Maps

		if (jmap._mapType) {

			alert('Yahoo Directions support not yet added')	;

		}

		

		// Google Maps

		if (jmap.i.Au) {

			var dirpanel = document.getElementById(panel);

			directions = new GDirections(jmap, dirpanel);

			directions.load(query);

		}

	}



	$.fn.extend({

	/* jmap: function(settings)

	 * The constructor method

	 * Example: $().jmap();

	 */

	jmap: function(settings) {

		var version = "1.3";

		/* Default Settings*/	

		var settings = jQuery.extend({

			provider: "google",		// can be "google" or "yahoo"

			maptype: "hybrid",		// can be "map", "sat" or "hybrid"

			center: [55.958858,-3.162302],	// G + Y

			zoom: 12,				// G + Y

			controlsize: "small",	// G + Y

			showtype: true,			// G + Y

			showzoom: true,			// Y

			showpan: true,			// Y

			showoverview: true,		// G

			showscale: true,		// Y

			dragging: true,			// G + Y

			scrollzoom: true,		// G + Y

			smoothzoom: true,		// G

			searchfield: "#Address",

			searchbutton: "#findaddress",

			directionsto: "#to",

			directionsfrom: "#from",

			directionsfind: "#getDirections",

			directionspanel: "myDirections"

		},settings);

		

		return this.each(function(){

			switch(settings.provider)

			{

				case "yahoo":

					var jmap = this.jMap = new YMap(this);

					switch(settings.maptype) {

						case "map":

							var loadmap = YAHOO_MAP_REG;

							break;

						case "sat":

							var loadmap = YAHOO_MAP_SAT;

							break;

						default:

							var loadmap = YAHOO_MAP_HYB;

							break;

					}

					jmap.setMapType(loadmap);

					jmap.drawZoomAndCenter(new YGeoPoint(settings.center[0],settings.center[1]), settings.zoom);

					if (settings.showtype == true){

						jmap.addTypeControl();	// Type of map Control

					}

					if (settings.showzoom == true && settings.controlsize == "small" ){

						jmap.addZoomShort();	// Small zoom control

					}

					if (settings.showzoom == true && settings.controlsize == "large" ){

						jmap.addZoomLong();		// Large zoom control

					}

					if (settings.showpan == true) {

						jmap.addPanControl();	// Pan control

					}

					if (settings.showscale == false) {

						/* On by default */

						jmap.removeZoomScale();	// Show scale bars

					}

					if (settings.dragging == false) {

						/* On by default */

						jmap.disableDragMap();	// Is map draggable?

					}

					if (settings.scrollzoom == false) {

						/* On by default */

						jmap.disableKeyControls(); // Mousewheel and Keyboard control

					}

					break;

					

				case "mslive":

					alert('Microsoft Live Maps are currently not supported but planned for version 1.4')

					break;

					

				default:	

					var jmap = this.jMap = new GMap2(this);

					switch(settings.maptype) {

						case "map":

							var loadmap = G_NORMAL_MAP;

							break;

						case "sat":

							var loadmap = G_SATELLITE_MAP;

							break;

						default:

							var loadmap = G_HYBRID_MAP;

							break;

					}

					jmap.setCenter(new GLatLng(settings.center[0],settings.center[1]),settings.zoom,loadmap);

					switch(settings.controlsize)

					{

						case "small":

							jmap.addControl(new GSmallMapControl());

							break;

						case "large":

							jmap.addControl(new GLargeMapControl());

							break;

						case "none":

							break;

						default:

							jmap.addControl(new GSmallMapControl());

					}

					if (settings.showtype == true){

						jmap.addControl(new GMapTypeControl());

					}

					if (settings.showoverview == true){

						jmap.addControl(new GOverviewMapControl());

					}

					if (settings.scrollzoom == true) {

						/* Off by default */

						jmap.enableScrollWheelZoom();

					}

					if (settings.smoothzoom == true) {

						/* Off by default*/

						jmap.enableContinuousZoom();

					}

					if (settings.dragging == false) {

						/* On by default */

						jmap.disableDragging();

					}

			}	

			/* Seach for the lat & lng of our address*/

			jQuery(settings.searchbutton).bind('click', function(){

				searchAddress(jmap, jQuery(settings.searchfield).attr('value'), settings);

			});

			/* Search for Directions */

			jQuery(settings.directionsfind).bind("click", function(){

				var from = $(settings.directionsfrom).attr('value');

				var to = $(settings.directionsto).attr('value');

				searchDirections(jmap, "from: " + from + " to: " + to, settings.directionspanel);	

				$(settings.directionsfrom).attr('value', to);

				$(settings.directionsto).attr('value', '');

				return false;

			});

			/* On document unload, clean unload Google API*/

			jQuery(document).unload(function(){ GUnload(); });

		});

		},

	/* myMap: function()

	 * Returns a map object from the API, so it's available to the user

	 * Example: $().myMap().setCenter(...) for Google;

	 * Example: $().myMap().drawZoomAndCenter(...) for Yahoo;

	 */

	myMap: function() {

		return this[0].jMap;	

	},

	/* addPoint: function()

	 * Returns a marker to be overlayed on the Google map

	 * Example: $().addPoint(...);

	 */

	addPoint: function(pointlat, pointlng, pointhtml, isdraggable, removable) {

		var jmap = this[0].jMap;

		// Yahoo Maps

		if (jmap._mapType) {			

			var marker = new YMarker(new YGeoPoint(pointlat, pointlng));	// Create the Yahoo marker type

			YEvent.Capture(marker, EventsList.MouseClick, function(){		// Add mouseclick to open HTML

				marker.openSmartWindow(pointhtml);

			});

			// Below code does not work as expected

			/*if (removable == true) {

				YEvent.Capture(marker, EventsList.MouseDoubleClick, function(){

					jmap.removeOverlay(marker);

				});

			}*/

			jmap.addOverlay(marker);	// Add marker to map

		}

		

		// Google Maps	

		if (jmap.i.Au) {

			var marker = new GMarker(new GLatLng(pointlat,pointlng), { draggable: isdraggable } );

			GEvent.addListener(marker, "click", function(){

				marker.openInfoWindowHtml(pointhtml);

			});

			if (removable == true) {

				GEvent.addListener(marker, "dblclick", function(){

					return jmap.removeOverlay(marker);

				});

			}

			return jmap.addOverlay(marker);

		}

	},

	/* addPoly: function(poly)

	 * Takes an array of GLatLng points, converts it to a vector Polyline to display on the map

	 * Example: $().addPoly(...);

	 */

	addPoly: function (poly, colour, width, alpha) {

		var jmap = this[0].jMap;

		// Yahoo Maps

		if (jmap._mapType) {

			return	jmap.addOverlay(poly, colour, width, alpha);

		}

		// Google Maps

		if (jmap.i.Au) {

			return jmap.addOverlay(poly);

		}

	},

	/* addRss: function()

	 * Takes a KML file and renders it to the map.

	 * Example: $().addPoint(...);

	 */

	addRss: function (rssfile) {

		var jmap = this[0].jMap;

		// Yahoo Maps

		if (jmap._mapType) {

			var geoXml = new YGeoRSS(rssfile);

			return jmap.addOverlay(geoXml);

		}

		// Google Maps

		if (jmap.i.Au) {

			var geoXml = new GGeoXml(rssfile);

			return jmap.addOverlay(geoXml);

		}

		

	}

});

})(jQuery);

Ajax link call to function with image as icon

afterburn (Andreas Kviby) — Mon, 23 Jul 2007 11:18:19 GMT

// description of your code here
This railscode makes an ajaxcall to a action inside the controller and uses a image icon as the clickable area to trigger it. I am using it all over the place when doing nice looking admininterfaces.



link_to_remote (image_tag("/images/createchild.jpeg", :size => "17x17", :border => 0), 

:url => {:action => 'acton_inside_controller', :id => record.id })