Category Archives: Jquery Blog

jQuery Ui Date Picker

jQuery Ui Date Picker : jQuery Date picker is used to tie the date with the form input field. jQuery Ui date picker provides full featured date picker. You can embed this with form field and configure as per your requirement. We are going to explain the implementation of Date picker in jQuery.

You need to include jQuery and jQuery ui to enable the autocomplete functionality.

Jquery Ui Date Picker with syntax

Example







Add Date:

Demo »

Here is output of the above example-

jQuery Ui Date Picker Example Demo

Google map address autocomplete demo

Google map address autocomplete demo

For Addess Autocomplete You need google map api first add the googleapis in the head of your page.


Create Form In which you want to add the address auto complete.

Create initialize function add it in the footer of the page.


The initialize function would initialize the address autocomplete in the id “location” and their lat and lon would be initialized in the field id – locationLat and locationLon.

DemoDownload

Jquery ui autocomplete demo

Jquery ui autocomplete demo : It provides the suggestions when you type in the text field.
First Include the jquery and ui autocomplte jquery and jQuery-ui.css. We are going to explain the jquery ui autocomplete with example and demo.

Jquery ui autocomplete demo

Here is an example of jQuery ui autocomplete using jQuery ui library –

Example

<link rel=”stylesheet” href=”//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css”>
<script src=”//code.jquery.com/jquery-1.10.2.js”></script>
<script src=”//code.jquery.com/ui/1.11.4/jquery-ui.js”></script>
<script>
$(function() {
var availableTags = [
“United States”,
“France”,
“Germany”,
“China”,
“Australia”,
“England”,
“Saouth Korea”,
“India”
];
$( “#tags” ).autocomplete({
source: availableTags
});
});
</script><label for=”tags”>Tags: </label>
<input id=”tags” placeholder=”Enter Some Text…”>

Demo »download-icon for Jquery ui autocomplete Download

The above code will produce following result-

Note : This is image of the output. To run this demo click on the above “Try it” button.

Jquery ui autocomplete demo

bootstrap remote modal showing same content every time

bootstrap remote modal showing same content every time

If bootstrap is showing same content in remote model.
To fix it destroy the Modal object before subsequent toggles.

Add the following code



how to increase the z index of google auto complete | Google map autocomplete in bootstrap Modal

Add the following css to work address auto complete in  Bootrap modal:

.pac-container {
background-color: #FFF;
z-index: 1052 !important;
position: fixed;
display: inline-block;
float: left;
}

How to reset form in jquery or javascript


You can rest form using the following jquery :


Below are two functions which can reset form in jquery.

Solution 1 : How to reset form in jquery

 

function resetMyForm1(){
 $("#formId")[0].reset();
}

or you can reset the  form using javascript :

Solution 2 : How to reset form in jquery or JavaScript

You can reset the form using javascript as below:

function resetMyForm2(){
document.getElementById("formId").reset();
}

You can call the above function on button click example:



or 


How to Check if an element exists in jQuery

How to Check if an element exists in jQuery : You can use .length method in jquery to check if an element exist. It returns length > 0 if an element exist else it will return false. This becomes very useful when you are working with dynamic content.

Syntax to Check if an element exists in jQuery

Here is An Example to check the solution for this problem –

function checkElement() {
if( $('#slector'>).length >0)       
{
    alert("element exists");
}
else{

alert("element does not exist");
}
}

In the above example we have created function to check element exists or not.

How to get parent of parent in jQuery

how to get parent of parent in jQuery – You can use the following method to get parent of in jquery. In this example we have explained the method to get parent of parent. There are two methods which we can use to get this solution – parent and closest.

How to get parent of parent in jquery

Suppose you want to access the id of parent of parent element of a div. Here is jQuery code you can use to find this fix –

$(this).closest('div').closest('div').attr('id');

$(this).parents('div').parents('div').attr('id'); or you can use the class of the parent of the parent

$(this).closest(".className");

How To show image link url in current page on click in facebook style jquery | Facebook style image url

 

To show image link url in current page on button click in jquery

Use the followning code :

<script type=’text/javascript’>

function passUrl()

{

var title =’New Image Link’;

var Url = “https://www.facebook.com/photo.php?fbid=416553375086196&set=a.123920751016128.25171.100001946114572&type=1&theater”;

window.history.pushState(‘obj’, title, Url);
return false;

}

</script>

The below code will produce the following type of image url which is currently clicked. Get your Facebook style image url now!

Facebook Style image url

Facebook style pass image link url in current url