Rails: javascript addEventListener не находит элемент в динамической форме
Я пытаюсь реализовать динамическую форму в приложении Rails через AJAX, и сделал несколько руководств, но безуспешно.
Часть Javascript из моего js файла приложения в папке с ресурсами
var land = document.getElementById("cart_land_id");
land.addEventListener("change", function(){
Rails.ajax({
url: "/carts?land = " + land.value,
type: "GET"
})
})
Для этой формы в представлении:
<%= form_for @cart, :url => {:action => "show_shipping"}, :html => {:method => "get"} do |f| %>
<%= f.select :land_id, options_for_select(@lands.map { |l| [l.name.titleize, l.id] }, {:id => 'lands_select', :prompt => "select a country"}) %><br>
<%= f.select :shippingservice_id, options_for_select([]) %><br>
<%= f.submit "Calculate shipping" %>
<% end %>
Что отображается как:
<form accept-charset = "UTF-8" action = "/carts/show_shipping/4" class = "edit_cart" id = "edit_cart_4" method = "get">
<div style = "margin:0;padding:0;display:inline"><input name = "utf8" type = "hidden" value = "✓" /></div>
<select id = "cart_land_id" name = "cart[land_id]"><option value = "1">Afghanistan</option>
...
<select id = "cart_shippingservice_id" name = "cart[shippingservice_id]"></select><br>
<input name = "commit" type = "submit" value = "Calculate shipping" />
</form>
производит
TypeError: null is not an object (evaluating 'land.addEventListener')
В моем каталоге Javascript есть jQuery.
Почему это происходит и как я могу это решить?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Поскольку у вас есть jQuery, вы можете использовать следующий код
$("body").on("change", "#cart_land_id", function(event){
var landValue = $("#cart_land_id").val();
$.ajax({
url: "/carts?land = " + landValue,
type: "GET",
success: function(response) {
// handle response here
}
})
})
Добавить слушателей можно двумя способами:
Добавьте слушателя к определенному элементу:
document.getElementById("...").addEventListener(type, fn)илиdocument.querySelector("...").addEventListener(type, fn).Добавьте слушателя к родительскому элементу с сопоставлением:
document.addEventListener(type, fn), гдеfnпроверяет, существует лиevent.target.closest('#cart_land_id'), прежде чем продолжить.
В вашем случае наличие jquery помогает, потому что есть сокращение:
$(document).on("change", "#cart_land_id", function(event){
Rails.ajax({
url: "/carts?land = " + event.target.value,
type: "GET"
})
})
Слушатель настроен в документе (нет другого элемента, доступного для таргетинга), но слушателю отправляются только события, которые восходят из #cart_land_id.
ОБНОВИТЬ
Чтобы сделать запрос ajax, вы определенно можете использовать fetch, который изначально поддерживается в большинстве браузеров и может быть полифиллен.
fetch("/carts?land = " + event.target.value).
then(function(resp) { return resp.text(); }).
then(function(text) {
// do something with text
// for instance replace the content of some element:
someEl.innerHTML = text;
});
См. https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch для получения дополнительной информации.
наконец-то что-то происходит. По крайней мере, on_change распознается, но я получаю Can't find variable: Rails.
Когда я использую $.ajax, он начинает искать, и я получаю Failed to load resource: the server responded with a status of 404 (Not Found). Если у меня есть конкретное действие в контроллере моей тележки, я полагаю, мне придется написать url: "/carts/land = " + event.target.value,?
Спасибо за быстрый ответ. Я буду работать над этим и дам отзыв. Знаете ли вы, является ли Rails.ajax ошибкой и сразу должен быть $.ajax? Если это правда, не могли бы вы исправить это в своем ответе, чтобы мы вели чистый трек? Или поправьте меня, если я что-то не так сделал.
Извините, я никогда не использую библиотеки, когда доступны нативные альтернативы. Нет необходимости в jQuery или других вещах, связанных с ajax, fetch - это то, что вам нужно.
Я тоже предпочитаю родной. Но каким-то образом я получаю Can't find variable: Rails при использовании Rails.ajax в приложении Rails 3 с использованием jquery-rails 3.1.5 + jQuery 2.2.4 в конвейере ресурсов. Я постараюсь сначала проделать всю работу, а затем выяснить, почему не работает Rails.ajax.
Часть ajax теперь работает. Он регистрирует событие при изменении и загружает ресурс с сервера, что является моей следующей задачей. Считаю этот вопрос закрытым и буду благодарен за ваш ответ. Большое спасибо!
Rails.ajax не родной, это какая-то js-библиотека. Вместо этого используйте собственный fetch.
Спасибо за ваш ответ. Я все еще получаю:
null is not an object (evaluating '$("body").on')