2

ユーザーがボタンをクリックしたときに実行したい 2 つの異なるメソッドがあります。私はそれらを別々に動作させていますが、2つを結合しようとするとエラーが発生します。私が現在持っている2つは、

                <%= image_tag('go_button.png',
                :id => "search_go_button",
                :class => "search_go_button",
                :onmouseover => "this.style.cursor='pointer';",
                :onmouseout => "this.style.cursor='default';",
                :onclick => "if ($(\"input_search_field\").value!=\"\" && $(\"input_search_field\").value!=\"Search Places\") {#{
                remote_function(:update => "right_nav;",
                :url => { :action => :search_places },
                :with => "'search_text='+$('input_search_field').value+'&search_radius='+$('radius').innerHTML",
                :before => "Element.show('search_spinner'); Element.hide('search_go_button');",
                :success => "Element.hide('search_spinner'); Element.show('search_go_button');")
                }}") %>

と

    :onclick => "collapse_reset(this); new Ajax.Request('/places/search/#{cat.id}?search_radius='+$('radius').innerHTML,{asynchronous:true, evalScripts:true}); {#{remote_function(
              :update => "localads;", 
              :url => { :action => :get_ads, 
                        :id => cat.id }, 
              :before => "Element.show('ad_search_spinner'); Element.show('ad_search_spinner1'); Element.show('ad_search_spinner2'); Element.hide('ad1'); Element.hide('ad2'); Element.hide('ad3'); if($('ad1_slide_down_wrap').style.display != 'none'){$('ad1_slide_down_wrap').style.display = 'none';} if($('ad2_slide_down_wrap').style.display != 'none'){$('ad2_slide_down_wrap').style.display = 'none';} if($('ad3_slide_down_wrap').style.display != 'none'){$('ad3_slide_down_wrap').style.display = 'none';}", 
              :success => "Element.hide('ad_search_spinner'); Element.hide('ad_search_spinner1'); Element.hide('ad_search_spinner2'); Element.show('ad1'); Element.show('ad2'); Element.show('ad3');") }}", 
              :href => "/places/navigate/#{cat.id}" } %>

私は基本的に下のものから上のものに機能を追加したいと思っています。どんな助けでも大歓迎です。

4

2 に答える 2

1

UJS の精神 (JavaScript 以外の機能をここで提供していない場合でも、JavaScript を erb から分離することでメリットが得られます) で、私はLow Proを使用し、これらを動作として設定します。最初に lowpro.js ファイルをダウンロードして含める必要があります。

.erb では、次のようなイメージ タグを使用するだけです。

<%= image_tag('go_button.png', 
              :id => "search_go_button", 
              :class => "search_go_button") %>

インクルードされた .js ファイルには、次のようなものがあります。

Event.addBehavior({
  '#search_go_button:click' : function(e) {
    // stuff you want to have happen in response to a click
  },

  '#search_go_button:mouseover' : function(e) {
    // stuff you want to have happen in response to a mouseover
  },

  '#search_go_button:mouseout' : function(e) {
    // stuff you want to have happen in response to a mouseout
  }

});

これをすべての動作に使用すると、コードの操作と管理がはるかに簡単になります。

AJAX 呼び出しを整理するのに助けが必要な場合は、コメントを投稿してください。

于 2009-01-20T02:23:11.640 に答える
0

1 つの (簡単な) 方法は、次のように関数をカプセル化することです。

<script type="text/javascript">
function f1() {
if ($(\"input_search_field\").value!=\"\" && $(\"input_search_field\").value!=\"Search Places\") {#{
            <%= remote_function(:update => "right_nav;",
            :url => { :action => :search_places },
            :with => "'search_text='+$('input_search_field').value+'&search_radius='+$('radius').innerHTML",
            :before => "Element.show('search_spinner'); Element.hide('search_go_button');",
            :success => "Element.hide('search_spinner'); Element.show('search_go_button');")
            }} %>

}
function f2() {
    collapse_reset(this); new Ajax.Request('/places/search/#{cat.id}?search_radius='+$('radius').innerHTML,{asynchronous:true, evalScripts:true}); {#{ <%= remote_function(
          :update => "localads;", 
          :url => { :action => :get_ads, 
                    :id => cat.id }, 
          :before => "Element.show('ad_search_spinner'); Element.show('ad_search_spinner1'); Element.show('ad_search_spinner2'); Element.hide('ad1'); Element.hide('ad2'); Element.hide('ad3'); if($('ad1_slide_down_wrap').style.display != 'none'){$('ad1_slide_down_wrap').style.display = 'none';} if($('ad2_slide_down_wrap').style.display != 'none'){$('ad2_slide_down_wrap').style.display = 'none';} if($('ad3_slide_down_wrap').style.display != 'none'){$('ad3_slide_down_wrap').style.display = 'none';}", 
          :success => "Element.hide('ad_search_spinner'); Element.hide('ad_search_spinner1'); Element.hide('ad_search_spinner2'); Element.show('ad1'); Element.show('ad2'); Element.show('ad3');") }}", 
          :href => "/places/navigate/#{cat.id}" } %>
</script>

と：

 <%= image_tag('go_button.png',
            :id => "search_go_button",
            :class => "search_go_button",
            :onmouseover => "this.style.cursor='pointer';",
            :onmouseout => "this.style.cursor='default';",
            :onclick => "f1();f2();" %>

関数に変数を渡す必要があるかもしれませんが、これはうまくいくはずです

于 2009-02-23T09:52:15.677 に答える