Knockoutjs code to work after returning from Controller

Asked

Viewed 52 times

1

I have an application that uses Knockoutjs, but when saved it returns some error the button that uses Knockutjs to and does not work, only after updating the page it comes back working properly, someone knows what can be.

csHtml

@model Entities.InternalAuditRecord
@using Entities
@using UI.Models
@using UI.Extensions
@using UI.HtmlHelpers
@{
    ViewBag.Title = "Registro de Auditoria Interna";
    Layout = IsAjax ? null : "~/Views/Shared/_Master.cshtml";
    var canWrite = User.CanWrite(AuditingPath.InternalAuditRecord);
}

@section scripts{

    <script type="text/html" id="internalAuditRecordTopicTemplate">
        <section class="internalAuditRecordTopicDetail with-margin" data-index="${$index}">
            <input type="hidden" name="InternalAuditRecordTopics[${$index}].Request" value="${Request}" />
            <input type="hidden" name="InternalAuditRecordTopics[${$index}].Name" value="${Name}" />
            <input type="hidden" name="InternalAuditRecordTopics[${$index}].Comformity" value="${Comformity}" />
            <input type="hidden" name="InternalAuditRecordTopics[${$index}].NonComformityType" value="${NonComformityType}" />
            <input type="hidden" name="InternalAuditRecordTopics[${$index}].OM" value="${OM}" />
            <input type="hidden" name="InternalAuditRecordTopics[${$index}].Observation" value="${Observation}" />
            <input type="hidden" name="InternalAuditRecordTopics[${$index}].Evidences" value="${Evidences}" />
            <input type="hidden" name="InternalAuditRecordTopics[${$index}].InternalAuditRecordID" value="${InternalAuditRecordID}" />
            <input type="hidden" name="InternalAuditRecordTopics[${$index}].InternalAuditRecordTopicID" value="${InternalAuditRecordTopicID}" />
            <input type="hidden" name="InternalAuditRecordTopics[${$index}].Order" value="${$index}" />
            <fieldset class="grey-bg relative internalAuditRecordTopic">
                <ul class="mini-menu visible">
                    {{if $parent.InternalAuditRecordTopics().length > 1 }}
                    {{if $index() > 0}}
                    <li>@Html.UpIcon(null, new { data_bind = "click: $parent.upInternalAuditRecordTopic", @Title = "Subir Item" })</li>
                    {{/if}}
                    {{if $index() < $parent.InternalAuditRecordTopics().length - 1}}
                    <li>@Html.DownIcon(null, new { data_bind = "click: $parent.downInternalAuditRecordTopic", @Title = "Descer Item" })</li>
                    {{/if}}
                    {{/if}}
                    <li>@Html.DeleteIcon(null, new { @Title = "Remover Item", data_bind = "click: $parent.removeInternalAuditRecordTopic" })</li>
                </ul>
                <legend>
                    @*<a href="#" data-bind="text: Name"></a>*@
                    <span>
                        <input type="text" style="width:300px;" class="internalAuditRecordTopicRequest" placeholder="Requisito" data-bind="value:Request" /> 
                    </span>
                </legend>
                <table class="tg">
                    <tr>
                        <td class="tg-yw4l" align="right"><span class="label" style="color:black">Registros da Auditoria: </span></td>
                        <td><textarea cols="65" rows="10" style="width:400px;" class="internalAuditRecordTopicName" placeholder="Nome do tópico" data-bind="value:Name" /></td>
                    </tr>
                    <tr>
                        <td  class="tg-yw4l" align="right"><span class="label" style="color:black">Não Conformidade: </span></td>
                        <td  class="tg-yw4l"><span id="span_finished">
                                <select data-bind="value: NonComformityType">
                                    <option value="" disabled selected>Escolher</option>
                                    <option value="2">Maior</option>
                                    <option value="1">Menor</option>
                                </select>
                            </span>
                        </td>
                    </tr>
                    <tr>
                        <td class="tg-yw4l" align="right"><span for="active" class="label" style="color:black">OM: </span></td>
                         <td><span><input type="checkbox" value="1" data-bind="checked:OM" class="float-left" /></span></td>
                    </tr>
                    <tr>
                        <td class="tg-yw4l" align="right"><span class="label" style="color:black">Observações: </span></td>
                        <td><textarea cols="65" rows="10" style="width:400px;" class="internalAuditRecordTopicName" placeholder="Observações" data-bind="value:Observation" /></td>
                    </tr>
                    <tr>
                        <td class="tg-yw4l" align="right"><span for="active" class="label" style="color:black">Comforme? </span></td>
                        <td><input type="checkbox" value="1" data-bind="checked:Comformity" class="float-left" /></td>
                    </tr>
                    <tr>
                        <td class="tg-yw4l" align="right"><span class="label" style="color:black">Evidências: </span></td>
                        <td><textarea cols="65" rows="10" style="width:400px;" class="internalAuditRecordTopicName" placeholder="Evidências" data-bind="value:Evidences" /></td>
                    </tr>
                </table>

           </fieldset>
        </section>
        <hr />
    </script>


    <script>

        var InternalAuditRecordTopic = function (data) {
            var self = this;
            self.InternalAuditRecordTopicID = ko.observable(data.InternalAuditRecordTopicID);
            self.InternalAuditRecordID = ko.observable(data.InternalAuditRecordID);
            self.Name = ko.observable(data.Name);
            self.Order = ko.observable(data.Order);
            self.Request = ko.observable(data.Request);
            self.NonComformityType = ko.observable(data.NonComformityType);
            self.Comformity = ko.observable(data.Comformity);
            self.OM = ko.observable(data.OM);
            self.Observation = ko.observable(data.Observation);
            self.Evidences = ko.observable(data.Evidences);

            self.startPlaceHolders = function () {
                startPlaceHolders();
            };

        };

        var InternalAuditRecordTopicEmpty = {
            InternalAuditRecordTopicID: 0,
            InternalAuditRecordID: 0,
            Name:'',
            Order:9999,
            Request:'',
            NonComformityType:'',
            Comformity:'',
            OM:'',
            Observation:'',
            Evidences:'',
        };


        var InternalAuditRecord = function (data) {
            var self = this;
            self.InternalAuditRecordID = ko.observable(data.InternalAuditRecordID);
            self.Active = ko.observable(data.Active);
            self.Name = ko.observable(data.Name);
            self.InternalAuditRecordTopics = ko.observableArray();
            if (typeof (data.InternalAuditRecordTopics) == "object" && data.InternalAuditRecordTopics != null) {
                $.each(data.InternalAuditRecordTopics, function (index, value) {
                    self.InternalAuditRecordTopics.push(new InternalAuditRecordTopic(value));
                });
            }

            self.startPlaceHolders = function () {
                startPlaceHolders();
            };

            self.AddInternalAuditRecordTopic = function (a, event) {
                var lastOrderInternalAuditRecordTopic = self.InternalAuditRecordTopics().length - 1;
                var newInternalAuditRecordTopic = InternalAuditRecordTopicEmpty;
                newInternalAuditRecordTopic.Order = lastOrderInternalAuditRecordTopic;
                self.InternalAuditRecordTopics.push(new InternalAuditRecordTopic(newInternalAuditRecordTopic));
                startPlaceHolders();
            };

            self.InternalAuditRecordTopics.sort(function (a, b) {
                return (a.Order() > b.Order()) ? 1 : -1;
            });

            self.downInternalAuditRecordTopic = function (a, event) {
                var index = self.InternalAuditRecordTopics.indexOf(a);
                if (index < self.InternalAuditRecordTopics().length - 1) {
                    $(event.target).parent().hideTip();
                    var removed = self.InternalAuditRecordTopics.splice(index, 1);
                    removed = ko.toJS(removed)[0];
                    self.InternalAuditRecordTopics.splice(index + 1, 0, new InternalAuditRecordTopic(removed));
                }
            }

            self.upInternalAuditRecordTopic = function (a, event) {
                var index = self.InternalAuditRecordTopics.indexOf(a);
                if (index >= 1) {
                    $(event.target).parent().hideTip();
                    var removed = self.InternalAuditRecordTopics.splice(index, 1);
                    removed = ko.toJS(removed)[0];
                    self.InternalAuditRecordTopics.splice(index - 1, 0, new InternalAuditRecordTopic(removed));
                }
            }

            self.removeInternalAuditRecordTopic = function (a, event) {
                var index = self.InternalAuditRecordTopics.indexOf(a);
                $(event.target).parent().hideTip();
                self.InternalAuditRecordTopics.splice(index, 1);
            }

            self.editInternalAuditRecordTopic = function (a, event) {
                var index = self.InternalAuditRecordTopics.indexOf(a);
                $(event.target).parent().hideTip();
                internalAuditRecordTopicForm(index, a.Name());
            }
        };

        ko.cleanNode($("form#internalAuditRecordRegisterForm"));
        var viewModel = new InternalAuditRecord(@Html.Raw(Model.ToJson()));
        ko.applyBindings(viewModel, document.getElementById("internalAuditRecordRegisterForm"));

        function internalAuditRecordTopicForm() {
            var internalAuditRecordIdx = arguments[0] || -1;
            var name = arguments[1] || '';
            var internalAuditRecordID = $("#internalAuditRecordRegisterForm #InternalAuditRecordID:first").val();
            var data = {
                InternalAuditRecordID: internalAuditRecordID,
                Order: internalAuditRecordIdx,
                Name: name,
            }

            $.ajax({
                type: 'post',
                url: "/Exam/InternalAuditRecordTopicForm",
                type: 'post',
                cache: false,
                data: data,
                success: function (res) {
                    $.modal({
                        title: "Cadastro de Item de InternalAuditRecordTopicEntryário",
                        content: res,
                    });
                }
            });
        }

        function attachInternalAuditRecordTopic(obj) {
            if (obj.Order == -1)
                viewModel.InternalAuditRecordTopics.push(new InternalAuditRecordTopic(obj));
            else
                viewModel.InternalAuditRecordTopics()[obj.Order].Name(obj.Name);
            $(".internalAuditRecordTopicDetail").applyTemplateSetup();
        }

        function saveInternalAuditRecordTopic() {
            var itemName = $("#internalAuditRecordTopicRegisterForm #Name").val();
            var idx = $("#internalAuditRecordTopicRegisterForm #Order").val();
            var internalAuditRecordID = viewModel.InternalAuditRecordID();

            var data = {
                InternalAuditRecordID: internalAuditRecordID,
                Name: itemName,
                Order: idx,
            }

            $.ajax({
                type: 'post',
                url: '/Exam/SaveInternalAuditRecordTopic',
                data: data,
                cache: false,
                async: false,
                success: function (res) {
                    if (typeof (res) == "object") { //success
                        attachInternalAuditRecordTopic(res.detail);
                        $.modal.current.closeModal();
                    }
                    else { //fail
                        $.modal.current.setModalContent(res, true);
                    }
                }
            });
        }

        function validationFields() {

            //Namne
            if ($("#Name").val() == "") {
               $("#Name").addClass(validationClassErrosType.input)
            }
            validationCheckImage($("#Name"), $("#Name").parent());


            $(".internalAuditRecordTopic").each(function () {
                var internalAuditRecordTopicName = $(this).find(".internalAuditRecordTopicName");
                if (internalAuditRecordTopicName.val() == "") {
                    internalAuditRecordTopicName.addClass(validationClassErrosType.input);
                }
                validationCheckImage(internalAuditRecordTopicName, internalAuditRecordTopicName.parent());
            });
        }

        function saveInternalAuditRecord() {
            removeAllPlaceHolder();
            clearErrorsMessages();
            responsibles = "";
            $("select#Responsibles option").each(function () {
                responsibles += $(this).val() + ",";
            });
            auditors = "";
            $("select#Auditors option").each(function () {
                auditors += $(this).val() + ",";
            });
            $.ajax({
                url: "/InternalAuditRecord/SaveInternalAuditRecord",
                type: "post",
                data: $("form#internalAuditRecordRegisterForm").serialize()+"&idResponsibles="+responsibles+"&idAuditors="+auditors,
                success: function (res) {
                    if (typeof (res) == "object") {
                        if (res.success) {
                            window.location.replace("/InternalAuditRecord/InternalAuditRecord");
                        }
                        else {
                            flashMessage();
                        }
                    }
                    else {
                        $("article.container_12").replaceWith(res);

                        validationCheckImage("#Name", "#span_location");
                        //$("#Name").addClass("input-validation-error");

                        loadSwitches();
                        $('html, body').animate({ scrollTop: 0 }, 'fast');
                    }
                }, error: function () {
                    $("#messages").html("<p class=\"message error no-margin\" style=\"margin-bottom:10px !important;\">Ocorreu um erro durante a gravação dos dados.</p>");
                }

            });
        }

        function cancelInternalAuditRecord() {
            window.history.back()
        }

        $(document).ready(function () {
            $("#addInternalAuditRecordTopic").live("click", function () {
                saveInternalAuditRecordTopic();
            });

            $("#saveInternalAuditRecord").live("click", function () {
                saveInternalAuditRecord();
            });

            $("#cancelInternalAuditRecord").live("click", function () {
                cancelInternalAuditRecord();
            });

            $(".addOption").live("click", function () {
            });

            $(".cancelOption").on("click", function () {
                cancelChangesOption($(this));
            })

            $("#closeModal").live("click", function () {
                $.modal.current.closeModal();
            });
        });
    </script>
}


@Scripts.Render("~/bundles/internalAuditRecordForm")

<article class="container_12">
    <section class="grid-12">
        <div class="block-border">
            <div class="block-content clearfix" id="supplierFormDiv">
                <h1>Cadastro Auditoria Interna</h1>
                @if (Model.Detail)
                {
                    <script type="text/javascript">
                        $(function () {
                            $('input, select, textarea').attr('disabled', 'disabled');
                        });
                    </script>
                }
                <form class="form" id="internalAuditRecordRegisterForm" style="width: 750px; margin-left: auto; margin-right: auto;" enctype="multipart/form-data">
                    @Html.HiddenFor(m => m.InternalAuditRecordID)
                    <fieldset>
                        <div id="messages">@Html.ValidationSummary()</div>
                        <div class="field-wrap inline-label">  
                            <label for="" style="text-align:right;">Data da Auditoria: </label>
                            <span id="span_auditdate" class="input-type-text">
                                @Html.TextBoxFor(s => s.AuditDate, new { @class = "hasDatePick" }).Enable(canWrite)
                                @if (canWrite)
                                {
                                    @Html.CalendarIcon("#", new { id = "AuditDateIcon" })
                                }
                            </span>
                            <div id="datepickTargetExperience"></div>
                        </div>
                        <div class="field-wrap inline-label">
                            <label for="" style="text-align:right;">Descrição: </label>
                            <span id="span_location" @*class="input-type-text"*@>
                                @Html.TextBoxFor(s => s.Name, new { placeholder = "Descrição", maxlength = "256"}).Enable(canWrite)
                            </span>
                        </div>
                        <div class="field-wrap inline-label">
                            <label for="" style="text-align:right;">Processo: </label>
                            <span id="span_location" class="input-type-text">
                                @Html.TextBoxFor(s => s.Process, new { placeholder = "Processo", maxlength = "256" }).Enable(canWrite)
                            </span>
                        </div>

                        <div class="field-wrap inline-label clearfix">
                            <label for="AbsentID" style="text-align:right;">Auditores: </label>
                            <span id="span_sectors">
                                @Html.DropDownListFor(e => e.Auditors, ((IEnumerable<SelectListItem>)ViewData["auditorsSelection"]), new { multiple = "multiple", @class = "float-left multiple-drop-down" }).Enable(canWrite)
                            </span>
                            @if (canWrite)
                            {
                                @Html.AddIcon("#", new { onclick = "addAuditors(); return false;", @Style = "margin: 0 10px 0 5px;" })
                                @Html.RemoveIcon("#", new { onclick = "removeAuditors(); return false;" })
                            }
                        </div>

                        <div class="field-wrap inline-label clearfix">
                            <label for="AbsentID" style="text-align:right;">Responsáveis: </label>
                            <span id="span_sectors">
                                @Html.DropDownListFor(e => e.Responsibles, ((IEnumerable<SelectListItem>)ViewData["responsiblesSelection"]), new { multiple = "multiple", @class = "float-left multiple-drop-down" }).Enable(canWrite)
                            </span>
                            @if (canWrite)
                            {
                                @Html.AddIcon("#", new { onclick = "addResponsibles(); return false;", @Style = "margin: 0 10px 0 5px;" })
                                @Html.RemoveIcon("#", new { onclick = "removeResponsibles(); return false;" })
                            }
                        </div>

                        <div id="internalAuditRecordTopicsPanel" class="with-margin" data-bind="visible: InternalAuditRecordTopics().length > 0">
                            <hr />
                            <div data-bind="template: { name: 'internalAuditRecordTopicTemplate', foreach: InternalAuditRecordTopics, afterRender: startPlaceHolders }"></div>
                        </div>

                        <button type="button" data-bind="click: AddInternalAuditRecordTopic" style="cursor: pointer;">Novo Tópico</button>
                    </fieldset>
                    <div class="float-right">
                        @if (Model.Detail == false)
                        {
                            @Html.Button("Salvar", canWrite, new { type = "submit", onclick = "saveInternalAuditRecord();" })
                        }
                        @Html.Button("Cancelar", new { @class = "red", onClick = "cancelInternalAuditRecord()" })
                    </div>
                </form>
            </div>
        </div>
    </section>

</article>
<script type="text/javascript">
    $(document).ready(function () {
        $("#Process").click(function (event) {
            event.preventDefault();
            title = "Processo";
            element = $("input#ProcessID");
            textbox = $("input#Process");
            var title, element, textbox;

            var modal = $(this).getModalWindow();

            $.ajax({
                url: "/Process/ProcessSelection",
                datatype: "html",
                success: function (data) {
                    modal.hide();
                    $.modal({
                        content: data,
                        title: title,
                        maxHeight: 480,
                        width: 660,
                        buttons: {
                            "Selecionar": function (wind) {
                                selectUser(element, textbox);
                                modal.show();
                                wind.closeModal();
                            },
                            "Cancelar_red": function (wind) { modal.show(); wind.closeModal(); }
                        },
                        onClose: function () {
                            modal.show();
                        }
                    });
                },
                error: function () {
                    alert("Não foi possível completar a requisição");
                }
            });

        });          

    }

);
    function selectUser(element, textbox) {
        var idUser = $("input[name='inputName']:checked").val();
        var name = $("input[name='inputName']:checked").attr("data-text");
        element.val(idUser);
        textbox.val(name);
    }


</script>

Controller

public ActionResult SaveInternalAuditRecord(InternalAuditRecord criticalAnalysisRecord, string idResponsibles, string idAuditors)
        {


            SetViewData(idResponsibles, idAuditors);

            List<User> usersSelectionList = new List<User>();
            if (!string.IsNullOrWhiteSpace(idResponsibles)) usersSelectionList = idResponsibles.TrimEnd(',').Split(',').Select(x => userRepository.GetById(int.Parse(x))).ToList();
            foreach (User user in usersSelectionList) criticalAnalysisRecord.Responsibles.Add(user);

            usersSelectionList = new List<User>();
            if (!string.IsNullOrWhiteSpace(idAuditors)) usersSelectionList = idAuditors.TrimEnd(',').Split(',').Select(x => userRepository.GetById(int.Parse(x))).ToList();
            foreach (User user in usersSelectionList) criticalAnalysisRecord.Auditors.Add(user);
            if (!ModelState.IsValid)
            {
                return PartialView("InternalAuditRecordForm", criticalAnalysisRecord);
            }

            try
            {
                criticalAnalysisRecordRepository.Save(criticalAnalysisRecord);
            }
            catch (Exception )
            {
                var view = criticalAnalysisRecord.InternalAuditRecordID == 0 ? "New" : "Edit";
                return Json(new { success = false }).Error("Ocorreu um erro durante a solicitação.");
            }
            return Json(new { success = true }).Success("A ata foi cadastrada com sucesso!");
        }
  • In such a question, it would be interesting for you to put your code, where it is making the mistake, what error it gives people to understand what is happening and be able to help you.

  • Dude, the button event is probably not being called in case of an error. Try generating the error again and after that, call the button event directly from your browser console and check if it will work again. If it comes back, throw it to a function and call it in $(Document). ready and in Else it drops false and the problem occurs.

  • But as you call the button event on the console if it’s data-bind="click: Addinternalauditrecordtopic"

  • , but strangely if I take the "@Section scripts", it works only after the error

  • It seems that your script calls the event at this location: $("#addInternalAuditRecordTopic"). live("click", Function() { saveInternalAuditRecordTopic(); }); within $(Document). ready

  • I took that line made no difference continues the same way

Show 1 more comment
No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.