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
Here is output of the above example-
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.
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
<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…”>
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.
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!