jQuery.ui dialog: adding classe to buttons

Had this question come up at work and found a good answer on stackoverflow here. It basically involves handling the open event, finding the buttons and applying a style to them.

Firstly a simple bit of html:

<a id="to_dialog_a" href="javascript:void(0);">click me</a>
<div id="to_dialog" style="border: 1px solid gold; background-color: #336699"></div>

And here is some javascript to wire it up. In the example below I have done things a little differently as the application we are developing needs to be localized; so i used the button index.

Note: This example doesn’t have any jquery.ui css to deal with.

A whole example html file is located here

        $(document).ready(function() {
            $("#to_dialog_a").click(function() {
                $("#to_dialog").dialog("open");
            });
            $("#to_dialog").dialog({
                autoOpen: false,
                buttons : {
                    ok: function() {
                        alert("you clicked me!");
                    },
                    what: function() {
                        alert("you clicked me!");
                    },
                    cancel: function() {
                        alert("you clicked me!");
                    }
                }
                ,
                open: function(event, ui) {
                    // Get the dialog
                    var dialog = $(event.target).parents(".ui-dialog.ui-widget");

                    // Get the buttons
                    var buttons = dialog.find(".ui-dialog-buttonpane").find("button");

                    var okButton = buttons[0];
                    var whatButton = buttons[1];
                    var cancelButton = buttons[2];

                    // Add class to the buttons
                    // Add class to the buttons
                    $(okButton).addClass("primary");
                    $(whatButton).addClass("secondary");
                    $(cancelButton).addClass("thirdary");
                }
            });
        });

Advertisements

jQuery.validate – Setting default ignore rules

This post has been moved here.

jQuery.validate Custom Methods

We’ve been looking at validating a client side Url using the jQuery.validate (doc) plugin… and our rules were:

  • The field is required. You have to put the Url in.
  • Url must be an absolute path
  • Url must accept “http://localhost” style uri
  • Url must accept ip addresses (E.g. “http://10.0.0.12”)
  • We wanted to use a custom class called requiredUrl without adding custom rules to the validate method.
  • We want the code seperate from everything else, meaning we wanted to put the code in a different file, in other words, we didn’t want to polute the View (ASP.NET MVC) with rules nor alter the jquery.validate.js file directly.

The validate plugin allows you to add custom methods which allows the addition of a method that can be executed to validate a fields value… The method takes 3 parameters:

  1. The name of the method; in our case it is “requiredUrl”
  2. The function to do the validation… Returns true or false and takes 3 parameters: the value of the field, the element itself, and a params argument (not really sure why on this last one… haven’t looked it up as I’ve not had any need for it yet.)
  3. The third parameter is the message to show if the value is invalid.

Here is the requiredUrl method added to the validate plugin:

jQuery.validator.addMethod("requiredUrl", function(value, element, param) {
    var expression = /^(http:\/\/|https:\/\/)?((([\w-]+\.)+[\w-]+)|localhost)(\/[\w- .\/?%&=]*)?/i;
    return expression.test(value);
}, jQuery.validator.messages.url);

Notice the following:

  • The validation Regex requires something to be entered. Otherwise you would normally go as follows to also validate whether the field was required.

     return this.optional(element) || expression.test(value);

  • The last parameter is using the default Url validation message (jQuery.validator.messages.url)

With the following form field…

<input type=”text” class=”requiredUrl” />

…you could use the code as follows in your view:

$(document).ready(function() {
    $("#ServerForm").validate({
    rules: {
       webService: {
           requiredUrl: true
       }
    }

    });
});
  

The rule being added is for the form field with the Name of “webService” and the “requiredUrl” method is activated for that field, or in other words, this is the name of the method to execute when validation occurs for this field.

As already stated, I didn’t want to add this to the View so I wanted to just do the validation like this…

$(document).ready(function() {
    $("#ServerForm").validate(
);
});
  

To do that we need to register the css class “requiredUrl” with the validate plugin and tell it to use the “requiredUrl” method we registered earlier. I figure out you could do it like this:

jQuery.validator.classRuleSettings.requiredUrl = {requiredUrl: true};

The first “requiredUrl” refers to the css class to look for, and the second one refers to the name of the method that we added earlier.

Summary:

So the code would be:

jQuery.validator.addMethod("requiredUrl", function(value, element, param) {
    var expression = /^(http:\/\/|https:\/\/)?((([\w-]+\.)+[\w-]+)|localhost)(\/[\w- .\/?%&=]*)?/i;
    return expression.test(value);
}, jQuery.validator.messages.url);

jQuery.validator.classRuleSettings.requiredUrl = {requiredUrl: true};

Our form field would be:

<input type=”text” class=”requiredUrl” />

And our wireup to validate would be something like this:

$(document).ready(function() {
    $("#ServerForm").validate(
);
});

jQuery Plugins List

jQuery Cookie Plugin

jQuery History Plugins

jQuery animation Example

I just created a jQuery Html Template that has 3 section.

  1. Header – Fixed size
  2. Content – Starts at the bottom of the header and stops at the top of the footer
  3. Footer – Fixed size

http://codepaste.net/ybuqrv

The template includes jquery library inline so it is fully functional.

The animation part will occur when the “Click Me” button is pressed in the top right of the page. The header will change size as will the content area. The content area is self scrolling also.

This test was done as a simple experiment to try and solve a problem with a control I’m trying to design.

Works on: IE 6-8 (though in IE6 the links are not correct), FireFox (3.5) and the latest Chrome (3.0.195.27)