<script>
   var $j = jQuery.noConflict();
  </script>

Now all you have to do to use jquery is use “$j” instead of just “$” and your good to go. To use just the standard prototype library is still just “$”. Simple isn’t it

Here is an example of what the charts look like

 page.insert_html :bottom, page.literal("$$('p.welcome b').first()"), "Some item"

Bill Burhcam over at Meme Rocket made a post that *almost* solved a problem for me the other day. We’re currently doing some work that ends up creating html. Pretty standard stuff, but for a few reasons that aren’t really worth going into we can’t easily rely on our element ids being unique. The prototype functions ‘up’ and ‘down’ are perfect for this situation though.

So our problem basically boils down to this – RJS converts this code:

page.insert_html :bottom, "$$('p.welcome b').first()", "Some item"

into this javascript:

 new Insertion.Bottom("$$('p.welcome b').first()", "Some item"

Because the $$(‘p…’) is in quotes, Insertion.Bottom just looks for an element with that id. Which isn’t what we really wanted.

After digging around in the ActionView source for a while I found JavascriptGenerator::GeneratorMethods and its javascript_object_for method. It turns out that if you pass in a ActiveSupport::JSON::Variable then insert_html will behave how we want. So for the example above, the code below will work as expected.

 js_literal = "$$('p.welcome b').first()" js_literal = ActiveSupport::JSON::Variable.new(js_literal) page.insert_html :bottom, js_literal, "Some item"

will output:

 new Insertion.Bottom($$('p.welcome b').first(), "Some item"

Thank you open source.

So my onClose function looks like so

function onClose(cal) {
	var p = cal.params;
	new Ajax.Updater('overlapping', '/visits/new', {
	  parameters: { start_date:  p.inputField.value; },
	  evalScripts: true
	});
	cal.hide();
};

This will fire once the calendar is closed. ‘Overlapping’ is the ID of the Div ill be updating and ‘/visits/new’ is the path of the action in your controller. This will then pass the start date param to the action which can then be used in the view. The problem l had is that l had some javascript on the partial that was not executing. Had to think for a minute and then it turned out that evalScripts is false by default thus the javascript was not executing.

So its as simple as having the following as a param in your Ajax.updater

 evalScripts: true

Once you have done that your good to go.

In ASP.NET 2.0 they came out with a “fix” for this. You can wrap your fields in a Panel and set the default button:

<asp:Panel ID="_pnlLogin" DefaultButton="_btnLogin" runat="server">
    UserName: <asp:TextBox ID="_txtUserName" runat="server" />
    Password: <asp:TextBox ID="_txtPassword" runat="server" />
    <asp:LinkButton ID="_btnLogin" Text="Login" runat="server"/>
</asp:Panel>

Some of you will know limitation here. This works with a Button, but not a LinkButton. Let’s see why.
Here is the resulting HTML:

<div id="_pnlLogin" onkeypress="javascript:return WebForm_FireDefaultButton(event, &amp;#x27;_btnLogin&amp;#x27;)">
    UserName: <input name="_txtUsername" type="text" id="_txtUsername" />
    Password: <input name="ctl00$mainContent$_txtPassword" type="text" id="_txtPassword" />
    <a id="_btnLogin" href="javascript:__doPostBack('_btnLogin','')">Login</a>
</div>

The Panel renders as a div, and on any key pressed will call WebForm_FireDefaultButton:

function WebForm_FireDefaultButton(event, target) {
    if (!__defaultFired && event.keyCode == 13 && !(event.srcElement && (event.srcElement.tagName.toLowerCase() == "textarea"))) {
        var defaultButton;
        if (__nonMSDOMBrowser) {
            defaultButton = document.getElementById(target);
        } else {
            defaultButton = document.all[target];
        }
        if (defaultButton && typeof(defaultButton.click) != "undefined") {
            __defaultFired = true;
            defaultButton.click();
            event.cancelBubble = true;
        if (event.stopPropagation) event.stopPropagation();
            return false;
        }
    }
    return true;
}

This method checks for the enter key and then calls click on the default button. All good except for one thing: the LinkButton renders as an “a” tag. Anchor tags don’t have a click() method unfortunately. At least not in Firefox.

So let’s fix it! I’ve recently been reading “Learning jQuery”
which is a great book on this cool javascript library. I’ll use jQuery instead of straight javascript as it is much easier to write cross browser code and it’s a lot more concise. Plus there are heaps of plugins for it, and it’s a pretty small download for your page.

I want to improve the markup of my page at the same time so I’ll try to minimise the amount of server controls I use and get rid of that inline javascript call. My new aspx looks like this:

<div class="form">
    UserName: <asp:TextBox ID="_txtUsername" runat="server" />
    Password: <asp:TextBox ID="_txtPassword" runat="server" />
    <asp:LinkButton ID="_btnLogin" Text="Login" runat="server" CssClass="form_submit"/>
</div>

So if I have a div with the class “form”, the default submit button is the first element with the “form_submit” class. Nice, simple and unobtrusive.

Here’s the javascript I ended up with:

$(document).ready(function(){
    var $btn = $('.form_submit');
    var $form = $btn.parents('.form');

    $form.keypress(function(e){
        if (e.which == 13 && e.target.type != 'textarea') {
            if ($btn[0].type == 'submit')
                $btn[0].click();
            else
                eval($btn[0].href);
            return false;
        }
    });
});

Basically it’s going to find any .form_submit elements, find a parent form, and add a keypress handler for the form. When the keypress is triggered, if it’s the enter key and we’re not in a textarea, we’ll click the default submit button if it IS a button, if it’s a link we’ll Eval the href attribute, which is going to be our javascript postback call.

Cool, I can keep it tucked away in an js file include, and i’ve improved my markup.