Jquery ui autocomplete not working with bootstrap : This occurs basically due to z-index conflict. It is fixed easily by increasing the z-index of the input field. Sometimes when you are working with jquery ui auto complete and bootstrap there may be z-index problem which hides the jquery ui autocomplete result. This issue can be fixed by adding the z-index to the ui result. Make sure the ui autocomplete has higher z-index than the others on the page.

Jquery ui autocomplete not working with bootstrap

Now lets Add the following css to fix the issue.

.ui-autocomplete {
    position: absolute;
    z-index: 1000;
    top: 0;
    left: 0;
    cursor: default;   
    background-color: #fff;
    padding:3px;
    border: 1px solid #ccc
}

.ui-autocomplete > li.ui-state-focus {
  background-color: #FF6C00;
}

In the above example we have added two css onefor z-index and second for adding background color. To fix the overlapping issue ad the z-index:1000*(maximum to keep on top as per my need) it can be higher or lesser in your case. So check your design and z-index of others.

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

Add Date: 

Here is output of the above example-

You can rest form using the following 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:

Reset Form 

or 

Reset Form 

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 – 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");

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 pass image link url in current url