Jquery-Ui Dialog form for each button in a dynamic table

Question

I am generating an HTML table with a button for each row which have to open a Jquery ui dialog form.

//The table
<table class="table table-reporting table-condensed table-striped" id="tableoperator">   
    <tbody>
        @for (int h = 0; h < Model.ToList().Count; h++)
        {
            <tr>                      
                <td class="hidden-phone hidden-tablet">
                    <button class="update" id="@Model.ElementAt(h).id">Update</button>
                </td>
            </tr>
        }
    </tbody>
</table> 

//The dialog form
<div id="dialog-form" title="Update Ticket" >
<form>
    <fieldset>
        <label for="state">State</label>
        <input type="text" name="state" id="state" class="text ui-widget-content ui-corner-all">
        <label for="note">Note</label>
        <input type="text" name="note" id="note" class="text ui-widget-content ui-corner-all">
        <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
    </fieldset>
</form>

<script>
        $(function () {
            var dialog,
              state = $("#state").val(),
              note = $("#note").val(), 
              id = id of button Update??
              dialog = $("#dialog-form").dialog({
                autoOpen: false,
                height: 400,
                width: 350,
                modal: true,
                buttons: {
                    "Ok": function () {
                        $.ajax({
                            type: "POST",
                            url: "@Url.Action("Update","Ticket")",
                            data: { 'id': id, 'state': state, 'note': note },
                            cache: false,
                            dataType: "json",
                            success: function (data) {
                            $(this).dialog("close");
                                }
                            });
                    },
                     "Cancel": function () {
                         $(this).dialog("close");
                     }}
            });

            $(".update").button().on("click", function () {
                dialog.dialog("open");
            });
        });
    </script>

But the problem is that in the action Update of TicketController the parameters state and node are empty. What can I do? And How can I set id = id of button Update?

//////// Edit: this is the correct code (as suggested by @Igor)

<script>
    $(function () {
        var state = $("#state").val(),
          note = $("#note").val(),
          dialog = $("#dialog-form").dialog({
            autoOpen: false,
            height: 400,
            width: 350,
            modal: true,
            buttons: {
                "Ok": function () {
                    $.ajax({
                        type: "POST",
                        url: "@Url.Action("Update","Ticket")",
                        data: { 'id': $(this).data("idt"), 'state': $("#note").val(), 'note': $("#note").val() },
                        cache: false,
                        dataType: "json",
                        success: function (data) {
                        $(this).dialog("close");
                            }
                        });
                },
                 "Cancel": function () {
                     $(this).dialog("close");
                 }}
        });

        $(".update").button().on("click", function () {
            dialog.data("idt", this.id);
            dialog.dialog("open");
        });
    });
</script>

Igor · Accepted Answer · 2017-03-28 13:37:15Z

0

1.Store id of the clicked button in the dialog data property before you open the dialog.

2.Retrieve values to be sent inside the "Ok" click.

  "Ok": function () {
    var id = dialog.data("buttonid");
    var state = $("#state").val();
    var note = $("#note").val(); 
    $.ajax({
      ...

$(".update").button().on("click", function () {
  dialog.data("buttonid", this.id);
  dialog.dialog("open");
});

answered Mar 28, 2017 at 13:37

Igor

15.9k1 gold badge29 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ab_mundi Over a year ago

This gives me error "Cannot read property 'data' of undefined at HTMLDocument.<anonymous>" when I set var id = dialog.data("buttonid");

Igor Over a year ago

@ab_mundi clean up your var declaration - why do you have two dialog's there?

Collectives™ on Stack Overflow

Jquery-Ui Dialog form for each button in a dynamic table

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related