jQuery not defined when using IIFE
Question
I'm trying to implement a Livesearch list onto a page where it takes an array and its objects and by using the search box, will filter matches and only show match of the search term,
The issue I'm having is that when looping through the array items using a forEach and trying to append the results to the DOM,
jQuery is Not defined
Essentially the code should grab the array, loop through the array, grab the building names and append each to the .list DIV as h4 items.
//testItemsArray //array will contain objects used in the mockup for a livesearch function on the map pages. var testItemsArray = [{ id: '1', building: 'building1' }, { id: '2', building: 'building2' }, { id: '3', building: 'building3' }, { id: '4', building: 'building4' }, { id: '5', building: 'building5' }]; (function($) { $search = $('#searchbox'); // This is used for the filter input field var buildingList = '', buildingh4 = ''; testItemsArray.forEach(function(buildings) { buildingh4 = "<h4>" + buildings.building + "</h4>"; buildingList += buildingh4 $('.list').html(buildingList); }); }(jQuery));
<html lang="en"> <head> <script src="./js/list.js"></script> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/main.css"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Main Page</title> </head> <body> <div class="container" id="search"> <header class="header"> <h1>University Of Lincoln Map Search</h1> <h2></h2> </header> <div class="logo"> <p>This page is to be used for the locating of campus buildings and rooms</p> </div> <div class="info"> <div class="list"> ********THIS IS WHERE I WANT ALL ITEMS TO DISPLAY** ***** </div> </div> <div class="key"> <div class="key-bg"></div> <div class="key-text"><span><h2>Find the room you are looking for</h2></span></div> <hr> </div> <div class="footer"> <p>map</p> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </body> </html>
3 answers
solution1
1 2019-02-26 12:12:39
You should place this line of code before closing the body tag. Instead of using IIFE, use document.ready
In your code, you put your list.js before jquery.min.js , that's why you get jQuery is undefined error.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="./js/list.js"></script>
</body>
var testItemsArray = [{ id: '1', building: 'building1' }, { id: '2', building: 'building2' }, { id: '3', building: 'building3' }, { id: '4', building: 'building4' }, { id: '5', building: 'building5' }]; $(document).ready(function() { $search = $('#searchbox'); // This is used for the filter input field var buildingList = '', buildingh4 = ''; testItemsArray.forEach(function(buildings) { buildingh4 = "<h4>" + buildings.building + "</h4>"; buildingList += buildingh4 $('.list').html(buildingList); }); });
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/main.css"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Main Page</title> </head> <body> <div class="container" id="search"> <header class="header"> <h1>University Of Lincoln Map Search</h1> <h2></h2> </header> <div class="logo"> <p>This page is to be used for the locating of campus buildings and rooms</p> </div> <div class="info"> <div class="list"> ********THIS IS WHERE I WANT ALL ITEMS TO DISPLAY** ***** </div> </div> <div class="key"> <div class="key-bg"></div> <div class="key-text"><span><h2>Find the room you are looking for</h2></span></div> <hr> </div> <div class="footer"> <p>map</p> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="./js/list.js"></script> </body> </html>
solution2
0 2019-02-26 12:16:52
Put your js reference that is <!-- listJS cdn link--> <script src="./js/list.js"></script>
After Jquery library reference that is below <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
solution3
-1 2019-02-26 12:12:51
You should have a reference to your Jquery library.
// IIFE - Immediately Invoked Function Expression
(function($, window, document) {
// The $ is now locally scoped
// The rest of your code goes here!
}(window.jQuery, window, document));
// The global jQuery object is passed as a parameter
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.