Quantcast
Channel: ASP.NET AJAX + Ajax Control Toolkit (ACT)
Viewing all articles
Browse latest Browse all 5678

Modal popup doesnt show after search inside ajax

$
0
0

Hey.

I have followed the MVC4 tutorial on pluralsight where i learned creating Ajax partial view With search, pager and autocomplete functions. Now i wanted to improve my skills by adding modal popup for creating, editing and deleting. The modal Works only if i dont do anything inside the ajaxview, for instance a search or use the pager.  I appreciate any help With this.

Edit Method:

// GET: Stasjon/Edit/5
        public ActionResult Edit(int? id)
        {
            if (id == null)
            {
                return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
            }
            Stasjon stasjon = db.Stasjoner.Find(id);
            if (stasjon == null)
            {
                return HttpNotFound();
            }

            if (Request.IsAjaxRequest())
            { 
            return PartialView("_Edit", stasjon);
            }
            return View("_Edit", stasjon);
        }

Edit view:

@model CodeFirstDB.Models.Stasjon<div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button><h4 class="modal-title" id="myModalLabel">Rediger @Model.StasjonNavn</h4></div>

    @using (Html.BeginForm())
    {
        @Html.AntiForgeryToken()

        <div class="modal-body"><div class="form-horizontal">

                @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                @Html.HiddenFor(model => model.StasjonID)<div class="form-group">
                    @Html.LabelFor(model => model.StasjonNr, htmlAttributes: new { @class = "control-label col-md-2" })<div class="col-md-10">
                        @Html.EditorFor(model => model.StasjonNr, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.StasjonNr, "", new { @class = "text-danger" })</div></div></div></div><div class="modal-footer"><button class="btn" data-dismiss="modal">Cancel</button><input class="btn btn-primary" type="submit" value="Save" /></div>
    }


PartialView rendred in index:

@model IPagedList<CodeFirstDB.Models.StasjonListeViewModel><div id="stasjonListe"><div class="pagedList" data-cfdb-target="#stasjonListe">
                @Html.PagedListPager(Model, page => Url.Action("Index", new { page }),
        PagedListRenderOptions.MinimalWithItemCountText)</div><table class="table table-striped table-condensed table-hover"><tr><th>Name</th></tr>
                @foreach (var item in Model)
                {<tr><td>@item.Name</td><td>
                            @Html.ActionLink("Edit","Edit", "Stasjon", new { id = item.Id }, new { data_modal = "", @class = "glyphicon glyphicon-wrench" })</td></tr>
                }</table><div class="pagedList" data-cfdb-target="#stasjonListe">
                @Html.PagedListPager(Model, page => Url.Action("Index", new { page }),
        PagedListRenderOptions.MinimalWithItemCountText)</div></div>

Gridview.js (including autocomplete and search):

$(function () {

    //ajax search function
    var ajaxFormSubmit = function () {
        // grab a reference to the form to be submitted
        var $form = $(this);
        // options object
        var options = {
            // url we are going to
            url: $form.attr("action"),
            //type of request to make
            type: $form.attr("method"),
            // data to send to server
            data: $form.serialize()
        };

        // make async call
        $.ajax(options).done(function (data) {
            // target to update
            var $target = $($form.attr("data-cfdb-target"));
            // replace target with anything from server
            var $newHtml = $(data);$target.replaceWith($newHtml);$newHtml.effect("highlight");

        });
        // prevent from navigating away from the page
        return false;
    };

    //select autocomplete
    var selectAutocompleteForm = function (event, ui) {
        var $input = $(this);
        // set value$input.val(ui.item.label);

        var $form = $input.parents("form:first");
        // submit itself$form.submit();
    };

    //autocomplete function
    var createAutocomplete = function () {
        var $input = $(this);

        var options = {
        // source= Where to get the data (required)
        source: $input.attr("data-cfdb-autocomplete"),
        select: selectAutocompleteForm
    };$input.autocomplete(options);
    };

    var getPage = function () {
        var $a = $(this);

        var options = {
            url: $a.attr("href"),
            data: $("form").serialize(),
            type: "get"
        };$.ajax(options).done(function (data) {
            var target = $a.parents("div.pagedList").attr("data-cfdb-target");$(target).replaceWith(data);
        });
        return false;

    };

    // select form and call submitfunction
    $("form[data-cfdb-ajax='true']").submit(ajaxFormSubmit);
    // find input and for each call function$("input[data-cfdb-autocomplete]").each(createAutocomplete);$(".body-content").on("click", ".pagedList a", getPage);

});

modalform.js:

$(function () {$.ajaxSetup({ cache: false });$("a[data-modal]").on("click", function (e) {

        // hide dropdown if any
        $(e.target).closest('.btn-group').children('.dropdown-toggle').dropdown('toggle');$('#myModalContent').load(this.href, function () {$('#myModal').modal({
                /*backdrop: 'static',*/
                keyboard: true
            }, 'show');

            bindForm(this);
        });

        return false;
    });


});

function bindForm(dialog) {
    
    $('form', dialog).submit(function () {$.ajax({
            url: this.action,
            type: this.method,
            data: $(this).serialize(),
            success: function (result) {
                if (result.success) {$('#myModal').modal('hide');
                    //Refresh$('#replacetarget').load(result.url);
                    //location.reload();
                } else {$('#myModalContent').html(result);
                    bindForm();
                }
            }
        });
        return false;
    });
}

let me know if you need more info. Thanks :)

 


Viewing all articles
Browse latest Browse all 5678

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>