IT WORLD: #jQuery

Showing posts with label #jQuery. Show all posts

Sunday, 22 August 2021

Reload/refresh web page after specific interval of time using jQuery

Hi guys, in this post we will see how to reload web page after specific interval of time using jQuery.

Let's see it practically. In our web application, we may have requirement of reloading web page after some interval of time.

Please follow below steps:-

1)Open your editor or any editor.

2)Add <html>,<head>,<script> and <body> tag.

3) Add jQuery CDN link in head section for jQuery reference file.

4) Add following jquery code in script section:-

$(document).ready(function(){

setInterval(function()

{

location.reload();

}, 3000);

});

</script>

In above code, we have added document ready function. In document ready function we have used setInterval() method which calls function after some specific interval of time. In our case 3000 millisecond means 3 second. Using this code ,function code will be executed after each 3 seconds and page will be refreshed. We are using location.reload(); to refresh web page.

Full Code:-

<html>

<head>

$(document).ready(function(){

setInterval(function()

{

location.reload();

}, 3000);

});

</script>

</head>

</html>

jQuery method chaining

jQuery method chaining is nothing but to make chain of methods i.e. in jquery we can call jquery methods one after the another. To chain method ,we can simply append the action to the previous action. When we chain jquery methods, the code becomes long. But jquery is not strict in syntax. We can format our code as per our choice.

In below code, we have form chain of fadeOut,fadeIn,slideUp and slideDown methods. So, action will be performed on <h1> elements as per provided sequence.

Please follow below steps:-

1)Open notepad or any editor.

2)Add html,head,script and body tag.

3)Add <h1> element and <button> control in body tag.

4)Add jquery CDN link as shown in below code.

5)So, on click of button control chain of methods will be called. Add following jquery code in script section.

$(document).ready(function(){

$('#btnClick').click(function(){

$('h1').fadeOut('2000').fadeIn('2000').slideUp('3000').slideDown('3000');

});

</script>

In below code, we have called chain of methods using statement:-

$('h1').fadeOut('2000').fadeIn('2000').slideUp('3000').slideDown('3000');

Full Code:-

<html>

<head>

$(document).ready(function(){

$('#btnClick').click(function(){

$('h1').fadeOut('2000').fadeIn('2000').slideUp('3000').slideDown('3000');

});

</script>

</head>

<body>

<h1>This is sample text.</h1><br/>

<button Id="btnClick">Submit</button>

</body>

</html>

Add, remove and toggle css class using jQuery

Hi guys , in this post we will see how to add, remove and toggle css class using jQuery. As we know that jquery is library of javascript which can be used to do css manipulation. Let's see it practically.

In this demo, we will add one paragraph element and three buttons one for adding css class, one for removing css class and one for toggling css class.

Please follow below steps:-

1)Open your editor such as visual studio/notepad.

2)Add html, head, script and body tag.

3) Add CDN links for jquery .js files in head tag:-

4) Add one paragraph element and three buttons one for adding css class, one for removing css class and one for toggling css class.

<p>This is sample text.</p><br/>

<button Id="btnAddClass">Add Css Class</button>

<button Id="btnRemoveClass">Remove Css Class</button>

<button Id="btnToggleClass">Toggle Css Class</button>

5) Add css class in style section.

.SampleText

{

color:red;

font-size:50px;

}

</style>

6) Add following jquery code in script section.

$(document).ready(function(){

$('#btnAddClass').click(function(){

$('p').addClass('SampleText');

});

$('#btnRemoveClass').click(function(){

$('p').removeClass('SampleText');

});

$('#btnToggleClass').click(function(){

$('p').toggleClass('SampleText');

});

</script>

In above code, add document ready function to check whether DOM is fully loaded. Then add three click event handler for three buttons. You can use following method to do css manipulation.

addClass() method is use to add css class to html elements.

removeClass() method is use to remove css class from html elements.

toggleClass() method is use to toggle css class to html elements.

Full Code:-

<html>

<head>

.SampleText

{

color:red;

font-size:50px;

}

</style>

$(document).ready(function(){

$('#btnAddClass').click(function(){

$('p').addClass('SampleText');

});

$('#btnRemoveClass').click(function(){

$('p').removeClass('SampleText');

});

$('#btnToggleClass').click(function(){

$('p').toggleClass('SampleText');

});

</script>

</head>

<body>

<p>This is sample text.</p><br/>

<button Id="btnAddClass">Add Css Class</button>

<button Id="btnRemoveClass">Remove Css Class</button>

<button Id="btnToggleClass">Toggle Css Class</button>

</body>

</html>

Saturday, 21 August 2021

jQuery Datepicker || How to show calendar control in textbox ?

Hi guys, in this blog post we will see how to show calendar control on focus of textbox. Calendar control is very useful when you want to take date as input from user in your application.So, let's see it practically.

Please follow below steps:-

1)Open your editor such as visual studio/notepad.

2)Add html, head, script and body tag.

3) Add CDN links for jquery .css and .js files in head tag:-

4) Add one textbox control in body tag.

Select Date:<input type="text" Id="btnDate">

5) Add document ready function in script tag.

6) Find the control by jquery id selector and call datepicker method as:-

$('#btnDate').datepicker();

7)Set properties

changeMonth: true, //to change month on calendar control

changeYear: true, // to change year on calendar control

dateFormat:"dd/mm/yy" //To set date format on date.

So, code will be like this:-

$(document).ready(function(){

$('#btnDate').datepicker({

changeMonth: true,

changeYear: true,

dateFormat:"dd/mm/yy"

});

</script>

Full Code:-

<html>

<head>

$(document).ready(function(){

$('#btnDate').datepicker({

changeMonth: true,

changeYear: true,

dateFormat:"dd/mm/yy"

});

</script>

</head>

<body>

Select Date:<input type="text" Id="btnDate">

</body>

</html>

Screenshot of code:-

jQuery create collapsible content panels || jQuery Accordion control

Hi guys, in this blog post we will see how to create collapsible content panels using jquery or how to use jquery accordion control. In application, if you want to show more information on screen in limited space then we can create collapsible content panels using jQuery. Let's see it practically.

We want to create collapsible content panels as shown in below image:-

Please follow below steps:-

1)Open your editor such as visual studio/notepad.

2)Add html, head, script and body tag.

<html>

<head>

</head>

<body>

</body>

</html>

3) Add CDN links for jquery .css and .js files in head tag:-

4) Add div in body tags as below:-

<div>This is first div.</div>

<div>

This is second div.</div>

<div>

This is third div.</div>

<div>

This is fourth div.</div>

</div>

5) Add following jquery code in script section.

$(document).ready(function(){

$('#AccordionDiv').accordion();

});

</script>

$('#AccordionDiv').accordion(); statement creates collapsible content where AccordionDiv is ID of div.

Full code for demo:-

<html>

<head>

$(document).ready(function(){

$('#AccordionDiv').accordion();

});

</script>

</head>

<body>

<div>This is first div.</div>

<div>

This is second div.</div>

<div>

This is third div.</div>

<div>

This is fourth div.</div>

</div>

</body>

</html>

Screenshot of code:-

Friday, 20 August 2021

jQuery each method -iterate over elements using jQuery

Hi guys, in this post we will see how to use jQuery each method. jQuery each method is used to iterate over elements. jQuery each method provides the function to run for matched element. Let's see it practically. We have following unordered list of names of countries.

USA
India
Australia
Belgium
Bulgaria

Now, we will use jQuery each method to iterate over above list of elements and show names in alert.

Please follow below steps:-

1)Open notepad.

2)Add html tags such as html,head,script,body tag.

3)Add jquery CDN link in head section as:-

4)Add unordered list of countries using <ul> tag.

<p>List of countries:-</p>

<ul>

<li>India</li>

<li>Australia</li>

<li>Belgium</li>

<li>Bulgaria</li>

</ul>

5) Add button control.

<button Id="btnSubmit">Submit</button>

6) Add jquery code in script tag:-

In code first we have added document ready function. Then add button click event handler. So, on click on button control we will iterate over <li> elements using each() method.

$(document).ready(function(){

$('#btnSubmit').click(function(){

$('li').each(function(){

alert($(this).text());

});

</script>

Full Code for Demo:-

<html>

<head>

$(document).ready(function(){

$('#btnSubmit').click(function(){

$('li').each(function(){

alert($(this).text());

});

</script>

</head>

<body>

<p>List of countries:-</p>

<ul>

<li>India</li>

<li>Australia</li>

<li>Belgium</li>

<li>Bulgaria</li>

</ul>

<button Id="btnSubmit">Submit</button>

</body>

</html>

Screenshot of code:-

Thursday, 19 August 2021

How to get selected text of dropdown list using jQuery ?

Hi guys , in this post we will see how to get selected text of dropdown list using jQuery. So,let's start

In this demo, we will add one dropdown list with some value and one button control. So, on click of button , our application will show dropdown list selected text in alert.

Please follow below steps:-

1)Open you editor.

2)Add basic html tags such as html, head, script, body tag.

3)Add CDN link for jquery.

4)Add dropdown list with some values and one button control.

<option value="0">-Select-</option>

<option value="2">Sam Sharma</option>

<option value="3">Yogesh Verma</option>

<option value="4">Sagar Shinde</option>

</select>

<button id="btnSave">Submit</button>

5)Add following jquery code in script section:-

// Add document ready function to check DOM is fully loaded.

$(document).ready(function(){

// Add button click event handler

$('#btnSave').click(function(){

if($('#ddlName').val()>0){

alert($('#ddlName option:selected').text());

}

});

</script>

So, to get selected text of dropdown list use :-

$('#ddlName option:selected').text()

Full Code:-

<html>

<head>

$(document).ready(function(){

$('#btnSave').click(function(){

if($('#ddlName').val()>0){

alert($('#ddlName option:selected').text());

}

});

</script>

</head>

<body>

<option value="0">-Select-</option>

<option value="2">Sam Sharma</option>

<option value="3">Yogesh Verma</option>

<option value="4">Sagar Shinde</option>

</select>

<button id="btnSave">Submit</button>

</body>

</html>

Screenshot of code:-

Wednesday, 18 August 2021

jQuery hide ,show and toggle div element on button click

Hi guys, in this post we will see how to hide ,show and toggle div element on button click using jquery.

Please follow below steps:-

1)Open your editor.

2)Add one div element and three buttons in web page one for hiding div, one for showing div and one for toggling div elements.

3)Add jquery CDN link in head section.

4)Add document ready function in script section. Then add click event handler for three buttons.

$('#btnHide').click(function(){

$('#div1').hide();

});

$('#btnShow').click(function(){

$('#div1').show();

});

$('#btnToggle').click(function(){

$('#div1').toggle();

});

i) To hide div element use $('#div1').hide();

ii) To show div element use $('#div1').show();

iii) To toggle div element use $('#div1').toggle();

Full Code:-

<html>

<head>

$(document).ready(function(){

$('#btnHide').click(function(){

$('#div1').hide();

});

$('#btnShow').click(function(){

$('#div1').show();

});

$('#btnToggle').click(function(){

$('#div1').toggle();

});

</script>

</head>

<body>

<div Id="div1"><h1>This is DIV element.</h1></div>

<button id="btnToggle">Toggle Div</button>

</body>

</html>

jQuery remove duplicates from array of strings

Hi guys, in this post we will see how to remove duplicates from array of strings using jquery.

we will use this jquery array in this example:-

var Friends=["SAM","john","sam","Maddy","David","JOHN"];

This array has duplicate element such "Sam","john". We want to remove this duplicate elements using jquery.

Let's start

1)Open your editor.

2) Add <html>,<head>,<script> and <body> tag. Then add jquery CDN link in head section as below:-

<html>

<head>

</script>

</head>

<body>

</body>

</html>

3)Add following code to find and remove duplicates from array of strings:-

// Add document ready function to check whether DOM is loaded.

$(document).ready(function(){

// Declare and initialize jquery array

var Friends=["SAM","john","sam","Maddy","David","JOHN"];

// logic to select only unique string elements

var UniqueArray=Friends.filter(function(element,index,self){

return index!=self.indexOf(element.toLowerCase());

});

// Show unique elements from array in alert

alert(UniqueArray);

});

</script>

Full code:-

<html>

<head>

$(document).ready(function(){

var Friends=["SAM","john","sam","Maddy","David","JOHN"];

var UniqueArray=Friends.filter(function(element,index,self){

return index!=self.indexOf(element.toLowerCase());

});

alert(UniqueArray);

});

</script>

</head>

<body>

</body>

</html>

Screenshot of code:-

jQuery remove duplicates from array of strings,#jQuery,

Output:-

Tuesday, 17 August 2021

Check textbox is empty in jQuery | jQuery empty textbox validation

In this tutorial, we will see how we can do jQuery empty textbox validation or how to check textbox is empty in jQuery.

In this example, we are going to add one textbox control and one button control. When textbox is empty and validate button is clicked,then application will show validation message.

Please follow below steps:-

1)Open notepad or any editor of your choice.

2)Add html, head, script and body tag.

<html>

<head>

</head>

<body>

</body>

</html>

3)Add jQuery CDN link in head section.

4) Add textbox control and button control in body tag as below:

Name:<input type="text" Id="txtName"/> <input type="button" value="Validate" Id="btnValidate">

5)Add jQuery code in script tag in head section.

$(document).ready(function(){ $('#btnValidate').click(function(){ if($('#txtName').val().trim().length==0) alert('Please enter your name.'); }); }); </script>

Full Code :-

<html>

<head>

$(document).ready(function(){

$('#btnValidate').click(function(){

if($('#txtName').val().trim().length==0)

alert('Please enter your name.');

});

</script>

</head>

<body>

Name:<input type="text" Id="txtName"/>

</body>

</html>

Screenshots:-

Check textbox is empty in jQuery | jQuery empty textbox validation

Output:-

Monday, 16 August 2021

jQuery tooltip

Please follow below steps:-

1)Open your editor such as visual studio/notepad.

2)Add html, head, script and body tag.

<html>

<head>

</head>

<body>

</body>

</html>

3) Add CDN links for jquery tooltip .css and .js files in head tag:-

4) Add textbox control in body tag as below:

5)Add jQuery code in script tag in head section to show tooltip for below textbox.

$(document).ready(function(){

$(document).tooltip();

});

</script>

Full Code for jQuery tooltip:-

<html> <head> <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(document).tooltip(); }); </script> </head> <body> <input type="text" title="Please enter your name."/> </body> </html>

Snapshot of code:-

Output:-

Sunday, 15 August 2021

Enable and disable button control using jquery

In this tutorial, we will see how to enable and disable button control using jquery.

Please follow below steps:-

1)Open notepad or any editor

2) Add three buttons.

1)btnSave:-Button to enable or disable

2)btnEnable:-Button to enable btnSave

3)btnDisable:-Button to disable btnSave

So, add html code as below and save code with name Demo.html.

jquery,Enable and disable button control using jquery

3)Add CDN link in head section.

4)Add script tag in head section to write jquery code.

5) Add following jquery code to enable and disable button.

Output in browser will look like :-

Full Code for this demo:-

$(document).ready(function(){

$('#btnEnable').click(function(){

$('#btnSave').removeAttr("disabled");

});

$('#btnDisable').click(function(){

$('#btnSave').attr("disabled","disabled");

});

</script></head>

<body>

</body>

</html>

MainMenu

Sunday, 22 August 2021

Saturday, 21 August 2021

Friday, 20 August 2021

Thursday, 19 August 2021

Wednesday, 18 August 2021

Tuesday, 17 August 2021

Monday, 16 August 2021

Sunday, 15 August 2021