Hey guys in this video we're going to look at installing a G.
Query you I library in our project now we would have looked at you get some package management in a
previous video.
And so in this video we're actually going to be looking at how we can go about using J.
Query you I in our application as we will be using the autocomplete feature which means the text box
when we start typing it will auto complete with all possible matches.
You know assuming that's a Google search.
All right.
So firstly we'll take a look at J query UI documentation.
Documentation is readily available on their Web site.
You can go to Jake where you are a dot com or just simply google.
Jake where you are.
And from this website you will see that they give you a bunch of widgets and tools as we said we'll
be using the autocomplete for the remainder of this activity.
They do offer you download links and CBN links seeding meaning they host it and you just include that
link in your code and that will take care of the referencing for you on top of all of that.
What is fully required to use Jake or you eye is Jake or itself.
So Jake queries a framework that is built on top of JavaScript and it's almost I mean still a staple
in web development these days.
And Jake where are you why is this building on top of that framework and giving us some widget so early
in the lecture.
I would have spoken about adding like a dead picker to the text box where daytime is required.
Well Jake where you.
Has a date picker.
We can just take a quick look.
That's all the date picker looks and how it works so they give us a sample page here and then we create
the text box and we see that the date picker appears and it allows us to select the date there without
having to worry about typing and I'm here tapping into disables input so that's one of the advantages
to using like a date picker widget instead of allowing the user to type the date for themselves and
then they also show you the source code that is required they give you an idea of what style sheet files
are required as well as what script files need to be included.
And please note you have J.
Query being included as well as zinc or UI and these would be an example our C value would be an example
of what a CBN is.
It's just the link to the file being hosted somewhere on the internet so you don't have to have the
physical file and notice also that order matters you have to make sure that you include J for it before
you include Jake or UI.
Otherwise you will run into some referencing problems and then having it reference both of these files
then the actual javascript function or J query function that is employed to actually call the date because
is the target the date element which is the inputs.
So we have a PITA.
Sure.
And then we have an input which is of tactics.
But the idea is the picker.
So we see here that January's using the same kind of identifier assesses hashed out for ideas on a dot
for a class.
So a hostile bid picker target that element and call the date picker function.
And that is really what invokes the calling of the calendar the way gets its style is by including the
base the file for that J query UI.
All right.
Ah maybe you'd want to include the one specifically for the date picker.
I know that you do that also.
Anyhow we're looking at the autocomplete function which if you look at it's an option given at least
are databank of all of these values you should be able to start typing and then it will make suggestions
to see that.
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
all we're going to follow whoever is adding students to courses are actually search for student names
treat them and add them to the class in a nice fun dynamic and interactive now back in Visual Studio
we need to include the J.
Corey UI files in our project.
Once again instincts would probably have you just go to the layout page and just include them here.
Which would be fine.
You could actually just copy that code with the seeds and links and just include them here on your little
page and then you'd go on.
But we want to highlight total package management helps us to keep in check with what is happening.
Also we're going to look at what these lines of code mean.
So notice that we don't have in our little page any link tags and we don't have any scripts tons but
yet we know that we're referencing CFS.
And we are referencing JavaScript files.
So what is happening is that we got a file in our upstart folder called bundle on feed bundle config.
Actually on teens references to our files for us and from here we can actually trump all of the files
into one.
What you would call function call.
So take contents that CSF for instance.
So this is the name of the bundle for our C assist files.
And then once this one this call it's going to include the bootstrap but since this file as well as
our set just as.
And it will look on our layout page then we will see that we have only one call.
So the bundle as specified by name.
All right see if you take a keen look you notice that you have scripts that are under bundles do query
and if we look in the bundle config you see that you have your bundles do query here referenced by name
but it's only including something in the scripts folder and we can actually just investigate that so
we go to the scripts and then is looking for G or dash.
We do have files that have J court and dash and then is looking for some version which would be the
version number which we have three point four point one.
And then Jesus.
So pretty much this gives us a nice dynamic way to always include whatever version J.
Is here because if it was one point one point zero which I think it was before we updated it then it
was being referenced and we didn't have to change anything now that we abated.
We still don't have to change anything here because it will just look for what is the version that is
available to me at the time.
The next thing we want to do is use new get to include all of the J.
Query you.
I script files and style sheets in our project.
So we'll just head on over to and you get the tab open.
But if you don't then you can just right click the project and go to manage to get packages.
This will then lead us to explore what is installed do updates or go to browse.
So we're interested in browsing because we want something that we don't currently have in our solution.
So I can of start typing and I think I've searched for it before so.
Jake where are you I would come up and it would filter out of course and then we can always click on
the search results and then just read the description also look at the author and make sure that it
looks like it's legit.
So just go ahead.
I can change a version if I want but I'll leave it at the latest table and go ahead and click install.
I mean it prompted I just think okay and allow it to run after a few moments and a successful operation
you should see some new files appearing in your content folder as well as your scripts folder.
Now we need to let our bundle config include these files up on render.
We have bundled for CSC as far as already so I'm just going to add the census file that is associated
with my auto complete.
So I'm just going to include the auto complete census file in my bundle.
So I'm just going to see comma and then went to added It's via path and the path to this is through
content slash themes slash base slash auto complete thought CSX.
So I left a slash there.
So it's the till there which means whatever the File Path is before we get the contents then include
that sure it's a dynamic way of creating a relative UI and then content slash and then from Clinton's
folder you go to the themes folder and then from so they go to base and then inside the base for that
we're looking for auto complete that CSX know what this will do is when it renders our labeled page
and it renders this bundle contents CSX then it will load up all of these CSX files one time so we don't
have to go and change it everywhere or anything that I would just change in one place and it just gets
rendered.
Another thing that we want to do is include our J query dash you I find nowhere already including J.
Course I'm just going to copy this because it's would be a similar dynamic and I'm just into a that
I know I'm going to create a new script to bundle and call it J query Dash I.
And then what I will modify here is scripts slash J query dash UI because that's the new pattern of
our files the query dash UI dash version.
So it's j query dash UI dash and in whatever version no.
So if we abate it's years down the line from one point one two to two point two.
Then as long as the core dash UI part stays intact and it still edges file then this one the config
we'll just pick up the latest version and just run with it.
So that's the advantage of using this bundle config so we can always just save the changes there and
then because we added a new config then we are going to have to let our label page know about it so
we can just duplicate this g query bundle reference and we just add dash UI and remember order matters.
So you should always come first and then the dependencies afterwards.
So bear that in mind if you're going to be rearranging the order of these files.
Now we can do the quick execution and see what our code looks like.
Now we can quickly just execute our application and go to view page source which will then show us that
everything should be rendered.
So we have our script files here being included Jake Query and then Jake where are you.
And then remember that bootstrap comes up the word.
So everything is rendered as expected but we see an error here with or link files only bootstrap that
CSX is being rendered and we should have three files.
So I'm just jumping quickly back to our bundle config that US and I see here where the error is that
we have we did not reference this properly.
Sorry about that so we should have a comma after each block of string not a plus sign.
So we have bootstrap that since comma site that since this comma and then our autocomplete systems file
and if we have others that we just use a comma afterwards so we can just try again and see if we have
any improvements.
All right.
So we can just check that again and there we go.
So everything is being rendered.
Currently we have our bootstrap and we have our sites that's yes.
And then we have our auto complete Asus and so that is how you go both including a package at least
inside package of JavaScript and see as this package and how you would allow its to be rendered in your
little page in a dynamic fashion.
Of course having included it in the layered page those files will be available for every other page
including our enrollments page which is where our auto complete code will be executing.