Question

I add a link_to_remote to load a modal dialog box from a partial. But when I run the application I get the following error..

RJS error:

TypeError: $("create_event_dialog").dialog is not a function

When I click ok then again I got another dialog box.

Element.update("create_event", "<form action=\"/countries\" class=\"new_country\" id=\"new_country\" method=\"post\" onsubmit=\"new Ajax.Request('/countries', {asynchronous:true, evalScripts:true, parameters:Form.serialize(this)}); return false;\"><div style=\"margin:0;padding:0;display:inline\"><input name=\"authenticity_token\" type=\"hidden\" value=\"qWXCu2zMmlMhJG+GRf35kMbAIfzYAtFBee142ThmmMw=\" /></div>\n <p>\n    <label for=\"country_name\">Name</label><br />\n    <input id=\"country_name\" name=\"country[name]\" size=\"30\" type=\"text\" />\n  </p>\n  <p>\n    <input id=\"country_submit\" name=\"commit\" type=\"submit\" value=\"Create\" />\n  </p>\n</form>\n");   
$('create_event_dialog').dialog({
    title: 'New Event',
    modal: true,
    width: 500,
    close: function(event, ui) { $('create_event_dialog').dialog('destroy') }

});

Why do I got this kind of error? I have a div with the id of create_event_dialog. I am using Prototype and I could not find the way to solve this. Please help me.

Answer 1

Your code looks like you want to actually use the jQuery UI dialog feature. As far as I know Prototype (or Scriptaculous) has no built-in dialog support.

If want to have a jQuery UI dialog you have two options:

1. Use jQuery and jQuery UI alongside Prototype.
2. Replace Prototype and only use jQuery

Option 1:

To use jQuery alongside Prototype you have to include the jQuery Javascript libraries and enable the compatibility mode by calling jQuery.noConflict(). After that the $ function belongs to Prototype and for all jQuery features you have to use jQuery(...) instead. For example jQuery('create_event_dialog').dialog(... in your case.

You can find details on Using jQuery with Other Libraries.

Option 2:

You have to remove the Prototype libraries and instead include the jQuery libraries. You also need the jRails compatibility library to keep your prototype helpers. And you have to change your existing Prototype code to jQuery code.

For example your Element.update statement would look like this:

$("#create_event".html("<form action=...")

See Using jQuery with Ruby on Rails for more details.

Careful: Depending on your existing code option 2 can be a lot of work, but will result in cleaner Javascript code. Also it might be worth considering switching to Rails 3.1 with UJS and jQuery as the official Javascript library.