Idea was to get users’ attention even more by displaying some floating windows… lovely …

Obvious choice would be jQuery modal dialog… So I made it … Unfortunately it has shown up that some of the flash banners remain ‘over’ the dialog, and some of them don’t. After digging into that I figured out that the reason behind that is one of flash parameters: “wmode” (thanks God this is not another inner flash issue).
From Adome Knowledge base:

wmode – Possible values: window, opaque, transparent. Sets the Window Mode property of the Flash movie for transparency, layering, and positioning in the browser.

• window – movie plays in its own rectangular window on a web page.
• opaque – the movie hides everything on the page behind it.
• transparent – the background of the HTML page shows through all transparent portions of the movie. This option can slow animation performance.

So, to fix that You need to set this parameter to ‘transparent’. Fortunately all flash objects were placed with swfobject scripts. Sample code to fix that issue may look like may look like (video from YouTube):

    $(document).ready(function () {
        // The video to load.
        var videoID = "xxx";
        // Lets Flash from another domain call JavaScript
        var params = { allowScriptAccess: "always", wmode: "transparent" };
        // The element id of the Flash embed
        var atts = { id: "ytPlayer" };
        // All of the magic handled by SWFObject
        swfobject.embedSWF("http://www.youtube.com/v/" + videoID + "&enablejsapi=1&playerapiid=player1",
                       "videoDiv", "420", "258", "8", null, null, params, atts);
    });

Hope this saves some of Your precious time…

Related posts:

1. Silverlight, Flash and HTML5 on job market
2. Short history of Facebook
3. Tips for jQuery validation plugin

Now, as ASP.NET MVC 3 beta was finally released I have decided to give it a try.

The most exciting thing that I have noticed is implementation of an idea of so called Unobtrusive JavaScript. This is for both Ajax helpers and Client Validation. And I have to admit that I just love it.

I wll just copy and paste text from scottgu blog:

Unobtrusive JavaScript and HTML 5: The AJAX and Validation helpers in ASP.NET MVC now both use an unobtrusive JavaScript approach by default. Unobtrusive JavaScript avoid injecting inline JavaScript into HTML, and instead enables cleaner separation of behavior using the new HTML 5 data- convention (which conveniently works on older browsers as well). This makes your HTML smaller and cleaner, and makes it easier to optionally swap out or customize JS libraries.  The Validation helpers in ASP.NET MVC 3 also now use the jQueryValidate plugin by default.

Basically we get all the validation done by loading js function parsing loaded DOM searching for specific parameters based on which validation rules are applied to elements. And all of that without a single js line from ‘our’ – web developers side.

One thing is not obvious though and it certainly needs extra explanation: what happens after part of the page is loaded via Ajax request (common Partial View result). Validation is not turned for those elements although all attributes are correctly marked. I have dig a little and found within JavaScript file ‘jquery.validate.unobtrusive.js’ function: jQuery.validator.unobtrusive.parse(selector). Calling function after new content is loaded solves problem, like in the example below:

$.post("test/updateCustomer", { name: "Mark", surname: "Barker" },
  function(htmlContent){
    $('#container').html(htmlContent);
    jQuery.validator.unobtrusive.parse('#content')
  }
);

Hope it helps someone…

Related posts:

1. Checkbox has to be ‘checked’ – with unobtrusive jQuery validation and ASP.NET MVC 3
2. Tips for jQuery validation plugin
3. Javascript Encode on server side – Medium Trust Environment

This post focuses on jQuery Validation plugin, as i think this is the second thing i add to my project – after jQuery core file . I will add more and more tips from time to time as soon as I find something worth to write down.

Ever worked with one of most popular jQuery validation plugins? This is extremely powerful and yet flexible plug-in that  makes form validation in javascript really easy.

Beside that fact that it already contains most popular validation rules, like checking field length, validating email or url format, it enables you to write your own “rule”.

1. Adding new method

Plugin supports method called ‘equalTo’. It is widely used – especially we request password confirmation. What is not supported is ‘notEqualTo’ method. Not that popular but can be useful from time to time. Let us say we have a field that needs to be different from other field, like new password has to be different than old password – maybe not the best choice but draws the picture.. OK, I guess recommended way to do that would be to add new method to jQuery validation plugin:

  jQuery.validator.addMethod("notEqualTo",
                             function(value, element, param) {
                                  return this.optional(element) || value != $(param).val();
                             }, "This has to be different...");
  $("#change-password-form").validate({
                rules: { ... newPassword: { notEqualTo:'#currentPassword' } },
                messages: { newPassword: { notEqualTo: "New password has to be different than old one" } }
  });

2. Preventing double form submission

Another common issue every web developer arrives sooner or later is so called ‘double form submit’. Or going further on ‘multiple form submit’. It happens when user accidentally presses submit button couple of times, causing form to be send multiple times. If we have validation plugin for our form we can make use of submitHandler method to disable button after form is submitted.

  $("#sample-form").validate({
                submitHandler: function(form){
                    if(!this.wasSent){
                        this.wasSent = true;
                        $(':submit', form).val('Please wait...')
                                          .attr('disabled', 'disabled')
                                          .addClass('disabled');
                        form.submit();
                    } else {
                        return false;
                    }
                }
            });

3. Turning on/off validation under certain conditions

It happens quite often that we require input in certain field only when some other element is selected. I just finished making web page that allows users to subscribe to newsletters on their request.  If user selects certain check-box – it means he want to subscribe and we require from him to put valid email in other field.
Otherwise, we want to keep validation turned off. To do this, we use :

<label for="cbxSubscribe"> Would you like to subscribe?</label>
<input id="cbxSubscribe" type="checkbox" />
<input id="txtSubscriptionEmail" name="subemail" />

$("#sample-form").validate({
  rules: {
    txtSubscriptionEmail: {
      required: "#cbxSubscribe:checked"
    }
  }
});

As simple as that. Element ‘txtSubscriptionEmail’ is required depending on evaluation of ‘#cbxSubscribe:checked’ expression.

4. Use CDN from Microsoft AJAX

Surprise, Surprise! ASP.NET MVC 2 (since preview 2 i guess ) includes jQuery validation plugin to provide client side validation. Definitely good news!

Moreover, Microsoft now provides CDN for plugin:

• http://ajax.microsoft.com/ajax/jquery.validate/1.5.5/jquery.validate.js
• http://ajax.microsoft.com/ajax/jquery.validate/1.5.5/jquery.validate.min.js

As well as documentation for visual studio – this would allow IntelliSense to work under visual studio (2008 and up):

• http://ajax.microsoft.com/ajax/jquery.validate/1.5.5/jquery.validate-vsdoc.js

You should make use of CDN wherever possible. It saves you bandwidth, most probably Microsoft serves content faster and there is always a chance your visitors will have it cached already. Note that Google offers CDN for jQuery and some other libraries: Google AJAX libraries API.

Stay tuned for more updates….

I will keep on adding more tips in future.

Related posts:

1. Client side validation after Ajax Partial View result in ASP.NET MVC 3
2. Checkbox has to be ‘checked’ – with unobtrusive jQuery validation and ASP.NET MVC 3
3. Firefox 3.0: 411 Length required with JQuery

I am currently working on a small project for my own. My favourite (and the only one tester) was complaining on some of “ajax” features. Tests were done with use of Firefox 3.0 – I was developing on Firefox 3.5 and had absolutely no problems with those problematic features. Anyway I decided to check this out an downloaded 3.0 version ( most recent is 3.0.11). You can have multiple instances of Firefox on Your machine – just make sure You install them in separate directories. Then the best would be to create different user profiles – like one default and one for testing. You can manage profiles using :

firefox.exe -ProfileManager

And then You can run prev version by:

\path\Firefox 3.0\firefox.exe -P test_profile -no-remote

Having this set up You can test in Firefox 3.0. I was able to reproduce error and check what is going on in firebug.
I was receiving HTTP 411 error, which says:

Your Web server thinks that the HTTP data stream sent by the client (e.g. your Web browser or our CheckUpDown robot) should include a ‘Content-Length’ specification. This is typically used only for HTTP methods that result in the placement of data on the Web server, not the retrieval of data from it.

It looks like jQuery (1.3.2) ajax calls with data parameter set to ‘null’ was causing this to happen.

Simple solution for me was to set ‘{}’ as data parameter value instead of ‘null’. Moreover, You can change method that I already mentioned about, postJSON with this fix:

$.postJSON = function(url, data, callback) {
     if(data == null)
         data = {};
     $.post(url, data, callback, "json");
};

BTW I already use Firefox 3.5 during development – it consumes less resources than previous versions () so I strongly recommend upgrading to newest version.

Related posts:

1. Debugging silverlight in Firefox and Chrome
2. Google Chrome has finally become my first browser!
3. Tips for jQuery validation plugin