javascript onchange function not working

Question

I have a dropdown in haml view:

= collection_select(:vehicle_part, :service, Inventory.all, :id, :title, {}, {id: 'line_item', class: 'line_item', :onchange => "{my_function(this);}"})

It produces following HTML (for those who dont know haml)

<select class="line_item" id="line_item" name="vehicle_part[service]" onchange="{my_function(this);}">
  <option value="1">first line</option>
  <option value="2">second line</option>
</select>

And my javascript looks like:

try 1

$(document).ready(function () {
    $( ".line_item" ).change(function() {
        console.log( "Handler for .change() called." );
    });
});

try 2

$(document).ready(function () {
    my_function(value) {
        console.log( "Handler for .change() called." );
    });
});

I don't know why this is not working as everything seems fine.

Any help what i am doing wrong?

Forgot to mention: Does this work with bootstrap-modal? I am working in bootstrap-modal

Solution All I was doing wrong was not refreshing my page, how fool of me just thought that by loading modal will refresh the page.

The second "try" is not valid JavaScript. The first one seems ok, but why do you have an inline event handler in that case? Since you don't have a function with that name, it will just throw an error. — Felix Kling
– Felix Kling, Commented Jul 14, 2014 at 14:17
The first one should work. The second one though will never work since it's in a closure and your onchange attribute is not valid javascript — Karl-André Gagnon
– Karl-André Gagnon, Commented Jul 14, 2014 at 14:17

EduardoFernandes · Accepted Answer · 2014-07-14 14:55:08Z

1

Here is a code that works:

html:

<select class="line_item" id="line_item" name="vehicle_part"><option value="1">first line</option><option value="2">second line</option></select>

javascript:

$(document).ready(function () {
    $( ".line_item" ).change(function() {
        alert("abc");
    });
});

Note that I have changed the console.log for a alert, it it is easier to debug.

Here is the JSFiddle link.

Things that needed to be changed:

Remove the onchange event from the HTML code
Added the class line_item in the HTML code.
Added an alert in the javascript in order to make the code easier to debug in JSFiddle.

edited Jul 14, 2014 at 14:55

answered Jul 14, 2014 at 14:27

EduardoFernandes

3,5191 gold badge15 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Felix Kling Over a year ago

The select already has a class line_item. You have now two class attributes in your example. Also, using an alert is hardly necessary. Just open the console if you want to see the output of console.log.

EduardoFernandes Over a year ago

Indeed, this is a mistake. Let me correct it. However, the code is working :).

ndugger · Accepted Answer · 2014-07-14 14:23:56Z

0

There's a good bit wrong with your code, and some things that can change, simply because they can.

For one, your current function (in try 2) does not require a document.ready function, but it relies on inline JS (which is a no-no). Then, you also forget the function keyword within your document.ready

Let's refactor your first attempt...

First, let's toss the onchange attribute, and do it with only JS. Either keep it in a document.ready (which I wouldn't do), or simply load the JS in after the page (usually right before </body>).

<select id="line_item">...</select>

...

$("#line_item").on("change", function() {
    // ... do stuff here ...
});

Simple stuff.

answered Jul 14, 2014 at 14:23

ndugger

7,5715 gold badges35 silver badges42 bronze badges

Comments

Mritunjay · Accepted Answer · 2014-07-14 14:24:25Z

0

For first try just remove your onchange attribute from select. Because first you told look for a my_function which is nowhere.

For second try use just write just this much javascript

function() {
    console.log( "Handler for .change() called." );
}

edited Jul 14, 2014 at 14:24

answered Jul 14, 2014 at 14:18

Mritunjay

25.9k7 gold badges57 silver badges71 bronze badges

Comments

Steven · Accepted Answer · 2014-07-14 14:27:56Z

0

Don't now any "HAML", but it looks like your "haml" produces an event handler that is not correct.

Is it possible Try to remove

, :onchange => "{my_function(this);}"

from your HAML code, so that the resulting HTML looks like

<select class="line_item" id="line_item" name="vehicle_part[service]"><option value="1">first line</option>
                <option value="2">second line</option></select>

And stick with your first try? Keep this code:

$(document).ready(function () {
    $(".line_item").change(function() {
       console.log( "Handler for .change() called." );
    });
});

This jsFiddle shows what you need

edited Jul 14, 2014 at 14:27

answered Jul 14, 2014 at 14:19

Steven

1,49518 silver badges24 bronze badges

1 Comment

Abdul Baig Over a year ago

yes. just will remove the onchange method. nothing else will happen to it

PeterKA · Accepted Answer · 2014-07-14 14:39:31Z

0

1. Solution to Current Issue: (with try 2 ... but no DOM ready)

Could you change:

onchange="{my_function(this);}"

To:

onchange="my_function(this);"

And then remove the DOM ready from around the function --- otherwise your inline code (global scope) does not see the function which is in the DOM ready scope.

function my_function(value) {
    console.log( "Handler for .change() called." );
}

You're missing the function keyword on the function definiton,

However, inline JS is highly discouraged. (try 1 ... delegated)

2. HERE's the recommended way to do it:

$(function() {
   $(document).on('change', '.line_item', function() {
        console.log( 'change event fired' );
    });
});

UPDATE: The change suggested in the onchange attribute, #1 above, does not make a difference as the code should still fire on change with the braces. The scope of the function should be global.

edited Jul 14, 2014 at 14:39

answered Jul 14, 2014 at 14:18

PeterKA

24.7k5 gold badges28 silver badges52 bronze badges

5 Comments

Felix Kling Over a year ago

Why should changing the value make a difference?

PeterKA Over a year ago

What value is changed? I don't get.

PeterKA Over a year ago

You're right, it should not make a difference ... I'll update my answer.

Abdul Baig Over a year ago

but can you tell me how to get the selected value?

PeterKA Over a year ago

That would be this.value or $(this).val() inside the on('change', ... callback.

Collectives™ on Stack Overflow

javascript onchange function not working

5 Answers 5

2 Comments

Comments

Comments

1 Comment

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related