0

I have a scenario that to me sounds just like this SO post and others who have asked similar....only I'm not understanding what others have gotten from these post as my implementation is partially failing.

Basically I have a page with a button for adding a new record. Click add button and a modal dialog opens. The modal dialog is a different view than the parent page with of course the fields needed for creating the record.

Clicking save (remember save is a button on the modal I want my save event to fire but it never does...nor do I get any errors reported in dev tools or fiddler. Here is the code for launching the modal and in the comments you will see how far I get.

$(document).ready(function ()
{
    $("#new").click(function (e) //attach new button works great
    {
        e.preventDefault(); //seems to work
        var ischanging = false; //hard coded vars for testing
        var financierid = 0;

        var detailsWindow = $("#window").data("kendoWindow");//handle if existing window

        if (!detailsWindow)
        {
            // create a new window, if there is none on the page
            detailsWindow = $("#window")
                // set its content to 'loading...' until the partial is loaded
                .html("Loading...")
                .kendoWindow(
                    {
                        ....removed options for brevity
                    })
                .data().kendoWindow.bind('refresh', function (e)//attach refresh
                {
                    alert('bound'); //this alert displays after modal loads
                    $('#save').click(function (event)
                    {
                        alert('dqewewr'); 
                        //this alert never fires nor anything subsequent
                        
                        event.preventDefault();
                        // take over and perform ajax post

                        alert('parent');

                        $.ajax(
                        {
                            type: "POST",
                            url: "@Html.Raw(Url.Action("CreateEdit", "Finance"))",
                            data: $(this).serialize(),
                            success: function (data) {
                            //here we check if called resulted in Success/Failure
                            if (data.Result === "Success") 
                               {
                                    alert('Finis');
                                }
                                else {
                                    //Show error message or whatever.
                                }
                            }
                        })
                    });
                }).center();
        }

        detailsWindow.open();
        

    });
});

My modal is NOT wrapped in a form tag...didn't think I would need it if I'm using an ajax post...?

<span id="save" class="k-button" style="margin-right:10px;">Save</span>

Finally just to make sure I am clear. My parent page is Configure.cshtml and my modal is CreateEdit.cshtml... .in other words while modal is being generated we hit controller which does its work then returns the CreateEdit view populated with model accordingly.


Stephen Muecke...if you see this change your comments to answer and I will mark as that is what solved the problem for me.

halfer
  • 19,824
  • 17
  • 99
  • 186
GPGVM
  • 5,515
  • 10
  • 56
  • 97
  • `....removed options for brevity` isn't valid javascript.... – T J Oct 18 '14 at 17:00
  • uuuhhhhh yeah are you being sarcastic? I removed the options to help keep the pasted code smaller. – GPGVM Oct 18 '14 at 17:02
  • Set a breakpoint in the first alert and check in the console if the $('#save') is getting a valid value. – TlonXP Oct 18 '14 at 17:40
  • 1
    Since you Save button is created dynamically, perhaps try moving this to a separate function using event delegation `$('document').on('click', '#save', function() {..`. Also `data: $(this).serialize(),` wont work since `$(this)` is the Save button. –  Oct 18 '14 at 23:45
  • @Cypher I did as requested and yes it is valid object. – GPGVM Oct 21 '14 at 23:06
  • @StephenMuecke I went with this just for testing and added it to the doc ready function of the PARENT. No go. Further using the same line above in the consol also results in no click detection. $('document').on("click", "#save", function () { alert("i work"); }); Now I googled event delegation to educate myself so it is very possible I am not doing this correcrtly. – GPGVM Oct 21 '14 at 23:08
  • Sorry, my mistake. Its `$(document).on(...` No quotes! –  Oct 24 '14 at 00:42
  • Yup....quotes threw but all good now. – GPGVM Oct 24 '14 at 01:11

0 Answers0