Jquery UI Dialog Important Points

This post is regarding JQuery UI Dialog,  with this post every one get some basic knowledge on Jquery UI Dialog . And you are in the position  to explain about Jquery UI Dialog. And clarify all 3W's (What,where,When) and 1H(How).


1. What is Jquery Dialog?

     It is a Jquery UI dialog plugin which is similar to ajax modal popup control. We add the dialog code at <script> tag

2. Syntax
               $(id).dialog({
                       
                  //Properties
                   
               });


3. Pros & cons

   Pros : Nested popup's (i.e., parent-child relationship)


4. Diff b/w Ajax Modalpopup & Jquery Dialog?

   In ajax Modalpopup - Nested popup is not possible

   In Jquery Dialog : It is possible.

5. Important Features

   5.1 : Open dialog in two ways
          5.1.1 :
                $('#<%=pnlId.ClientID %>').dialog('open')
         
          5.1.2 :  $("#<%=pnlId.ClientID %>").dialog({
                       
                        //Properties
                 
                });

   5.2 : Remove existing styles as per our requirement
   Ex :   // Removing and hiding Jquery Dialog classes
                $(".ui-corner-all").removeClass("ui-dialog-titlebar ui-widget-header ui-draggable-handle");
                $('button[title=Close]').removeClass("ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close");
                $('button[title=Close]').hide();
                $(".ui-dialog-title").hide();
                // End

   5.3 : Add dialog to form
          open: function (type, data) {
                        $(this).parent().appendTo("form");
                    }
          If not added to form events are not firing
   5.4 : Properties
          5.4.1 : Set resizable either true or false Ex : resizable:false
          5.4.2 : Set draggable either true or false Ex : draggable :false
          5.4.3 : Set width and height and many more.

   5.5 : Close the dialog
            $('#<%=pnlId.ClientID %>').dialog('close');

   5.6 : Destroy the values in popup
         $('#<%=pnlId.ClientID %>').dialog('destroy');

   5.7 : Even Jquery UI Dialog call from Gridview row command event using ScriptManager,ClientScript at code behind.


I hope this article help you to reduce the time for finding Jquery UI Dialog solution.

Happy Coding :)

Jquery important events

Here the below are jquery events which we are using regular basis and i list all the things in one place,So this, we reduce time for you to get the thing for your requirement. I hope this will help you to fix the issues,

- Text controls

$('input:text[id="textboxTheaterContent"]').val() - Reading
$('input:text[id="textDepFrom"]').val(""); - Setting

- Hidden
$('input:hidden[name="cmbPayerName"]').val();

- Get the text
 $('#ddlType :selected').text()

- Disable the control
 $("#buttonFileUpload").prop("disabled", true);

- Hide/Show the control
 $('#DivImageOwnerSelectionOptions').hide();
 $('#DivImageOwnerSelectionOptions').show();

- Focus
$('input:text[id="textDepFrom"]').focus();

- Check Numeric
$.isNumeric(elementboxowner)

Adding new CSS Class to existing CSS Class using Jquery

If user want to add/append one more style to existing CSS then  we used the following method

Jquery is a javascript library (i.e., Enhanced library of Javascript) with this we use the following method to add new CSS class to existing one.


Ex : $(".existingone").addClass("newone");


And also we can remove the existing style to particular control using the following way,

       $('.classname').attr("style", "");
       Remove styles to the existing one


That's It,


Happy Coding:)