Jquery Methods Part3

Hello guys, welcome to our jQuery series. In the last segment we had started how to do Get and Set content and attribute.

Today we will learn how to set the content with the help of the text method.

So, now you can see an example given here.

Now by clicking on the 'p' button we can change the text of the 'p' tag.

Firstly, we will open sublime text. Here the Get program is already written so now I will copy and paste and I will remove whatever is irrelevant and I will only keep what is relevant like 'text to set content'…

We will remove this portion so that the document and button click event remains here….

So let us see.. here we have the “p” tag.

Now you all can see here that I have prepared the structure of the program. I have set up the title, added the  library. I have also added some styling so that everything remains in the center. And here 'to… set content using text'. Here we do not have anything to do with html so we will remove it.

Now when I click on this button then the “P” which is now empty, will be set up with some content.

So now I will save it as ‘text_set’….And now I will run this program…. Ok…

Now if we click there will be no performance.

And now if I go back to the program and write 'dollar' P dot text. Now let's say in text I add.. 'Welcome….to Learnvern' …..and save it. Now when I reload, as soon as I click here, we can see the text we wrote appearing.

This means that “p” has gotten a text ‘welcome to learnvern.’

Now let us learn a very simple program, what we do now is that we take a text ‘p’ tag and we update it.

Let us say that I already keep ‘welcome’ in the “p” tag ..after that I click on the ‘click’ button.

Now our ‘welcome’ has been replaced by ‘Welcome to learnvern’.

So here basically we learned two things. First, if our content is empty then also a new content will come when we  use the text method, and if there is already a content present there then it will get replaced.

Just like what is happening in HTML, the same is happening here with the help of text method; if our content exists then it will get replaced and if there is no content then it will be placed by new content.

So, basically, in the front end, if the user is browsing something nothing new happens for him or her no matter what is used - html or text.

In both cases the content is updated for the user but internally but what happens inside the browser, inside the DOM is; when we talk about DOM then there are two different things happening in it. And if we use HTML then the complete markup changes but if we use text then there is no change in the HTML only the content changes.

So here there are two views . If we have a look at this technically then we’ll observe that using HTML means using and updating it completely including all the tags and markups. Whereas using text means only changing the content.

So,  if you are a programmer then you should know what you are using.

For the user both the things are the same but the programmer should know what is the actual use of whichever method he is using.

Text Or HTML whichever method you choose you should be clear in which scenario you should use which method.

So here we learned how to set the content by text method.

Now let us see this slide, here we are done with the text method.

Now let us start with the Val Method. That is V A L..

Val Method has two uses and those two uses are:

1. “It is used to get the current value of the first element in the set of matched elements”.

(04/45)

This means as many matching elements will be there, we will be returned the value of the very first matching element.

This means that if in my program I have kept more than one “p” tag or “h1” tag then the Val method will only return the value of the very first matching element.

 For example, if I have kept five Ps, the value of all five will not return, only the first value will be returned.

2.” It is used to set the value of every matched element.”

This means that if we do Get then only one value will be returned but if we do Set, then the value to all the values will be Set.

For Example, like we learned HTML there were two variations - Get and Set. And we learned the text method. There were also two methods: Get and Set.

So now in the Val method there are also two variations - Val stands for value - in which we can either do Get or Set. That means we can do both the tasks.

If we do Get then only one value will be returned. But if we do Set then the values of all the elements will get updated.

Now firstly we will see the example to get content. If I want to get value then how can I do that?

'A simple method to get values from a drop-down' means if I generate any dropdown value then if I want to turn that dropdown to Get, I can use the Val method. If i have added a p tag then i can use it to get the value of p tag as well, But normally there are values of input field, dropdown, form, they all have a value. If we get value related to forms that is meaningful also.

Now we'll perform a program where we’ll see how to process dropdowns with get. 

Here I open the sublime text and I'll paste this complete program and I will remove all the irrelevant text. Example..val.. to ..get..content...

I will keep this button, to… get dropdown values using(7 seconds pause,typing)  Values

Now I'll save it. (6 seconds pause,typing)

So, this is our program 'to get a dropdown using the Val method'.

Here nothing will happen if I click on the ‘click’ button. Then I'll get back to the program, now I'll need the values of the dropdown values. That means I'll have to make a dropdown.

Let us say that on this button I make a dropdown. By selecting a dropdown, I will give an id to it.

So now the name of the dropdown is fruit. Now I'll add …..four options and I have added four fruit names to them: apple, banana, mango and papaya respectively.

Now if I save it, you can see that a dropdown appeared. This is my dropdown in which there are four values: apple,banana,mango,papaya.

Now I want that if I click on the ‘click’ button then all the dropdown values should appear somewhere below.

I want values in the dropdown And for that we’ll get back to the program and I can show it in the alert or I can make a new “p” tag here.

So, I'll make it in a p tag so that all the value remains there. So, here dollar… P… dot .Now there is no value in the p tag so we can give the value by HTMLl or text.

Now in this HTML all those values will come which are my dropdown values. So, that is dollar…what is my id? fruit… dot… Val. Clear..

Here I have done two things at once, if I want to, I can remove this portion from here and I can copy it in this manner also.

What will happen through this is that all fruit names I have will come to this dropdown value.

Now I am updating it in the HTML “p” tag.

We can also write in this way but if you want to reduce the line of code then you can also copy this whole line and add it to HTML.

You can use whichever way you want both are applicable.

So now if I save it and run it then you can observe that whenever I am selecting any value and clicking on the ‘click’ button then that value is appearing below.

So whichever selected value I have in the dropdown is updated each time and appears below.

And if you want to write it in a better way than you can go to the “p”… tag and write ‘Selected value of Fruit… dropdown is:’ then you can insert a span.

(11/51)

And here our values should be visible, so here I will replace “p” by “span”.

Now I will save …and run it. Now you can observe the change below.

What we did here was that whichever value is we select will appear in the dropdown with the sentence: ‘Selected value of the dropdown is’

Whenever you develop a website, the website is static, this is not used much but if you develop a web application then it will be very much useful for you because in a web application you will have to show or pass number of inputs filled and number of dropdown values.

This concept will be very helpful for you if you want to develop a web application.

Here we have learnt how to get value with the help of the val method. On moving further, now we will see 'Val's example to set content'.

Earlier as we had selected the dropdown value just like that in this new program, we are going to see that with the help of Val method how to set a value in the input filled.

If you have an empty input field then and if you are told to set a value on the click button, today we are going to learn this with the help of an example. “To set input field method using val”

Now I'll copy and paste this complete program…. “Val to Set method”.

We don’t need this portion so I'll remove it, we will keep the button click portion, we also don’t need the drop down so we will remove it and we will do the necessary changes.

So here we will click a button and we will put an input field here and the value of that input field should be set.

We don’t need a ‘name’ but we will keep the ‘ID'. “Update input”…

Basically, we've kept one input in the complete program so we don't require ID but if you want, because there is a possibility that in one web page only one input won't be there when you'll work on an actual web page or web application. There would be more than one input field in those. So, in that case it's better that you keep your ID or name.

So now when I click this button a jQuery will be raised and the value of my input field will be updated and a value will be presented.

So now I'll save this program as ‘val_set’ …and run it. Now you can observe that we have the input field but nothing will happen if I click the button but when I add jQuery code, then in this input field some values will be set. So lets say when this button will be clicked then ..dollar..input what you do here? You can.take a normal input, normally there are types of input like text, telephone, number, password etcetera.

So now we will check if it works with a single input or not. So now let me write the input dot value of Val as… 'Learnvern…. is …Awesome'….

I'll save and reload the program.

So now when I click on the button then we can see what we edited.

Now let’s do one more thing, let’s take two input fields(7 seconds pause,typing) type equal to number and password..save…reload..

Now let us save it and here we have three input fields.

Here when I click again, we can see that other than numbers we have data in both the other input columns.

Now as the other column is password it will be visible to us by dots.

As soon as i click on this ideally there should be data in all three columns , so lets say i clicked over here as you can see except in number in other two columns my data has come “learnvern is awesome” here also it is written “learnvern is awesome”but it will not be visible to me as it is password but content is there means “learnvern is awesome” is written there, so here now I have a problem here as to where ‘Learnvern is awesome’ is to be shown. I will get back to the program and we will add in the input, option after colon is type, . Input.. and here the next column indicates type so if i write text here and i reload it ..as you can see now it is not printing in password , it is only printing in where the input type is text If I remove the text ….and replace it with a password then we can see that only the password is visible to us.

(18/27)

So today we learned something extra.

Here in, an input if you want to set a value then either you can add an ID here as I did or you can directly put the type of input.hope you are getting me..

So currently I'll put input under text to see where it is visible. “Learnvern is awesome”

So here today we learned two things:

Firstly, how to access input in various types and.

Here we also learned how to Get and Set content with the help of Val method. Here we have learnt how to get content with the get method, we got values from dropdowns and we also learnt how to set the content. We have set the value for three inputs.

Here our segment comes to an end. We learned to Get and Set not only content but also attributes.

So, if we want to Get and Set content, we have three methods:

 First is HTML, second is Text and third one is Val.

If we are working with input to get and set then we will use the Val method to Get and Set the content. If we want to show or get. And if we are working with elements like “p” “h1” etc. Then we will use either HTML or text methods.

So, you will have to take the decision of which method to use depending upon the scenario. If you want to update HTML with markup then use HTML, if you want to update just the content, then use text.

We all together learned three methods: HTML, text and Get.

Now I request you all to practically practice all the methods from both the previous and today’s video.

And if you find any difficulty in any of our segments in understanding or you are facing any problem in practicing then reach out to us on forum dot Learn Vern dot com. We will reward all your problems with the solutions there.(discussion to be added)

In the next segment we will learn how to add elements using jQuery.

Today we learned about how to update contents so in the next segment we will learn how to add complete elements using jQuery.

Till then thank you guys.