Showing posts with label jQuery UI. Show all posts
Showing posts with label jQuery UI. Show all posts

How to close jquery modal dialog when click outside?

If jquery ui dialog is a modal, then this code is working fine. If the dialog is not a modal you will find out another method.

.ui-widget-overlay is dialog overlay class. So attach an event handler function for this element.

Eg:
<script type="text/javascript">
$(document).ready(function()
{
        $("#dialog").dialog();
        $('body').on("click", ".ui-widget-overlay", function()
       {
            $("#dialog").dialog("close");
       });
});
</script>

How to get suggestions while type into the field?

In jQuery UI the Autocomplete API provides suggestions while you type into the field. The data source is a simple JavaScript array, provided to the API using the source-option. Autocomplete enables users to quickly find and select from a pre-populated list of values as they type, leveraging searching and filtering.

Any field that can receive input can be converted into an Autocomplete, namely, <input> elements, <textarea> elements, and elements with the contenteditable attribute.

When typing in the autocomplete field, the plugin starts searching for entries that match and displays a list of values to choose from. By entering more characters, the user can filter down the list to better matches.

$( ".selector" ).autocomplete({
  source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ]
});
Final code and demo is here

Demo

Bootstrap model with jquery ui dialog occur a max callstack size exceeded error

Open a jquery ui dialog from bootstrap modal. This occur a max call stack size exceeded error in console.

We can solve this error in two way in my knowledge.

1) set 'modal' property to false in jqueryui dialog.
e.g.
$( ".selector" ).dialog({
  modal: false
});
2) Add the below line of code to your page
$.fn.modal.Constructor.prototype.enforceFocus = function (){};

How to change jquery ui dialog overlay style

Jquery UI dialog which is useful for displaying information. You can fully customize this dialog. Here we explain how to change the style of dialog overlay style.

This is the css style. Add a new class 'overlayStyle' and apply the new styles within the brackets.
.ui-widget-overlay.overlayStyle
{
    background: repeat-x scroll 50% 50% #ff0000;
    opacity:0.3;
    filter:Alpha(Opacity=15);
}

Then use an addClass function for add the new style to the dialog
open: function (event, ui)
{
     $('.ui-widget-overlay').addClass('overlayStyle');
}

The final code is
$( "#dialog" ).dialog(
{
     open: function (event, ui)
     {
          $('.ui-widget-overlay').addClass('overlayStyle');
     }
});

How to set jquery ui dialog to fixed position

By default the jquery ui dialog will scroll with the page. Some time we need the dialog position as fixed.

Just add a style to solve this.

.ui-dialog
{
      position:fixed;
}