RoR: несколько вызовов remote_function на 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');")
                }}") %>

а также

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

Я в основном хочу добавить функцию снизу вверх. Любая помощь будет принята с благодарностью.

Было бы очень полезно, если бы вы могли вставить ошибки.

Sophie Alpert 20.01.2009 03:29
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
1
2 826
2

Ответы 2

В духе UJS (даже если вы не предоставляете здесь функции, отличные от javascript, вы можете извлечь выгоду из отделения javascript от erb), я бы использовал Низкий 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.

Один (быстрый) способ - попробовать инкапсулировать такие функции:

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

Возможно, вам нужно передать переменные в функции, но это должно сработать

Другие вопросы по теме