<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>drailing.net &#187; Ruby on Rails</title>
	<atom:link href="http://drailing.net/index.php/category/entwicklung/ruby-on-rails/feed/" rel="self" type="application/rss+xml" />
	<link>http://drailing.net</link>
	<description>informatik, entwicklung, codeschnipsel mit neuen technologien und viel spieltrieb</description>
	<lastBuildDate>Fri, 04 May 2012 16:43:57 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.2</generator>
		<item>
		<title>Rails3 und jQuery Implementierung</title>
		<link>http://drailing.net/index.php/2010/10/rails3-und-jquery-implementierung/</link>
		<comments>http://drailing.net/index.php/2010/10/rails3-und-jquery-implementierung/#comments</comments>
		<pubDate>Mon, 18 Oct 2010 12:37:40 +0000</pubDate>
		<dc:creator>dreiling</dc:creator>
				<category><![CDATA[Entwicklung]]></category>
		<category><![CDATA[JS / AJAX]]></category>
		<category><![CDATA[Ruby on Rails]]></category>

		<guid isPermaLink="false">http://www.drailing.net/?p=595</guid>
		<description><![CDATA[Hiho, da ich die letzten Tage unsere Bachelorprojekts auf die serverseitige Programmierung umgestiegen bin, hatte ich auch mit ein paar Neuheiten von Rails3 zu tun. Da ich mir selbst nen Wolf gegoogelt hab und vieles nicht finden konnte, schreibe ich hier einfach mal die kleinen Stolpersteine zusammen: 1. jQuery mit Rails installieren dazu gibts inzwischen [...]]]></description>
			<content:encoded><![CDATA[<p>Hiho,</p>
<p>da ich die letzten Tage unsere Bachelorprojekts auf die serverseitige Programmierung umgestiegen bin, hatte ich auch mit ein paar Neuheiten von Rails3 zu tun.</p>
<p>Da ich mir selbst nen Wolf gegoogelt hab und vieles nicht finden konnte, schreibe ich hier einfach mal die kleinen Stolpersteine zusammen:</p>
<p>1. jQuery mit Rails installieren<br />
dazu gibts inzwischen schon reichliche Tutorials. In Kurz: von <a href="http://github.com/rails/jquery-ujs">github</a> die rails.js runterladen und includen.<br />
Das Problem dabei war, dass Prototype (die JS Library die Rails normalerweise benutzt) und jQuery das Dollarzeichen als Selector benutzen. Das heisst einfach nur includen zerstört die restlichen Javascript calls von Rails &#8211; weiterlesen hätte geholfen, denn auf github wird die Installation gut erklärt.</p>
<p>2. respond_to mit jQuery AJAX<br />
da Prototype von Haus aus dabei ist, hätte die Implementierung in einem AJAX Update wohl so ausgesehen</p>

<div class="wp_syntax"><div class="code"><pre class="ruby" style="font-family:monospace;">respond_to <span style="color:#9966CC; font-weight:bold;">do</span> <span style="color:#006600; font-weight:bold;">|</span>format<span style="color:#006600; font-weight:bold;">|</span>
  <span style="color:#CC0066; font-weight:bold;">format</span>.<span style="color:#9900CC;">js</span> <span style="color:#006600; font-weight:bold;">&#123;</span>
    render <span style="color:#ff3333; font-weight:bold;">:update</span> <span style="color:#9966CC; font-weight:bold;">do</span> <span style="color:#006600; font-weight:bold;">|</span>page<span style="color:#006600; font-weight:bold;">|</span>
      page.<span style="color:#9900CC;">replace_html</span> <span style="color:#ff3333; font-weight:bold;">:divId</span>, <span style="color:#ff3333; font-weight:bold;">:partial</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#996600;">&quot;partialName&quot;</span>
    <span style="color:#9966CC; font-weight:bold;">end</span>
  <span style="color:#006600; font-weight:bold;">&#125;</span>
<span style="color:#9966CC; font-weight:bold;">end</span></pre></div></div>

<p>die Methoden wie replace_html gibt es nun in der Form in jQuery nicht mehr.<br />
Der Javascript Generator bietet uns allerdings eine andere schöne Form um nun jQuery funktionen aufzurufen. Das äquivalent zum obigen Code sieht dann so aus (in 2 Schritten da die jQuery Methode replaceWith() nicht funktioniert hatte)</p>

<div class="wp_syntax"><div class="code"><pre class="ruby" style="font-family:monospace;">render <span style="color:#ff3333; font-weight:bold;">:update</span> <span style="color:#9966CC; font-weight:bold;">do</span> <span style="color:#006600; font-weight:bold;">|</span>page<span style="color:#006600; font-weight:bold;">|</span>
  page<span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#996600;">&quot;#divId&quot;</span><span style="color:#006600; font-weight:bold;">&#93;</span>.<span style="color:#9900CC;">empty</span>
  page<span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#996600;">&quot;#divId&quot;</span><span style="color:#006600; font-weight:bold;">&#93;</span>.<span style="color:#9900CC;">append</span> render<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#ff3333; font-weight:bold;">:partial</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#996600;">&quot;partialName&quot;</span><span style="color:#006600; font-weight:bold;">&#41;</span>
<span style="color:#9966CC; font-weight:bold;">end</span></pre></div></div>

<p>3. Ein Partial aus verschiedenen Controllern aus updaten<br />
Die <a href="http://api.rubyonrails.org/classes/ActionView/Partials.html">Rails Doku</a> liefert uns unter dem Punkt &#8220;shared Partials&#8221; schon einen guten Ansatz. Zur Vollständigkeit hier das Codebeispiel von Oben erweitert</p>

<div class="wp_syntax"><div class="code"><pre class="ruby" style="font-family:monospace;">render <span style="color:#ff3333; font-weight:bold;">:update</span> <span style="color:#9966CC; font-weight:bold;">do</span> <span style="color:#006600; font-weight:bold;">|</span>page<span style="color:#006600; font-weight:bold;">|</span>
  page<span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#996600;">&quot;#divId&quot;</span><span style="color:#006600; font-weight:bold;">&#93;</span>.<span style="color:#9900CC;">empty</span>
  page<span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#996600;">&quot;#divId&quot;</span><span style="color:#006600; font-weight:bold;">&#93;</span>.<span style="color:#9900CC;">append</span> render<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#ff3333; font-weight:bold;">:partial</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#996600;">&quot;controllerName/partialName&quot;</span>, <span style="color:#ff3333; font-weight:bold;">:locals</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#006600; font-weight:bold;">&#123;</span>:objectName <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#0066ff; font-weight:bold;">@context</span>.<span style="color:#9900CC;">objectName</span> <span style="color:#006600; font-weight:bold;">&#125;</span><span style="color:#006600; font-weight:bold;">&#41;</span>
<span style="color:#9966CC; font-weight:bold;">end</span></pre></div></div>

<p>4. jQuery UI Icons in den Links<br />
nach vielen Versuchen die CSS Wrapper drumherum zu bauen, hat einfach das zufügen der jQuery Klassen selber gereicht. Ein &#8220;Delete&#8221; als Mülleimer würde dann entsprechend so aussehen:</p>

<div class="wp_syntax"><div class="code"><pre class="ruby" style="font-family:monospace;"><span style="color:#006600; font-weight:bold;">&lt;%</span>= link_to <span style="color:#996600;">'Destroy'</span>, restfull_route_path<span style="color:#006600; font-weight:bold;">&#40;</span>object_to_destroy<span style="color:#006600; font-weight:bold;">&#41;</span>, <span style="color:#ff3333; font-weight:bold;">:confirm</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#996600;">'Are you sure?'</span>, <span style="color:#ff3333; font-weight:bold;">:method</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#ff3333; font-weight:bold;">:delete</span>, :<span style="color:#9966CC; font-weight:bold;">class</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#996600;">'ui-state-default ui-corner-all ui-icon ui-icon-trash'</span>, <span style="color:#ff3333; font-weight:bold;">:title</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#996600;">&quot;Delete&quot;</span> <span style="color:#006600; font-weight:bold;">%&gt;</span></pre></div></div>

<p>Ich hoffe dem Ein oder Anderen kanns etwas Zeit sparen <img src='http://drailing.net/wp-includes/images/smilies/icon_smile.gif' alt=':-)' class='wp-smiley' /> </p>
]]></content:encoded>
			<wfw:commentRss>http://drailing.net/index.php/2010/10/rails3-und-jquery-implementierung/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

