jQuery .change() not working at all

Question

I have a menu that is to change the content of the page based on what was selected. Here is the site (it has no functionality yet, and I need to get this working, before I can even touch anything else: http://dinotator.biokdd.org/ResearchProject/tableViewer.php )

I have tried what this person did: HTML <select> JQuery .change not working , and have even tried to move the function to all different places in the document (except the head of the document, because it is not an option, because of the fact that the head is in a file called header.php, which gets included to every file that needs it). My menu's HTML looks like this:

<select id="menu">
    <option name="blankOption"></option>
    <option name="annotation_flags" id="annotation_flags" value="Annotation Flags">Annotation Flags</option>
    <option name="character_trait_annotations" id="character_trait_annotations" value="Character Trait Annotations">Character Trait Annotations</option>
    <option name="character_traits" id="character_traits" value="Character Traits">Character Traits</option>
    <option name="characters" id="characters" value="Characters">Characters</option>
    <option name="franchises" id="franchises" value="Franchises">Franchises</option>
    <option name="users" id="users" value="Users">Users</option>
</select>

I try to, in various places (first, right after it, and now, right before it), use this:

$('#menu').change(
    function()
    {
        var tableTitle = $(this).val();
        alert(tableTitle);
    }
);

For some reason, whenever I click any of the options, nothing happens!! What am I doing wrong!?!?

Did you try using it in the document ready handler? In other words in `$(function() {//..your code here.});` — Matt Burland, Jan 22 '15 at 03:02
You have a syntax error in your script.. see the console `Uncaught SyntaxError: Unexpected token }` — Arun P Johny, Jan 22 '15 at 03:03
For some reason, I can't figure out why that's even popping up; /* I am on Notepad++, and the syntax highlighter cannot find it */ — Mike Warren, Jan 22 '15 at 03:05
your width option value is the problem... it should be `width: '100%'`, not `width: 100%` — Arun P Johny, Jan 22 '15 at 03:07
you also have to move the `$('#menu').change(..)` to dom ready handler... — Arun P Johny, Jan 22 '15 at 03:08
so the end script should look something like http://jsfiddle.net/arunpjohny/a9dsp3nL/1/ — Arun P Johny, Jan 22 '15 at 03:09
Oh wow... I can't believe I forgot that!! Care to make that an answer? — Mike Warren, Jan 22 '15 at 03:09

score 1 · Accepted Answer · answered Jan 22 '15 at 03:16

There are 2 problems in the page(since you have not provided the complete script in the question the problem is not visible here).

there is a syntactical error in the script section, which is visible in the browser console as Uncaught SyntaxError: Unexpected token } which is causing any of the script under the script tag not to get executed. The problem is the value for width option in layout plugin, the value 100% is a string value so it should be `width: '100%'
Your change event registration is not in a dom ready handler, and the script is executed before the element is added to the dom.

So

$(document).ready(function () {
    $('#tableEditButtons').layout({
        type: 'grid',
        rows: 1,
        minimumHeight: $('button').height(),
        vgap: 0,
        hgap: 100,
        width: '100%'
    });
    $('#menu').change(function () {
        var tableTitle = $(this).val();
        alert(tableTitle);
    });
});

jQuery .change() not working at all

1 Answers1