CODEWITHSUNDEEP
jqueryjquery-mobile
Nav
Nav

Reputation: 10412

change event not firing on select menu in jquery mobile

Here is the code I have written so far

<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Registration</title>
    <meta name="HandheldFriendly" content="True"/>
    <meta name="apple-touch-fullscreen" content="YES" />
    <meta name="apple-touch-fullscreen" content="YES" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=yes" />

    <link rel="stylesheet" media="all" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "></script>
    <script type="text/javascript" src="my.js"></script>


    <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
    <script type="text/javascript">

    $('#mothertongue').live("change",function() {

   alert($(this).val());
});​

    </script>
</head>

<body>

    <div data-role="page" data-theme="e" id="page3" data-add-back-btn="true">
        <div  data-theme="e" data-role="header">
            <h3></h3>
            <a href="index.html" class="ui-btn-right" data-icon="home" data-iconpos="notext"
            data-direction="reverse">Home</a>
        </div>
        <div data-role="content" style="padding: 15px">




                <div data-role="fieldcontain">
                    <label for="selectmenu3">
                        <p>
                            Mother Tongue
                        </p> </label>
                    <select name="mothertongue" id="mothertongue" >
                        <option selected="selected" value="-1">Select Mother Tongue</option>
                        <option value="Telugu">Telugu</option>
                        <option value="Kannada">Kannada</option>
                        <option value="Hindi">Hindi</option>
                        <option value="Marathi">Marathi</option>
                        <option value="Tamil">Tamil</option>
                        <option value="Assamese">Assamese</option>
                        <option value="Bengali" >Bengali</option>
                        <option value="Coorgi">Coorgi</option>
                        <option value="Dogri">Dogri</option>
                        <option value="English">English</option>
                        <option value="Garhwali">Garhwali</option>
                        <option value="Gujarati">Gujarati</option>
                        <option value="Kashmiri">Kashmiri</option>
                        <option value="Konkani">Konkani</option>
                        <option value="Kumaoni">Kumaoni</option>
                        <option value="Kutchi">Kutchi</option>
                        <option value="Magahi">Maithili</option>
                        <option value="Malayalam">Malayalam</option>
                        <option value="Manipuri">Manipuri</option>
                        <option value="Marwari">Marwari</option>
                        <option value="Nepali">Nepali</option>
                        <option value="Oriya">Oriya</option>
                        <option value="Punjabi">Punjabi</option>
                        <option value="Sindhi">Sindhi</option>
                        <option value="Tulu">Tulu</option>
                        <option value="Urdu">Urdu</option>
                    </select>
                </div>

                </div>


        </div>
    </div>

</body>
</html>

the change event for mothertongue is not firing at all. I have written this script for the change event but it doesn't fire at all.

<script type="text/javascript">

    $('#mothertongue').live("change",function() {

   alert($(this).val());
});​

    </script>

I have been pulling my hair all night over this issue. Please help me or else I may become bald :(

Upvotes: 0

Views: 5679

Answers (4)

max kaplan
max kaplan

Reputation: 589

I had a similar issue. Your problem may be the '.on' scope - #mothertongu may be too specific. Try something like : 

$('#PageID').on("change", '#mothertongue', function() {
   ...
});​

Also keep in mind when submitting forms in jQuery Mobile the default is to ajax in the next page. So your code may be working on the last page but not the submission result. Take a look at http://jquerymobile.com/demos/1.2.1/docs/forms/forms-sample.html you might just need to add data-ajax="false" to the form tag.

Upvotes: 0

Nal
Nal

Reputation: 2771

Since you posted the link to your live page the error appears to be Uncaught SyntaxError: Unexpected token ILLEGAL in chrome developer console.

Open your html file in a hex editor. Or delete and recreate all the text after the alert() call and before the body tag.

Upvotes: 1

Felix
Felix

Reputation: 852

You might want to look at https://forum.jquery.com/topic/jquery-mobile-equivalent-of-document-ready

and use something like 

$('#PageId').live('pagecreate', function() {
    $('#element').click(function () {
        //Do something
    });
});

And important that code must be placed between you link to Jquery library and jquery.mobile, eg:

<script src="@Url.Content("~/Scripts/lib/jquery-1.7.1.js")" type="text/javascript"></script>
<script>MobileInit();</script>
<script src="@Url.Content("~/Scripts/lib/jquery.mobile-1.1.1.js")" type="text/javascript"></script>

Upvotes: 2

Josh Bedo
Josh Bedo

Reputation: 3462

Live is deprecated in jQuery 1.7 use "delegate" or even better "on"

http://api.jquery.com/live/

http://api.jquery.com/delegate/

http://api.jquery.com/on/

Upvotes: 0

Related Questions