JQuery dialog - accessing partial form values

Question

Hi I load a JQuery dialog box that contains a form with (at present) one input field.

I'm using a MVC 3 and the JsonValueProviderFactory to support passing JSON to my action method. But I can't get access to my form fields, because the dialog is loading a partial.

Does anyone know the JQuery for accessing a forms fields loaded in to a dialog. Dialog code is :

$('#Test').dialog({
        bgiFrame: true,
        autoOpen: false,
        modal: true,
        height: 400,
        width: 500,
        title: 'Add report',
        draggable: true,
        postion: 'center',
        buttons: {
            "save": function () {

                $.ajax({
                    url: '/Test/Save',
                    type: "Post",
                    data: JSON.stringify(data),
                    dataType: "json",
                    contentType: "application/json; charset=utf-8",
                    success: function () {
                        alert("well done");
                    },
                    error: function () {
                        alert("error");
                    }
                });
            },
            "cancel": function () {
                $(this).dialog('close');
            }
        }
    });

As you can see I use JSON.stringify(data) but haven't defined data as I need to construct a type from the form values. Incidentally, it works when I do as the data variable is representative of the type received by my action method, however I want to construct it from form fields

$('#Test').dialog({
        bgiFrame: true,
        autoOpen: false,
        modal: true,
        height: 400,
        width: 500,
        title: 'Add report',
        draggable: true,
        postion: 'center',
        buttons: {
            "save": function () {

                var data = { Name: "Blah" }; 

                $.ajax({
                    url: '/Test/Save',
                    type: "Post",
                    data: JSON.stringify(test),
                    dataType: "json",
                    contentType: "application/json; charset=utf-8",
                    success: function () {
                        alert("well done");
                    },
                    error: function () {
                        alert("error");
                    }
                });
            },
            "cancel": function () {
                $(this).dialog('close');
            }
        }
    });

Any help anyone can provide would be gratefully appreciated.

Val · Answer 1 · 2013-03-14T10:42:18.780

ok, how about doing it on the DOM, without ever displaying the form, e.g:

var clone =  $('form .partial').clone().wrap('<form />').parent();    
var data = clone.serialize();
clone.remove();//remove the clone from the dom, dispose of it as soon as we gathered the data.
//this will stop any ID duplication as @redsquare pointed out.

$.ajax({ 
   url: '[url]',
   'data':data,
   //...success,error, type, etc ... 
})

score 0 · Answer 2 · answered May 13 '11 at 07:47

0

I suggest you create a form tag in the partial which you load into the dialog. You can then use the jquery serialize method to create the post values to send to your action method.

e.g

var data = $('#formId').serialize();

answered May 13 '11 at 07:47

redsquare

78,161
20
151
159

thanks for the suggestion, but this doesn't resolve the problem. I initially did this, wrote a custom model binder to take the form collection and create my type from the form collection. But it didn't work. The model binder didn't fire. Should it have? Succeeding that failure I went to the JSON implementation above. Any more thoughts? – Tim Butterfield May 13 '11 at 09:14
@user287079 ASP.NET MVC 3 can now automatically bind the incoming JSON post values to the .NET type, are you using mvc3? If your using 2 then you have to write a model binder to serialize the json into the .NET type - see http://stackoverflow.com/questions/560575/asp-net-mvc-how-to-pass-json-object-from-view-to-controller-as-parameter – redsquare May 13 '11 at 09:26
Thanks, yeah I moved to using MVC 3 and the JSON Value Provider, however, it became too much an overhead to find the form values in the dialog, construct a type, convert to JSON, validate, and resolve form clear up etc. In the end we've opted for a bit of a dirty trick, which I don't like but it gets us moving for now. Thanks for the suggestion though. – Tim Butterfield May 16 '11 at 13:53
ok, how about doing it on the DOM, without ever displaying the form, e.g: `$('form .partial').clone().wrap('
').parent().serialize()` not sure this will work, but you get the gist? – Val Mar 12 '13 at 16:59
@val - but then you end up with duplicate id's etc (if you use id's). – redsquare Mar 12 '13 at 20:22
@redsquare I don't see how you would end up with that, even if that is the case, `$('form .partial').clone().prop('id','random').wrap('
').parent().serialize()` bob is your uncle. – Val Mar 13 '13 at 09:35
@Val - when you clone any element then append you need to clean the id's, you cannot have duplicate id's in the dom, your solution takes care of the form id, what about all the children! It becomes a pain...and what are you winning? – redsquare Mar 13 '13 at 16:53
@redsquare I think, the edited answer easily addresses that issue :), so long as `clone.remove();` is right after the data is collected to avoid any un-expected issues. – Val Mar 14 '13 at 10:50

JQuery dialog - accessing partial form values

2 Answers2