0

Hello to the Community,

I want a change in an HTML select tag to trigger a Javascript event in my Spree application.

The view contains a collection_select instruction resulting in the following HTML:

<select id="dummy_id" name="something">
    <option value="">Please select</option>
    <option value="1">Case1</option>
    <option value="2">Case3</option>
    <option value="3">Case3</option>
</select>

I wrote the following Javascript function:

$('#dummy_id').change(function () {
    alert("It works");
});

I checked in this jsfiddle that the code indeed works.

When I run the application, the event is not triggered. I googled a lot to try and find documentation regarding a possible registration.

Question: does the event need some sort of a registration? If yes, where to place it and what should this code look like ? If not, any clue as to why it works fine in jsfiddle but not in RAILS_ENV="development" ?

Kind regards !

4

3 回答 3

1

您需要将您的 jQuery 代码包装到一个 ondocumentready ( $(document).ready()) 函数中，因为 jQuery 的选择器仅在 DOM 被构造并且可以被遍历时才起作用，否则类似的东西$('#select-product-in-persomodel_form')会导致一个空数组。

在 jsFiddle 中，您可以指定何时执行 JS 代码（左侧菜单中的下拉菜单）。您似乎选择了“ No wrap - in <body>”，这将导致您将代码作为脚本元素添加到正文的最后，而不是包含在任何 $(document).ready() 或 $(window).load() 中

在这个地方调用展开的选择器绝不是安全的——此时 DOM 还没有准备好——但可能取决于你的浏览器和运气。如果您将其更改为“ No wrap - in <head>”，您的代码将完全停止工作，因为在解析<head>您的元素时，您的元素肯定不会被定义。

至于你的另一个问题：你可以有多个$(document).ready()不用担心，它们将按照它们的调用顺序执行。另请参见此处。

于 2013-11-04T06:52:04.443 回答
1

你可以有多个，但这并不总是最整洁的事情。尽量不要过度使用它们，因为它会严重影响可读性。除此之外，这是完全合法的。见下文：

就像我们可以拥有：

$(document).ready(function() {
    alert('first one!');
});

$(document).ready(function() {
    alert('second one!');
});

$(document).ready(function() {
    alert('third one!');
});

但我们应该这样做：

 $(document).ready(function() {
        alert('first one!');
        alert('second one!');
        alert('third one!');
    });

但是当我们有理由需要再次使用它时，我们肯定可以使用它。但是，我认为您无法知道它们将以哪种方式执行。

作为参考，你应该通过这个...多个 $(document).ready()

于 2013-11-02T04:58:54.650 回答
0

我找到了解决方案：JS代码需要从：

$('#dummy_id').change(function () {
    alert("It works");
});

至：

$(document).ready(function() {
  $('#select-product-in-persomodel_form').change(function() {
    alert("Updating the variants selector for Anacondano");
    $("#persomodels-variant-select").html(" <%= escape_javascript(render 'variant_select') %>");
  });
});

注意：我假设一个 Rails 应用程序可以包含多个$(document).ready条目。这是我仍然需要检查的一点。欢迎输入。

于 2013-11-02T01:25:08.553 回答