1 00:00:00,230 --> 00:00:03,790 Hey guys in this video we're going to look at installing a G. 2 00:00:03,810 --> 00:00:11,310 Query you I library in our project now we would have looked at you get some package management in a 3 00:00:11,310 --> 00:00:12,400 previous video. 4 00:00:12,510 --> 00:00:18,630 And so in this video we're actually going to be looking at how we can go about using J. 5 00:00:18,640 --> 00:00:25,290 Query you I in our application as we will be using the autocomplete feature which means the text box 6 00:00:25,290 --> 00:00:29,600 when we start typing it will auto complete with all possible matches. 7 00:00:29,600 --> 00:00:31,270 You know assuming that's a Google search. 8 00:00:31,380 --> 00:00:31,850 All right. 9 00:00:31,950 --> 00:00:36,190 So firstly we'll take a look at J query UI documentation. 10 00:00:36,330 --> 00:00:39,450 Documentation is readily available on their Web site. 11 00:00:39,450 --> 00:00:42,800 You can go to Jake where you are a dot com or just simply google. 12 00:00:42,870 --> 00:00:43,900 Jake where you are. 13 00:00:44,190 --> 00:00:49,600 And from this website you will see that they give you a bunch of widgets and tools as we said we'll 14 00:00:49,620 --> 00:00:54,810 be using the autocomplete for the remainder of this activity. 15 00:00:54,810 --> 00:01:02,490 They do offer you download links and CBN links seeding meaning they host it and you just include that 16 00:01:02,550 --> 00:01:09,510 link in your code and that will take care of the referencing for you on top of all of that. 17 00:01:09,540 --> 00:01:14,800 What is fully required to use Jake or you eye is Jake or itself. 18 00:01:14,820 --> 00:01:21,060 So Jake queries a framework that is built on top of JavaScript and it's almost I mean still a staple 19 00:01:21,060 --> 00:01:24,020 in web development these days. 20 00:01:24,060 --> 00:01:29,850 And Jake where are you why is this building on top of that framework and giving us some widget so early 21 00:01:29,850 --> 00:01:30,600 in the lecture. 22 00:01:30,600 --> 00:01:36,240 I would have spoken about adding like a dead picker to the text box where daytime is required. 23 00:01:36,510 --> 00:01:37,490 Well Jake where you. 24 00:01:37,500 --> 00:01:38,390 Has a date picker. 25 00:01:38,430 --> 00:01:39,630 We can just take a quick look. 26 00:01:39,930 --> 00:01:45,840 That's all the date picker looks and how it works so they give us a sample page here and then we create 27 00:01:45,840 --> 00:01:51,240 the text box and we see that the date picker appears and it allows us to select the date there without 28 00:01:51,240 --> 00:01:56,010 having to worry about typing and I'm here tapping into disables input so that's one of the advantages 29 00:01:56,010 --> 00:02:02,850 to using like a date picker widget instead of allowing the user to type the date for themselves and 30 00:02:02,850 --> 00:02:07,770 then they also show you the source code that is required they give you an idea of what style sheet files 31 00:02:07,770 --> 00:02:11,630 are required as well as what script files need to be included. 32 00:02:11,880 --> 00:02:13,350 And please note you have J. 33 00:02:13,360 --> 00:02:20,610 Query being included as well as zinc or UI and these would be an example our C value would be an example 34 00:02:20,610 --> 00:02:22,480 of what a CBN is. 35 00:02:22,740 --> 00:02:28,500 It's just the link to the file being hosted somewhere on the internet so you don't have to have the 36 00:02:28,500 --> 00:02:34,230 physical file and notice also that order matters you have to make sure that you include J for it before 37 00:02:34,230 --> 00:02:36,000 you include Jake or UI. 38 00:02:36,240 --> 00:02:42,330 Otherwise you will run into some referencing problems and then having it reference both of these files 39 00:02:42,570 --> 00:02:48,800 then the actual javascript function or J query function that is employed to actually call the date because 40 00:02:48,820 --> 00:02:52,340 is the target the date element which is the inputs. 41 00:02:52,350 --> 00:02:53,490 So we have a PITA. 42 00:02:53,510 --> 00:02:54,140 Sure. 43 00:02:54,240 --> 00:02:56,460 And then we have an input which is of tactics. 44 00:02:56,550 --> 00:02:58,110 But the idea is the picker. 45 00:02:58,110 --> 00:03:04,890 So we see here that January's using the same kind of identifier assesses hashed out for ideas on a dot 46 00:03:04,890 --> 00:03:05,770 for a class. 47 00:03:05,820 --> 00:03:10,480 So a hostile bid picker target that element and call the date picker function. 48 00:03:10,620 --> 00:03:17,190 And that is really what invokes the calling of the calendar the way gets its style is by including the 49 00:03:17,370 --> 00:03:21,510 base the file for that J query UI. 50 00:03:22,050 --> 00:03:22,360 All right. 51 00:03:22,400 --> 00:03:26,630 Ah maybe you'd want to include the one specifically for the date picker. 52 00:03:26,670 --> 00:03:28,100 I know that you do that also. 53 00:03:28,110 --> 00:03:36,380 Anyhow we're looking at the autocomplete function which if you look at it's an option given at least 54 00:03:36,420 --> 00:03:43,290 are databank of all of these values you should be able to start typing and then it will make suggestions 55 00:03:43,290 --> 00:03:44,460 to see that. 56 00:03:44,460 --> 00:03:49,980 So if I type T is going to look for everything with a T and give me back what I possibly want and that's 57 00:03:49,980 --> 00:03:57,480 all we're going to follow whoever is adding students to courses are actually search for student names 58 00:03:57,510 --> 00:04:04,530 treat them and add them to the class in a nice fun dynamic and interactive now back in Visual Studio 59 00:04:04,530 --> 00:04:06,120 we need to include the J. 60 00:04:06,170 --> 00:04:09,290 Corey UI files in our project. 61 00:04:09,600 --> 00:04:15,970 Once again instincts would probably have you just go to the layout page and just include them here. 62 00:04:16,020 --> 00:04:17,070 Which would be fine. 63 00:04:17,070 --> 00:04:22,740 You could actually just copy that code with the seeds and links and just include them here on your little 64 00:04:22,740 --> 00:04:24,360 page and then you'd go on. 65 00:04:24,360 --> 00:04:30,000 But we want to highlight total package management helps us to keep in check with what is happening. 66 00:04:30,000 --> 00:04:34,050 Also we're going to look at what these lines of code mean. 67 00:04:34,050 --> 00:04:41,130 So notice that we don't have in our little page any link tags and we don't have any scripts tons but 68 00:04:41,130 --> 00:04:43,470 yet we know that we're referencing CFS. 69 00:04:43,740 --> 00:04:47,220 And we are referencing JavaScript files. 70 00:04:47,220 --> 00:04:56,230 So what is happening is that we got a file in our upstart folder called bundle on feed bundle config. 71 00:04:56,250 --> 00:05:04,890 Actually on teens references to our files for us and from here we can actually trump all of the files 72 00:05:04,980 --> 00:05:06,060 into one. 73 00:05:06,180 --> 00:05:08,070 What you would call function call. 74 00:05:08,290 --> 00:05:11,250 So take contents that CSF for instance. 75 00:05:11,250 --> 00:05:15,250 So this is the name of the bundle for our C assist files. 76 00:05:15,300 --> 00:05:21,060 And then once this one this call it's going to include the bootstrap but since this file as well as 77 00:05:21,060 --> 00:05:22,440 our set just as. 78 00:05:22,760 --> 00:05:27,390 And it will look on our layout page then we will see that we have only one call. 79 00:05:27,480 --> 00:05:30,160 So the bundle as specified by name. 80 00:05:30,240 --> 00:05:36,470 All right see if you take a keen look you notice that you have scripts that are under bundles do query 81 00:05:36,690 --> 00:05:41,880 and if we look in the bundle config you see that you have your bundles do query here referenced by name 82 00:05:42,150 --> 00:05:48,150 but it's only including something in the scripts folder and we can actually just investigate that so 83 00:05:48,150 --> 00:05:51,650 we go to the scripts and then is looking for G or dash. 84 00:05:51,660 --> 00:05:57,300 We do have files that have J court and dash and then is looking for some version which would be the 85 00:05:57,300 --> 00:06:00,900 version number which we have three point four point one. 86 00:06:00,990 --> 00:06:02,180 And then Jesus. 87 00:06:02,250 --> 00:06:07,630 So pretty much this gives us a nice dynamic way to always include whatever version J. 88 00:06:07,750 --> 00:06:14,340 Is here because if it was one point one point zero which I think it was before we updated it then it 89 00:06:14,340 --> 00:06:18,420 was being referenced and we didn't have to change anything now that we abated. 90 00:06:18,450 --> 00:06:22,890 We still don't have to change anything here because it will just look for what is the version that is 91 00:06:22,980 --> 00:06:24,720 available to me at the time. 92 00:06:24,720 --> 00:06:29,580 The next thing we want to do is use new get to include all of the J. 93 00:06:29,580 --> 00:06:30,310 Query you. 94 00:06:30,300 --> 00:06:35,010 I script files and style sheets in our project. 95 00:06:35,040 --> 00:06:38,210 So we'll just head on over to and you get the tab open. 96 00:06:38,220 --> 00:06:44,160 But if you don't then you can just right click the project and go to manage to get packages. 97 00:06:44,190 --> 00:06:49,520 This will then lead us to explore what is installed do updates or go to browse. 98 00:06:49,550 --> 00:06:55,260 So we're interested in browsing because we want something that we don't currently have in our solution. 99 00:06:55,260 --> 00:06:58,760 So I can of start typing and I think I've searched for it before so. 100 00:06:58,830 --> 00:07:04,380 Jake where are you I would come up and it would filter out of course and then we can always click on 101 00:07:04,380 --> 00:07:10,680 the search results and then just read the description also look at the author and make sure that it 102 00:07:10,680 --> 00:07:11,800 looks like it's legit. 103 00:07:11,800 --> 00:07:13,050 So just go ahead. 104 00:07:13,050 --> 00:07:18,970 I can change a version if I want but I'll leave it at the latest table and go ahead and click install. 105 00:07:19,050 --> 00:07:26,270 I mean it prompted I just think okay and allow it to run after a few moments and a successful operation 106 00:07:26,280 --> 00:07:32,600 you should see some new files appearing in your content folder as well as your scripts folder. 107 00:07:32,610 --> 00:07:38,280 Now we need to let our bundle config include these files up on render. 108 00:07:38,370 --> 00:07:45,330 We have bundled for CSC as far as already so I'm just going to add the census file that is associated 109 00:07:45,330 --> 00:07:46,700 with my auto complete. 110 00:07:46,820 --> 00:07:53,010 So I'm just going to include the auto complete census file in my bundle. 111 00:07:53,280 --> 00:08:03,160 So I'm just going to see comma and then went to added It's via path and the path to this is through 112 00:08:03,460 --> 00:08:12,540 content slash themes slash base slash auto complete thought CSX. 113 00:08:12,610 --> 00:08:14,920 So I left a slash there. 114 00:08:14,920 --> 00:08:21,940 So it's the till there which means whatever the File Path is before we get the contents then include 115 00:08:21,940 --> 00:08:30,550 that sure it's a dynamic way of creating a relative UI and then content slash and then from Clinton's 116 00:08:30,550 --> 00:08:36,910 folder you go to the themes folder and then from so they go to base and then inside the base for that 117 00:08:36,910 --> 00:08:45,580 we're looking for auto complete that CSX know what this will do is when it renders our labeled page 118 00:08:45,640 --> 00:08:54,340 and it renders this bundle contents CSX then it will load up all of these CSX files one time so we don't 119 00:08:54,340 --> 00:08:59,770 have to go and change it everywhere or anything that I would just change in one place and it just gets 120 00:08:59,770 --> 00:09:00,700 rendered. 121 00:09:00,700 --> 00:09:08,200 Another thing that we want to do is include our J query dash you I find nowhere already including J. 122 00:09:08,200 --> 00:09:13,400 Course I'm just going to copy this because it's would be a similar dynamic and I'm just into a that 123 00:09:13,590 --> 00:09:18,750 I know I'm going to create a new script to bundle and call it J query Dash I. 124 00:09:18,940 --> 00:09:26,940 And then what I will modify here is scripts slash J query dash UI because that's the new pattern of 125 00:09:26,950 --> 00:09:30,760 our files the query dash UI dash version. 126 00:09:30,790 --> 00:09:35,230 So it's j query dash UI dash and in whatever version no. 127 00:09:35,230 --> 00:09:41,330 So if we abate it's years down the line from one point one two to two point two. 128 00:09:41,360 --> 00:09:47,470 Then as long as the core dash UI part stays intact and it still edges file then this one the config 129 00:09:47,470 --> 00:09:50,270 we'll just pick up the latest version and just run with it. 130 00:09:50,290 --> 00:09:57,070 So that's the advantage of using this bundle config so we can always just save the changes there and 131 00:09:57,070 --> 00:10:03,340 then because we added a new config then we are going to have to let our label page know about it so 132 00:10:03,340 --> 00:10:12,180 we can just duplicate this g query bundle reference and we just add dash UI and remember order matters. 133 00:10:12,190 --> 00:10:16,450 So you should always come first and then the dependencies afterwards. 134 00:10:16,450 --> 00:10:22,030 So bear that in mind if you're going to be rearranging the order of these files. 135 00:10:22,120 --> 00:10:27,590 Now we can do the quick execution and see what our code looks like. 136 00:10:27,640 --> 00:10:34,720 Now we can quickly just execute our application and go to view page source which will then show us that 137 00:10:34,750 --> 00:10:36,490 everything should be rendered. 138 00:10:36,490 --> 00:10:41,280 So we have our script files here being included Jake Query and then Jake where are you. 139 00:10:41,320 --> 00:10:43,510 And then remember that bootstrap comes up the word. 140 00:10:43,510 --> 00:10:51,680 So everything is rendered as expected but we see an error here with or link files only bootstrap that 141 00:10:51,700 --> 00:10:56,090 CSX is being rendered and we should have three files. 142 00:10:56,170 --> 00:11:02,230 So I'm just jumping quickly back to our bundle config that US and I see here where the error is that 143 00:11:02,230 --> 00:11:05,090 we have we did not reference this properly. 144 00:11:05,100 --> 00:11:11,850 Sorry about that so we should have a comma after each block of string not a plus sign. 145 00:11:11,890 --> 00:11:20,260 So we have bootstrap that since comma site that since this comma and then our autocomplete systems file 146 00:11:20,260 --> 00:11:25,780 and if we have others that we just use a comma afterwards so we can just try again and see if we have 147 00:11:25,780 --> 00:11:26,830 any improvements. 148 00:11:26,860 --> 00:11:27,180 All right. 149 00:11:27,190 --> 00:11:32,380 So we can just check that again and there we go. 150 00:11:32,380 --> 00:11:33,840 So everything is being rendered. 151 00:11:33,840 --> 00:11:37,090 Currently we have our bootstrap and we have our sites that's yes. 152 00:11:37,230 --> 00:11:44,290 And then we have our auto complete Asus and so that is how you go both including a package at least 153 00:11:44,720 --> 00:11:51,850 inside package of JavaScript and see as this package and how you would allow its to be rendered in your 154 00:11:51,850 --> 00:11:54,040 little page in a dynamic fashion. 155 00:11:54,040 --> 00:12:00,280 Of course having included it in the layered page those files will be available for every other page 156 00:12:00,310 --> 00:12:06,250 including our enrollments page which is where our auto complete code will be executing.