javascript - 目录 : Multiple remote_function calls on single :onclick

Question

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

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

我基本上想将功能从底部添加到顶部。任何帮助将不胜感激。

Answer 1

本着 UJS 的精神(即使你在这里没有提供非 javascript 功能，你也可以从 erb 中分离出 javascript)，我会使用 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 调用，请发表评论。