I am gettin error $ is not defined in my jsp file while running on firefox

Question

I placed my jquery script in proper order still don't know why i am getting this error. I am running this on mozilla firefox.

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>

<%@ taglib prefix="s" uri="/struts-tags" %>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<%@ taglib prefix="sjg" uri="/struts-jquery-grid-tags"%>    

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" href="/OptionsTrader2/src/main/webapp/css/styles/style.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="/OptionsTrader2/src/main/webapp/css/styles/font-awesome.css">
<link rel="stylesheet" href="/OptionsTrader2/src/main/webapp/css/styles/bootstrap-multiselect.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="/OptionsTrader2/src/main/webapp/css/scripts/jquery-ui.js"></script>
<script type="text/javascript" src="/OptionsTrader2/src/main/webapp/css/scripts/bootstrap.js"></script>
<script type="text/javascript" src="/OptionsTrader2/src/main/webapp/css/scripts/bootstrap-multiselect.js"></script>
<script type="text/javascript" src="/OptionsTrader2/src/main/webapp/css/scripts/validator.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<title>FnOGuru</title>
<script type="text/javascript">
    $(document).ready(function () {
        $('#exhibitor_form').validator();
        $('#vendor_form').validator();
        //multiselect dropdown
        $('#adminList').multiselect({
            includeSelectAllOption: true,
            selectAllText: "Select All",
              selectAllValue: 'multiselect-all',
              maxHeight: 200
        });

        $('.btnFormCancel').on('click', function () {
            $('.form-popup').css('top', '-300%');
            $('.exhibitor-popup').css('top', '-300%');
            $('.vendor-popup').css('top', '-300%');
            $('.modal-overlay').hide();
        });

        $('#btnNewExhibitor').on('click',function(){
            $('.exhibitor-popup').css('top', '5%');
            $('.modal-overlay').show();
        });
    });
</script>
</head>

I searched on web and it states:

You must place jquery script on top as it load jquery first in order to identify $.

But here I have already placed in order.

Which line specifically throws this error? BTW, why are you loading boostrapjs twice? And is it only specific to Firefox??? Maybe if error is throwing from ready handler, something in your code is using jQuery noConflict, then so try: `$(document).ready(function ($) { ... });` — A. Wolff, Aug 24 '16 at 09:35
@A.Wolff It throws error on this line " $(document).ready(function () { " and yes its happening in Firefox — Muddassir Rahman, Aug 24 '16 at 09:40
`yes its happening in Firefox` **Only** on Firefox??? That was the question. And what if you replace `$(document).ready(function () {` with `jQuery(document).ready(function () {` ??? And are you sure it is this line and not `$('#exhibitor_form').validator();` ? — A. Wolff, Aug 24 '16 at 09:41
@A.Wolff if tried with jQuery(document).ready(function()){ then "jQuery is not defined" error is coming . I am running on firefox not tried in other browsers — Muddassir Rahman, Aug 24 '16 at 09:45
You have to learn how to debug javascript. Check network tab, etc... http://stackoverflow.com/questions/988363/how-can-i-debug-my-javascript-code Obviously for some reason, you are loading jQuery — A. Wolff, Aug 24 '16 at 09:48

score 0 · Accepted Answer · answered Aug 24 '16 at 09:59

use <body onload="myFunction()"> you can't use $(document).ready because you cannot guarantee that jquery has loaded by the time the script is executed.

even though you have included the script at the top, browsers will load scripts asynchronously.

so you must use the html body onload method to ensure that all elements (scripts included) have finished loading.

I am gettin error $ is not defined in my jsp file while running on firefox

1 Answers1