How to get values of visualforce components using jQuery

Feedback
In this post we are going to talk about how we get or retrieve the values of the visualforce component using jQuery, if you remember we did something similar in our previous post where we retrieve the value of visualforce components using javaScript but this time it is going to little different from the earlier post.

What is jQuery ?
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
How to Use jQuery in Visualforce Page?

We need to include jQuery script in our visualforce page so please copy the below code and paste that code in your visualforce page after your apex:form tag.

	<apex:includeScript value="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"/>
How to use jQuery to get the value of input text-Example

Now after inserting the jQuery we need to write one small javaScript function which would work upon the ID of the visualforce components and this javaScript function would come under the script tag, if you remember I did similar thing in previous post but here i am only going to call javaScript function and the rest of the things will be done by jQuery itself, please take a look at the below code.

<apex:page showHeader="true" sidebar="true">
	<apex:form>
	<apex:includeScript value="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"/>
	<script type="text/javascript">

		j$ = jQuery.noConflict();

			function jqury(){
					var ss=j$('[id$=fn]').val();
					alert(ss);
					alert(j$('[id$=fn]').val());
					j$('[id$=fl]').val(j$('[id$=fn]').val());
					alert(j$('[id$=fl]').val());

				}
	</script>

		<apex:pageBlock title="jquery example">
			<apex:pageBlockSection>
				<apex:inputText title="First Name" label="First Name" id="fn"  onchange="jqury();">
				</apex:inputText>
				<apex:inputText title="Full Name" label="Full Name" id="fl">
				</apex:inputText>
			</apex:pageBlockSection>
		</apex:pageBlock>
	</apex:form>
</apex:page>

if you are using $ with visualforce jQuery then you need to add the following lines to avoid conflict between jQuery and visualforce.

j$ = jQuery.noConflict();

it will define j$ as a kind of variable which we use later to refer ID of visualforce pages, the javaScript code get executed whenever the value get changed in text box as you can see in the code at line 20, in my example i am fetching the value of the inputtext and copying it to other inputtext field to do this task i have written one jQuery function which is present in the code from 9th to 13th line , see below that code.

function jqury(){
		  var ss=j$('[id$=fn]').val();    
		  alert(ss);
		  alert(j$('[id$=fn]').val());
		  j$('[id$=fl]').val(j$('[id$=fn]').val());
		  alert(j$('[id$=fl]').val());

		}

This code take the value of the elements whose ID is mention in the javaScript after that it copied the value to other inputtext field and the code of it is at line 12 , you can also look at the demo of this code from the below button.

Difference between getting values using jQuery and javaScript
Now let’s see what is the difference between retrieving the values using jQuery and javaScript ,see the below table .
jQueryjavaScript
jQuery search in visualforce component for the particular IDWe need to pass either ID or have to use $component
Heavy in size because of jQuery plugin so page might take little more time to loadlighter in size
Decrease complexityComplexity increase with many ID
Less amount of work to doMore work to do

That all about this post I hope you like my post if you have any query related to this you can leave comment below in the comment section and also don’t forget to subscribe to my blog and social networking pages.

Sources and Citations
  • http://api.jquery.com/attribute-ends-with-selector/
  • https://developer.salesforce.com/page/Developing_Apps_with_jQuery
  • Related Articles :

    Speak Your Mind

    *