Home/ Questions/Q 6803065
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T19:17:57+00:00

In my web app, I have a list of editable objects, each with an

  • 0

In my web app, I have a list of editable objects, each with an “edit” link. Now, when you click the “edit” link, a jQuery UI dialog pops up, and the edit form for that object is displayed. On the bottom are “save” and “cancel” buttons. when “save” is clicked, the form is supposed to be submitted to the server. That’s what I’m unable to do.

Some particularities are that the edit form is loaded onto the dialog div via ajax when “edit” is clicked on one of the list items, so maybe it has something to do with that. Here are some code excerpts from the app. I’m working with Ruby on Rails 3.1.

The view:

<html>
...
<body>
    ...
    <div id="edit-campaign"></div>
    <script>
    $(function() {
    var buttons = { 
            "Save": function() { $("#edit-campaign-form").submit(); },
            "Cancel": function() { $("#edit-campaign").dialog("close"); }
              };
    createDynamicDialog("edit-campaign", buttons, "edit-campaign", "Edit Campaign");
    });
    </script>
</body>
</html>

The createDynamicDialog function (in another script file): This is the one where I make each “edit” link load their edit forms (URL in the href attribute) onto UI dialogs.

createDynamicDialog = function(divId, buttons, cls, title) {
    $("." + cls).click(function(e) {
        e.preventDefault();
        var dialogOptions = {   
                                title: title,
                                width: 800,
                                height: 500,
                                modal: true,
                                autoOpen: true,
                                buttons: buttons
                            };
        var link = $(this);
        $("#" + divId).load(link.attr('href')).dialog(dialogOptions);
    });
};

With this, the “cancel” button works fine (closing the dialog), but the form isn’t submitted when I click “save”. Why could this be? I have a similar dialog that is loaded (the ajax part) when the page is loaded, and is only toggled through a button. That works fine. The problem is only when the loading of the form is done on the “click” event. Why?

Thanks in advance for any help you can give me. I’ve been stuck on this forever…

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You could try changing this line of code:

    "Save": function() { $("#edit-campaign-form").submit(); },

    to

    "Save": function() { $("#edit-campaign form").submit(); },

    I can’t tell what the generated form would look like, but changing the save button in this way should work. [I suspect the generated form doesn’t have the id you expect]

    update/edit

    To reflect what we covered in the comments: When events are not being captured as expected, it’s important to check for other listeners that may be consuming the event.

    • 0