CODEWITHSUNDEEP
jqueryasp.net-mvcrazorasp.net-mvc-4jquery-dialog
James123
James123

Reputation: 11652

jQuery dialog from MVC4?

I am planning to use "Are sure ..." jquery dialog box. But control action is calling before popup the dialog box.

index

<ul class="dropdown-menu">
    @{
          @Html.TryPartial("_actions", model)
          <li> @Html.ActionLink("Edit", "Edit", new {id =model.Id})</li>
           <li class="divider"></li>
           <li>@Html.ActionLink("Delete", "Delete", new {id =model.Id},new { @class = "delete-link" })</li>
      }
      </ul>
   </div> 

    }
  </td>
 </tr>
}
</table>

    <div id="delete-dialog" title="Confirmation" style="display:none">
            <p>Are you sure you want to delete this activity?</p>
    </div>
}


@section Scripts {
          @Styles.Render("~/Content/DataTables/css")
        @Scripts.Render("~/bundles/DataTables") 

    <script type="text/JavaScript">


        $(document).ready(function () {

            $('#volunteerlist').dataTable({
                "bSort": true,
                "bPaginate": false,
                "bAutoWidth": false
            });

            var deleteLinkObj;
            // delete Link
            $(".delete-link").button();

            $('.delete-link').click(function () {
                deleteLinkObj = $(this);  //for future use
                $('#delete-dialog').dialog('open');
                return false; // prevents the default behaviour
            });

            $('#delete-dialog').dialog({
                autoOpen: false,
                width: 400,
                resizable: false,
                modal: true, //Dialog options
                buttons: {
                    "Continue": function () {
                        $.post(deleteLinkObj[0].href, function (data) {  //Post to action
                            if (data == '<%= Boolean.TrueString %>') {
                                deleteLinkObj.closest("tr").hide('fast'); //Hide Row
                                //(optional) Display Confirmation
                            }
                            else {
                                //(optional) Display Error
                            }
                        });
                        $(this).dialog("close");
                    },
                    "Cancel": function () {
                        $(this).dialog("close");
                    }
                },
                show: {
                    effect: "blind",
                    duration: 1000
                },
                hide: {
                    effect: "explode",
                    duration: 1000
                }
            });


        });
    </script>

I followed this Post. I don't understand why controller action calling before dialog opens.

Upvotes: 1

Views: 1223

Answers (2)

Jasen
Jasen

Reputation: 14250

Instead of return false try preventDefault()

$('.delete-link').click(function (event) {
    event.preventDefault();
    deleteLinkObj = $(this);  //for future use
    $('#delete-dialog').dialog('open');
    // with runtime errors you might not get here and will do normal href behavior
    // return false; // prevents the default behaviour
});

Here's a working jsfiddle which is essentially the same as your code.

Upvotes: 0

cwharris
cwharris

Reputation: 18125

Try this:

 var btn = $(".delete-link").button();

 btn.click(function () {
     deleteLinkObj = $(this);  //for future use
     $('#delete-dialog').dialog('open');
     return false; // prevents the default behaviour
 });

Upvotes: 1

Related Questions