How to pass from pop up of jqgrid when clicked button?

Question

I use mvc4. There is button in rows of jqgrid. when clicked button, open pop up and in pop up edit data of row's grid. but when clicked button of pop up don't pass data to action of controller. code of pop up:

{
     name: 'Notes',
     width: 160,
     sortable: false,
     resizable: false,
     search: false,
     formatter: function () {
         return "<button onclick='OpenDialog()' style='margin-left:12px'>Pop Up Dlg</button>";
     }
 }

code of pop up (http://jqueryui.com/dialog/#modal-form):

<script>
    $(function() {
        var dialog, form,
        modserial = $("#ModSerial"),
            simno = $("#SimNo"),

            function addUser() {
                $(function() {
                    $.ajax({
                        url: '@Url.Action("EditMet", "MetGrid")',
                        data: "{'ModSerial':'" + document.getElementById('ModSerial').value + "', 'SimNo':'" + document.getElementById('SimNo').value + "'}",
                        type: "Post",
                        dataType: "Html",
                        success: function(result) {
                            $("#Data").html(result);
                        },
                        error: function() {
                            alert("Error!");
                        }
                    });
                });
            }

            function log() {}
        dialog = $("#dialog-form").dialog({
            autoOpen: false,
            height: 400,
            width: 350,
            modal: true,
            buttons: {
                "...": log,
                    "Confirm": addUser,
                Cancel: function() {
                    dialog.dialog("close");
                }
            },
            close: function() {
                form[0].reset();
                allFields.removeClass("ui-state-error");
            }
        });
        form = dialog.find("form").on("submit", function(event) {
            event.preventDefault();
            addUser();
        });
    });
</script>

When call action(@Url.Action("EditMeter", "MeterGrid")), pass null to controller. How to pass data and id's row grid to action?

Could you include the prototype of `MetGrid` action (the parameters and the type of returned value)? Are you sure that the action expect the data in JSON format? Probably you should use `data: {ModSerial: document.getElementById('ModSerial').value, SimNo: document.getElementById('SimNo').value}` instead? The data seems to be independent from the row in which the button was clicked. Why you need include the same button in *every* row of the grid all the buttons works identically? Where are elements with ids `ModSerial` and `ModSerial` (inside or outside of jqGrid)? — Oleg, Nov 29 '15 at 08:56
@Oleg The data be dependent from the row in which the button was clicked because ModSerial & SimNo filled in pop up and when clicked button, I want pass id of row and modseril and simno to action. If ModeSerial had value in grid when clicked button, textbox's Moserial filled by value and edited in pop up. my action (public ActionResult EditMet(tblMet met, string ModSerial, string SimNo)). This pop up was edidting some data in grid. Elements of moserial and simno there are in grid but i want edited this element in pop up. — mahdis dezfouli, Nov 29 '15 at 09:28
Sorry, but I still don't understand your question. 1) the code of `OpenDialog` could be helpful. 2) I don't see the code where you get rowid and forward to `addUser` or some other function 3) The code of `addUser` seems me wrong because of **unneeded `$(function() {...});` construct over `$.ajax` call**. The `$(function() {...});` means registering document ready event handler, but you need probably just make `$.ajax` call to the server. 4) I would recommend you don't use `onclick` attribute on the ` — Oleg, Nov 29 '15 at 11:52

score 0 · Answer 1 · answered Nov 29 '15 at 07:24

0

You should use contentType: "application/json;charset=utf-8" and stringify the JSON data like follwoing.

$.ajax({
     url: '@Url.Action("EditMet", "MetGrid")',
     data: JSON.stringify({"ModSerial": document.getElementById('ModSerial').value, "SimNo": document.getElementById('SimNo').value}),
     type: "post",
     contentType: "application/json;charset=utf-8",
     dataType: "Html",
     success: function(result) {
               $("#Data").html(result);
     },
     error: function() {
               alert("Error!");
     }
 });

Hope it will work now.

answered Nov 29 '15 at 07:24

Ibrahim Khan

20,616
7
42
55

Thanks for help, This don't work for me. when I add this code, never call action. – mahdis dezfouli Nov 29 '15 at 07:36
What is developer console saying? – Ibrahim Khan Nov 29 '15 at 08:35
Go through the Oleg's comment. – Ibrahim Khan Nov 29 '15 at 12:50

How to pass from pop up of jqgrid when clicked button?

1 Answers1