Clever Geek Handbook

Grails、jQuery、AJAX：最初の紹介

GrailsにjQueryを追加する



実際、 Grailsの AJAXに問題はありません。コントローラーはJSONデータを安全に返すことができ、GSPページは対応する補助タグを使用できます 。



デフォルトでは、GrailsはPrototype JSと友達です。 ただし、 手首を軽く動かすだけでjQueryサポートプラグインをインストールできます。



grails install-plugin jquery







JQuery 1.4.xがインストールされます。 次に、jQueryをGrailsで「JavaScriptプロバイダー」として宣言する必要があります。 この場合、すべてのGrails組み込みタグはjQueryを介して機能し始めます。



grails-app / Config.groovyに次の行を追加します 。



grails.views.javascript.library="jquery"







アプリケーションのすべてのページでjQueryの使用を開始するため、HEADセクションのメインレイアウトファイル（デフォルトではgrails-app / views / layouts / main.gsp ）にすぐに追加します。 



 <html>
   <head>
     ...
     <g：javascriptライブラリ= "jquery" />
     ...
   </ head>
 ...
 </ html>


これで、アプリケーションの各ページにjQueryが自動的にロードされます。



jQueryで何かを書く



たとえば、次のようなデザインをすでに獲得しています。 



 <div id = "ajaxContainer">ここには何もありません。</ div>
 <g：remoteLink action = "show" id = "1" update = "ajaxContainer">更新！</ g：remoteLink>


ランタイムで見ると、 jQuery.ajax（）関数が暗黙的に使用されていることがわかります。



web-app / js / application.jsを見ると、生成されたAJAXインジケーターコード（ grails create-app



を使用）がPrototype用に記述されていることがわかります。 組み込みのディスプレイは（私の好みのために）曲がっているように見えますが、実際に動作させたい場合は、jQueryでコードを書き直すことができます。 



 jQuery（ドキュメント）.ready（関数（）{
   jQuery（ドキュメント）.ajaxStart（関数（）{
     $（ '＃スピナー'）。show（）;
   }）;
   jQuery（ドキュメント）.ajaxStop（function（）{
     $（ '＃スピナー'）。fadeOut（500）;
   }）;
 }）;


コントローラーの作成



最後に、AJAXの操作に適したコントローラーを作成します。 たとえば、コントローラーからJSON形式の乱数を返します。 



 def random = {
     def max = params.int（ 'max'）
     render（contentType： "text / json"）{
	 rnd =新しいランダム（）。nextInt（最大）
     }
 }


ここでは、Grails 1.2.xの新しい JSONビルダーバージョンを使用します。 コントローラーの結果は、フォーム{rnd: 34}



JavaScript配列になります。たとえば、次のように使用できます。 



 <p>
  乱数：
     <input type = "text" name = "rnd" id = "out" value = "" />
     <g：remoteLink action = "random" 
         params = "[max：100]" 
         onSuccess = "\ $（ '＃out'）。val（data.rnd）;">生成！</ g：remoteLink>
 </ p>


ここでは、JSONの結果（この場合はdata



変数に該当します）から、 rnd



値が選択され、テキストフィールドに入力されます。



括弧内で、あるJavaScriptプロバイダーを別のJavaScriptプロバイダーに置き換える「透明性」は、特定の時点までしか機能しないことに注意してください。 Grailsの組み込みAJAXタグを超えてjQuery関数の使用を開始すると（上記の例のように）、すぐに他のプロバイダーとの互換性が失われます。


More articles:


All Articles