Ruby on Rails/HTML-таблица

Это отредактированный код: Я попробовал использовать 'name' вместо 'latitude', и я все равно получаю пустое окно предупреждения. Я также добавил <script src="//code.jquery.com/jquery-2.1.1.min.js"></script> внутри <head> в приложение/просмотров/макеты/application.html.erbRuby on Rails/HTML-таблица

<% @clients.each do |client| %> 
      <tr class = "client"> 
      <td class = "name"><%= client.name %></td> 
      <td class = "phone"><%= client.phone %></td> 
      <td class = "address"><%= client.address %></td> 
      <td class = "pay"><%= client.pay %></td> 
      <td class = "latitude"><%= client.latitude %></td> 
      <td class = "longitude"><%= client.longitude %></td> 
      <td><form><input class = "route" type="checkbox" name = "chkboxRoute"></form></td> 
      </tr> 
     <% end %> 

<script> 
$(function() { 
    $(".client input.route").bind("change", function(element) { 
    var clatitude = []; 
    var clongitude = []; 

    $(".client input.route:checked").each(function(element) { 
     element = $(element); 

     var clientLatitude = $(element).closest('.client').find('.latitude'); 
     clatitude.push(clientLatitude.text()); 

     var clientLongitude = $(element).closest('.client').find('.longitude'); 
     clongitude.push(clientLongitude.text()); 
    }); 
     window.alert(clatitude[0]); 
    }) 
}); 
</script>

источник

2014-11-16 José Cisneros

У вас нет ваших '' и '<% end %>' назад? У вас есть jQuery? –

Добавьте некоторые данные - ваш client.id, если ничего другого, к флажку в некотором роде. Это облегчит вам жизнь. Вы можете сделать это в несколько способов, но самый простой, как часть имени:

<input type="checkbox" name = "chkboxRoute_<%= client.id %>">

или

<input type="checkbox" name = "chkboxRoute[]" value="<%= client.id %>">

С HTML5 вы можете использовать отдельный «данных клиент-идентификатор» атрибута или что-то типа того.

Вы хотите получить доступ к данным из javascript или обратно в Rails? Если вы хотите, чтобы имя или что-то еще просто вставляло его в значение или другой атрибут флажка.

«" материал посторонний, особенно если вы хотите просто получить доступ к этому через javascript.

Редакция основана на комментарий ниже:

Я хотел бы изменить HTML, как, например:

<% @clients.each do |client| %> 
    <tr class="client"> 
    <td class="client_<%= client.id %> name"><%= client.name %></td> 
    <td class="client_<%= client.id %>phone"><%= client.phone %></td> 
    <td class="client_<%= client.id %>address"><%= client.address %></td> 
    <td class="client_<%= client.id %>pay"><%= client.pay %></td> 
    <td class="client_<%= client.id %>latitude"><%= client.latitude %></td> 
    <td class="client_<%= client.id %>longitude"><%= client.longitude %></td> 
    <td><input class="route" type="checkbox" name = "chkboxRoute" value="client_<%= client.id %>"></td> 
    </tr> 
<% end %>

Это делает ваш HTML немного более сложный, но Javascript затем упрощена. Опять же, код Криса прочен, поэтому я не буду копировать все, что он сделал.С HTML изменил константы выглядит вы можете непосредственно захватить значения, которые вы хотите:

$(".client input.route:checked").each(function(element) { 
    var client_class = $(element).val(); 
    var client_name = $("." + client_class + " name").text(); 
    var client_phone = $("." + client_class + " phone").text(); 
    ... 
});

Я так же, как делать что-то подобное, потому что не полагается так много на структуре HTML.

Теперь, если вы действительно хотите пойти на золото, вот так, как я хотел бы сделать это:

<% @clients.each do |client| %> 
    <tr class="client"> 
    <td><%= client.name %></td> 
    <td><%= client.phone %></td> 
    <td><%= client.address %></td> 
    <td><%= client.pay %></td> 
    <td><%= client.latitude %></td> 
    <td><%= client.longitude %></td> 
    <td><input class="route" type="checkbox" name = "chkboxRoute" value="<%= client.id %>"></td> 
    </tr> 
<% end %> 

<script type="text/javascript"> 
    var clients = []; 
    <% @clients.each do |client| %> 
    clients[<%= client.id %>] = { 
     name: "<%= j(client.name) %>", 
     phone: "<%= j(client.phone) %>", 
     .... 
    }; 
    <% end %> 
</script>

Затем, получая значения это просто вопрос об этом:

$(".client input.route:checked").each(function() { 
    var client_id = parseInt($(this).val()); 
    var client_name = clients[client_id].name; 
    var client_phone = clients[client_id].phone; 
    ... 
});

Вы может даже использовать json-шаблон, чтобы собрать массив, если хотите. Во всяком случае, это должно дать вам много возможностей пережевывать.

источник

2014-11-16 21:05:35

Спасибо за ответ. Я хотел бы получить доступ к данным из Javascript. Выполняя то, что вы говорите, как я могу получить доступ к каждой информации о клиентах (имя, телефон и т. Д.)? –

Если вы хотите получить доступ ко всему этому через javascript, то ответ Криса - это, вероятно, маршрут, на который вы хотите пойти - и его ответ правильный. Я собираюсь пересмотреть свой ответ, чтобы показать, как я это сделаю. –

Я пробовал ваш ответ, и он работает вплоть до var client_id = parseInt ($ (element) .val()); Я добавил window.alert (client_id), и я получаю NaN:/ –

Вы должны включить JQuery library, чтобы помочь вам. В файле layout.html.erb, добавьте это внутри <head>:

<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>

JQuery имеет функцию eq для выбора на основе индекса docs.

Существует также функция siblings, которая будет возвращать узлы, вложенные в пределах того же родительского элемента (в данном случае <tr>. Вы можете также включать в себя селектор для дальнейшего урезать результаты.

Пример выписки из приложения/просмотров/клиенты/index.erb:

<% @clients.each do |client| %> 
    <tr class="client"> 
    <td class="name"><%= client.name %></td> 
    <td class="phone"><%= client.phone %></td> 
    <td class="address"><%= client.address %></td> 
    <td class="pay"><%= client.pay %></td> 
    <td class="latitude"><%= client.latitude %></td> 
    <td class="longitude"><%= client.longitude %></td> 
    <td><form><input class="route" type="checkbox" name = "chkboxRoute"></form></td> 
    </tr> 
<% end %>

И Javascript:

// $ is the jQuery global object 
// Passing it a function will wait to execute that code until 
// the entire HTML document is ready 
$(function() { 
    // Select every input with the "route" class that is checked 
    var names = []; 
    $(".client input.route:checked").each(function(index, element) { 
    // Wrap the element in jQuery so we get access to all of its functions 
    element = $(element); 

    // Find the closest element with class "client", 
    // then find an element nested inside of it with class "name" 
    var clientName = $(element).closest('.client').find('.name'); 

    // Add the text from that element to the array 
    names.push(clientName.text()); 
    }); 

    // At this point, names will hold all of the names of the clients 
    // with a checked route input 
});

Обратите внимание, что это будет работать только на время загрузки страницы. Если вы хотите, чтобы работать в любое время один из этих изменений, вы можете связать функцию с change события:

$(function() { 
    $(".client input.route:checked").bind("change", function(element) { 
    var names = []; 
    $(".client input.route:checked").each(function(element) { 
     element = $(element); 
     var clientName = $(element).closest('.client').find('.name'); 
     names.push(clientName.text()); 
    }); 
    }) 
});

Это будет проходить через все из них каждый раз, когда флажок меняется. Не лучший результат, но вы должны начать.

источник

2014-11-16 07:46:28 Chris

Я бы, вероятно, использовал '$ (element) .closest ('. Client'). Find ('. Name')' немного меньше зависит от конкретного HTML, но это просто nitpicking. –

Это намного лучше! Я отредактирую ответ – Chris

Я думаю, мне удалось заставить его работать, но я хотел проверить его, добавив window.alert (имена [0]) сразу после первого}); , но все, что я получаю, - это пустое окно. Я очень ценю вашу помощь. –

Ruby on Rails/HTML-таблица

ответ

Смежные вопросы