Rails 3, используя UJS для тега html area - PullRequest
Новая
       3

Rails 3, используя UJS для тега html area

1 голос
/ 25 мая 2011

Когда пользователь нажимает на область изображения, я хочу инициировать и ajax-запрос к серверу. Есть ли простой способ реализовать это а-ля Rails 3 UJS? Что-то похожее на link_to ...,: remote => true?

Я попытался следующий код: 

#post_bar
  =image_tag 'post_bar_270x57.png', :usemap=>'#add_post'
  %map{:name=>"add_post"}
    %area{:shape=>"rect", :coords=>"40,4,86,50", :href=>new_message_path, :'data-remote'=>'true', :title=>"Message"}

но добавленные атрибуты удаленного доступа к данным не работают.

Спасибо за любую помощь.

Ответы [ 2 ]

0 голосов
/ 20 октября 2011

В геме jquery-rails (путь найден с помощью 'bundle show jquery-rails') есть файл javascript для jquery-ujs в vendor / assets / javascripts.

В строке 51 вы можете увидеть следующее: 

// Link elements bound by jquery-ujs   
linkClickSelector: 'a[data-confirm], a[data-method], a[data-remote], a[data-disable-with]'

Я обнаружил, что добавление тега области к этой строке позволяет использовать UJS так же, как и для обычных ссылок и т. Д.

В идеале вы могли бы сделать код немного лучше, добавив другую переменную, но, поскольку это всего лишь хак, я добавил его к существующим переменным. 

// Link elements bound by jquery-ujs   
linkClickSelector: 'a[data-confirm], a[data-method], a[data-remote], a[data-disable-with]', 'area[data-confirm]', 'area[data-method]', 'area[data-remote]',
0 голосов
/ 26 мая 2011

Попробовав несколько вещей, я пришел к выводу, что самый простой способ - поместить HTML-якорный элемент поверх png, с помощью которого я могу просто использовать помощник link_to с: remote => true. Мне потребовалось меньше 10 минут, чтобы все заработало.

Редактировать: вот код из моего файла haml (в процессе работы я удалил элемент карты) 

#post_bar
  =image_tag 'post_bar_270x57.png', :usemap=>'#add_post'
  %map{:name=>"add_post"}
    %area{:shape=>"rect", :coords=>"40,4,86,50", :href=>new_message_path, :title=>"Message"}
    %area{:shape=>"rect", :coords=>"100,4,146,50", :href=>new_message_path, :title=>"Reminder(140 chars)"}
  #post_message_link
    =link_to "", new_message_path, :remote=>true

и КСС 

#post_message_link a{
    position: absolute;
    top: 0px;
    left: 40px;
    width: 45px;
    height: 50px;
    display: block;
    z-index: 100;
}
...