CODEWITHSUNDEEP
javascriptjqueryhtmldrop-down-menu
RMN
RMN

Reputation: 752

Using Javascript to load dropdown values

I have following code where I am trying to load values into a dropdown from an array(from file page students.js):

student.js

var STU_NAME = 0;
var STU_ID = 1;
var STU_AGE = 2;
var STUDENTS = [
    ["Apple", 1, 15],
    ["Billy", 2, 16]
    ["Cathy", 3, 14]        
        ];

Functions.js

var jQ = $.noConflict();

function populateStudents() {
    jQ('#students').empty();
    jQ('#students').append(jQ("<option></option>").attr("value", "").text("-- Please Select --"));
    for (var _i = 0; _i < students.length; _i++) {
        jQ('#students').append(jQ("<option></option>").attr("value", _i).text(STUDENTS[_i][STU_NAME]));
    }
}

jQ(document).ready(function () {
    populateStudents();
});

mypage.aspx

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">

    </style>
</head>
<body>
    <div id="model">
        <form>
        <div>
            <div id="StudentLabel">
                Student:
            </div>
            <select id="students" name="students">
            </select>
        </div>      
        <script src="../Scripts/Functions.js" type="text/javascript"></script>
        <script src="../Scripts/student.js" type="text/javascript"></script>
        </form>
    </div>
</body>
</html>

I get an error "Microsoft JScript runtime error: '$' is undefined" at line 1 of Functions.js

Can anyone help me on what I would be missing to make it working here.

Upvotes: 0

Views: 849

Answers (2)

Adil
Adil

Reputation: 148110

You need to include jquery library, you can download from here Add the script tag in head of page or before you use jquery.

<head runat="server">
    <title></title>
    <style type="text/css">

    </style>
   <script language="javascript" type="text/javascript" src="JS/jquery-1.7.2.js"></script>
    <script src="../Scripts/Functions.js" type="text/javascript"></script>
    <script src="../Scripts/student.js" type="text/javascript"></script>
</head>

Upvotes: 1

Sibu
Sibu

Reputation: 4617

You have forgotten to add the jquery library

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script src="../Scripts/Functions.js" type="text/javascript"></script>
<script src="../Scripts/student.js" type="text/javascript"></script>

It is highly recommended to use CDN version of jquery to improve pagespeed,check this link

Upvotes: 2

Related Questions