JQuery return value from child window to parent

Question

first I have a list of records that has an edit button for each row (Please see below image 1 parent window). Once I clicked the edit button, a pop-up will appear which shows the Answer field in the pop-up window (Please see image 2 child window). In the pop-up window, there is a text area which handles the answer value, from here the user can add/delete a value. once the user clicked the save button, the values should be save in the database and reflects the modified value of the answer field on the particular row that was choosen to edit in the parent window.

Here is my code so far, I didn't implement a Controller yet for this because I don't know how to, I don't know if the controller can be called here for saving the data in to the dadabase.

I am new to MVC, I am hoping that there is someone who can help and understand my problem.

Controller:

[HttpPost] 
       public ActionResult Sample(string answers, string question, string controlid, string eventid)
       {

           return View("CustomizedQuestion");
       }

Javascript:

$(".editButton").live("click", function (e) {
                e.preventDefault();
                var $title = $(this).attr("title");
                var $answers = $(this).attr("answers");
                var $controlid = $(this).attr("id");
                dropdownlist($controlid, $title, $answers);
            });

 function dropdownlist(controlid, title, answers, eventid) {

var $answersreplaced = answers.replace(/\,/g, " \r");

var $deleteDialog = $('<div><textarea id="answerlist"  rows="10" cols="50">' + $answersreplaced + '</textarea><div><div style="font-size:9px">(To change back to an open answer field, delete all choices above and save)</div>');

$deleteDialog.dialog({

    resizable: false,

    height: 280,

    width: 350,

    title: title + " - Edit Choices",

    modal: true,

    buttons: {

        "Save": function () {
            $.ajax({
                url: '@Url.Action("Sample")',
                type: 'POST',
                dataType: 'json',
                data: { answers: $('#answerlist').val(),
                       question: title,
                       controlid: controlid,
                       eventid: eventid
                     },

                success: function (resp) {

                    $(this).dialog("close");
                },

                error: function () {
                    alert('there was a problem saving the new answers, please try again');
                   }
            });

        },

        Cancel: function () {

            $(this).dialog("close");

        }

    }

});

};

Answer 1

As requested by comment:

$(".editButton").live("click", function (e) {
        e.preventDefault();
        var $title = $(this).attr("title");
        var $answers = $(this).attr("answers");
        var $controlid = $(this).attr("id");
        var questionID = $(this).attr('questionID');
        dropdownlist(this, questionID, $controlid, $title, $answers);
    });

function dropdownlist(el, questionID, controlid, title, answers) {
    var $answersreplaced = answers.replace( /\,/g , " \r");
    var $deleteDialog = $('<div><textarea id="answerlist"  rows="10" cols="50">' + $answersreplaced + '</textarea><div><div style="font-size:9px">(To change back to an open answer field, delete all choices above and save)</div>');
    $deleteDialog
        .dialog({
            resizable: false,
            height: 280,
            width: 350,
            title: title + " - Edit Choices",
            modal: true,
            buttons: {
                "Save": function () {
                    var dialog = $(this);
                    $.ajax(function()
                    {
                        url : 'controller-path',
                        type : 'POST',
                        dataType : 'json',
                        data : 
                        {
                            Answers : $("#answerlist").val(),
                            QuestionID : questionID
                        },
                        success : function(resp)
                        {
                            $(dialog).dialog("close");
                            var newanswers = $("#answerlist").val();
                            modifyanswers(controlid,newanswers);
                        },
                        error : function()
                        {
                            alert('there was a problem saving the new answers, please try again');
                        }
                    });
                },
                Cancel: function () {
                    $(this).dialog("close");
                }
            }
        });
};

In addition to this, you would need to add an attribute named questionID which stores the ID of the row the answers relate to.

On a separate note, I would avoid using attributes in this way. You can store the title in title, as that is a valid attribute, although answers and in my example questionID are not valid attributes and as a result, will fail HTML validation.

You could/should look at storing them in another way.