Javascript RoR:single:onclick上的多个远程函数调用

当用户单击按钮时，我有两种不同的方法要执行。我让它们分开工作，但当我尝试将两者结合起来时，会出现错误。我现在有两个

                <%= 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');")
                }}") %>

我基本上想把函数从底部添加到顶部。任何帮助都将不胜感激。

本着UJS的精神（即使您在这里没有提供非javascript功能，您也可以从将javascript与erb分离中获益），我将使用并将其设置为行为。您需要先下载并包含lowpro.js文件

在.erb中，您只需使用图像标签：

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

我们在所有行为中都使用它，它使代码更易于使用和管理

如果需要帮助整理AJAX调用，请发表评论。

一种（快速）方法是尝试封装如下函数：

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
  }

});

<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>

函数f1（）{
如果（$（\“输入\搜索\字段\”）。值！=\“\”&&&$（\“输入\搜索\字段\”）。值！=“搜索位置\”）{#{
“右导航；”，
：url=>{:action=>:search_places}，
：with=>“'search\u text='+$（'input\u search\u field'）。value+'&search\u radius='+$（'radius'）。innerHTML”，
：before=>“Element.show（'search_spinner'）；Element.hide（'search_go_button'）；”，
：success=>“Element.hide（'search_spinner'）；Element.show（'search_go_按钮'）；）
}} %>
}
函数f2（）{
collapse_reset（this）；new Ajax.Request（'/places/search/{cat.id}？search_radius='+$（'radius'）.innerHTML，{asynchronous:true，evalscript:true}）；{{{localads，
：url=>{:action=>：获取广告，
：id=>cat.id}，
：before=>“Element.show（'ad_search_spinner'）；Element.show（'ad_search_spinner1'）；Element.show（'ad_search_spinner2'）；Element.hide（'ad2'）；Element.hide（'ad3'）；if（$（'ad1_slide down_wrap'）.style.display！='none'）{$（'ad1_slide down_-wrap'）。style.display='none'））如果（$（$（'ad2_-slide-down-down_-wrap'）-wrap'）-style.display！）none！），则无）{$（'ad2_slide_down_wrap'）.style.display='none'；}如果（$（'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（'ad2'）；Element.show（'ad3'）；”）}”，
：href=>“/places/navigate/#{cat.id}”}%>

以及：

“搜索按钮”，
：class=>“搜索按钮”，
：onmouseover=>“this.style.cursor='pointer'；",
：onmouseout=>“this.style.cursor='default'；",
：onclick=>“f1（）；f2（）；" %>

---

也许您需要将变量传递到函数中，但这应该可以工作

如果您可以粘贴错误，这将非常有帮助。

<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();" %>