Fix ASP.Net form submit behavior with jQuery

Posted by Peter Gerritsen on February 6, 2009
0 comments

In standard ASP.Net web form pages there’s only one form tag for the entire page. This unfortunately has some side effects on form submit behavior.

In a standard HTML all forms are contained in their own form tag. When the browser receives a enter key press for the form the form is submitted. Because of the single form in a ASP.Net web form this behavior will be broken and the first submit button on the page will always be triggered by the browser when pressing enter.

Microsoft has included a feature in ASP.Net 2.0 to overcome this problem. In short you add an attribute “DefaultButton”, with the ID of the button to trigger, to an ASP Panel control that wraps the form. Unfortunately this solution doesn’t work in Firefox.

To fix this, I decided to use jQuery. What we need to have is a way to identify the different forms on a page and connect them with the right submit button. So I added a fieldset tag around the single form:

writer.WriteLine("<div class=\"regular_forms\">");

writer.WriteLine("<fieldset class=\"clearfix\" defaultsubmitbutton=\"{0}\">", btnSearch.ClientID);

……… form contents ………

writer.WriteLine("</fieldset></div>");

The control “btnSearch” is the one we want to trigger when a user presses the enter button.

To hook up the button to the form we use the following JavaScript/jQuery:

$(document).ready(function() {
    $("fieldset[defaultsubmitbutton]").each(function() {
        var submitbuttonid = $(this).attr("defaultsubmitbutton");
        $("input[type='text'], input[type='password']", this).keydown(function(e) {
            var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
            if (key == 13) {
                e.preventDefault();
                var button = $("#" + submitbuttonid).eq(0);
                if (button.length > 0) {
                    if (typeof (button.get(0).onclick) == 'function') {
                        button.trigger('click');
                    }
                    else if (button.attr('href')) {
                        window.location = button.attr('href'); } else {
                        button.trigger('click');
                    }
                }
            }
        });
    });
});

This script finds all fieldset elements containing the defaultsubmitbutton attribute, locates all textboxes and password fields within that fieldset and hooks up the keydown event.
When the enter key is pressed (keycode 13) the default event is canceled and depending on the type of button the right postback method is triggered.

Tagged , | Leave a comment

Retrieving Tasks assigned to users or one of their groups

Posted by Peter Gerritsen on February 3, 2009
0 comments

Sometimes you want to retrieve all tasks that are assigned to a user or to one of the SharePoint groups the user is a member of. This quite easy to accomplish through generation of a CAML query.

Just create an Or statement for tasks assigned to the user and loop through all of the groups in the SPUser object to add those to the query.

The resulting query will look like this:

<where>
<or>
<eq>
<fieldRef Name='AssignedTo'/>
<value Type='User'>Piet van Tul</value>
</eq>
<eq>
<fieldRef Name='AssignedTo'/>
<value Type='User'>Region Controllers</value>
</eq>
<eq>
<fieldRef Name='AssignedTo'/>
<value Type='User'>Accounting department</value>
</eq>
</or>
<where>

By using this query in the QueryOverride of a Content Query Web Part you have all the power of a Content Query combined with the power of query generation.

EDIT: My collegue Wouter Lemaire pointed out that you can only specify 2 terms per Or or And element. So the above CAML could give some unexpected results.

Tagged , | Leave a comment

JavaScript errors after implementing a custom site design

Posted by Peter Gerritsen on January 31, 2009
0 comments

Most of the times we create and develop a custom design for the portals and websites we build.

This can actually lead to some rather odd JavaScript error messages saying some object is undefined when dragging and dropping web parts or using the list item edit menu.

Believe it or not, this is most of the times due to the custom style sheet and not to any custom JavaScript.

The reason for this is that the build in JavaScript of MOSS use a property offsetParent of a DOM-element to perform some “magic”. offsetParent returns a reference to the object which is the closest (nearest in the containment hierarchy) positioned containing element. In some of our custom designs this sometimes returns null and the script throws the “object undefined” error.

The easiest solution to prevent this, is to absolute-position the body by include the following statement in your css:

body { position: absolute !important; }

This can off course lead to some css issues, so positioning a wrapper is also an option.

Tagged , , | Leave a comment