Get data from the server and display in the Edit Form

Question

This question is continuation of the following question Add JSON data to the view that unfortunately ended up unresolved yet.

In my main view which has a form with 2 controls and placeholder for flexigrid I added the following at the bottom

<div id="add-edit-dialog" style="display: none" title="Add / Edit Client"> 
    @Html.Partial("_ClientForm", Model)
</div>

The flexigrid pluglin instantiates in run-time and adds 3 buttons: Add, Edit, Delete. For Edit button I need to get the current row information from the server and then display it in the Form. For Add button I do not need to go to the server (I think).

This is my current code for the Edit button:

function edit(com, grid) {
    $('.trSelected', grid).each(function () {

        var id = $(this).attr('id');
        id = id.substring(id.lastIndexOf('row') + 3);
        currentId = id;
        $('#fntype').val('Edit');
        var ClientName;
        ClientName =$('.trSelected td:eq(2)').text();
        var url = '/Client/Edit/' + id ;

        $.getJSON(url, function (html) {
            // setFormControls(data.Id, data.Role, data.Location, data.JobType,
                // data.Description);
            // alert(data);
            $($dlg).html(html);
        });
        //location.replace(url);
        RunModalDialog("Edit Client: " + ClientName);
    });

So, it is going to Edit controller action and returns that same partial view _ClientForm with correct information passed as a model. If I look at the response result returned in FireBug I can see that the returned HTML is correct and all the textboxes have correct information in their values.

However, the dialog that opens looks exactly the same as the dialog for the Add button - in other words, all form controls come blank. I can not figure out what is wrong and why it is not working the way I want it.

This is what I have for the RunModalDialog:

var validator = $("#add-edit-form").validate();

var $dlg = $("#add-edit-dialog").dialog({
    autoOpen: false,
    show: "blind",
    closeOnEscape: true,
    resizable: true,
    width: 1200,
    height: 750,
    minHeight: 600,
    minWidth: 950,
    buttons: {
        "Save": function () {

            if ($("#add-edit-form").valid()) {
                // jobPost.setVals(txtId.val(), txtRole.val(), 
                    // txtLocation.val(), txtJobType.val(), 
                    // txtDescription.val());

                $.ajax({
                    type: 'POST',
                    //data: JSON.stringify(clientInformation),
                    url: '/Client/Save',
                    dataType: 'json',
                    contentType: 'application/json',
                    success: function (result) {
                        // insert new list into grid
                        $('#flexClients').flexAddData(result);
                    }
                });
                $(this).dialog('close');
            } else return false;
        },
        Cancel: function () {
            $(this).dialog("close");
            clearForm();
            if (validator)
                validator.resetForm();
        }
    },
    close: function () {
        clearForm(); 
    },
    open: function () {
        //$("#add-edit-dialog").parent().appendTo($("#add-edit-form"));
    }
});

function RunModalDialog(title, url) {    
    if (title) {
        $dlg.dialog("option", {"title": title });
    }
    if (url) {        
        $dlg.load(url).dialog("option", { "title": title }).dialog("open");

        //$dlg.load(url, function () {
        //    var validator = $("#sform").validate();
        //    if (validator)
        //         validator.resetForm();
        //    $dlg.dialog("option", { "title": title }).dialog("open");
        //});
    } else {
        $dlg.dialog("open");
    }
}

The code with the load (and commented code) was another attempt to solve this problem. That sort of worked (the form displayed with the info), but the main Client view was also reloaded so I was seeing double grid.

Do you see what should I change in my code to get this thing working?

Thanks a lot in advance.

Answer 1

With Jazzen Chen from MS help we solved this problem. All I needed to do to display the data correctly was to change getJSON to just get jquery function. Now my form comes with data populated correctly and the next challenge will be to save the data.

Answer 2

I posted a blog post with what I have so far - hope it may help

http://blogs.lessthandot.com/index.php/WebDev/UIDevelopment/AJAX/asp-net-mvc-project-with