Search code examples
jqueryruby-on-railsmodal-dialoglink-to

Rails jQuery link_to click function issue


Thanks in advance.

So my overall goal is get a modal dialog box with a form in it to pop up. I am running into an issue when I click my link to bring up the modal it doesn't seem to be using javascript ... it just renders the page as if javascript is disabled. Code below :)

application.js

jQuery(function(){
$("#create_reminder_dialog").click(function() {
    $('#new_reminder_dialog').dialog('open');
});

// Initialzes Create Reminder Modal Box
$("#new_reminder_dialog").dialog({
    autoOpen: false,
    height: 350,
    width: 350,
    modal: true,
    buttons: {
        'Create New Reminder': function() {
            $('#new_reminder').submit();
        },
        Cancel: function() {
            $(this).dialog('close');
        }
    },
    close: function() {
            allFields.val('').removeClass('ui-state-error');
    }
});

});

My link in rails

<%= link_to "Create reminder", new_reminder_path, :id=>'create_reminder_dialog' %>

reminders/new.html.erb

<% form_for :reminder, :url => {:action => "create"}, :html=>{:id=>"new_reminder_dialog"} do |form| %>
<%= form.text_field :description, :class=>"short" %>
<%= form.label :description %>
<%= form.text_field :days, :class=>"short" %>
<%= form.label "Days between interactions" %>
<%= submit_tag "Submit" %><%end>

In firebug I'm not seeing a GET request like I expect.

Troubleshooting tips anyone??


Solution

  • I'm thinking you'd just need to return false in your click function to prevent the link's href from firing:

    $("#create_reminder_dialog").click(function() {
        $('#new_reminder_dialog').dialog('open');
        return false;
    });