1

Tenho uma aplicação que utiliza Knockoutjs, porém quando salvo ele retorna algum erro o botão que utiliza o Knockutjs para e não funciona, só depois de atualizar a pagina ele volta funcionar corretamente, alguém sabe o que pode ser.

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!");
        }
6
  • Em uma pergunta assim, seria interessante você colocar seu código, onde ele está dando o erro, qual o erro que ele dá para que as pessoas entendam o que está acontecendo e conseguir te ajudar. 17/07/2017 às 11:51
  • Cara, provavelmente o evento do botão não está sendo chamado caso dê erro. Tente gerar o erro novamente e, após isso, chamar o evento do botão diretamente do console do seu navegador e verificar se volta a funcionar. Caso volte, jogue para uma função e chame ele no $(document).ready e no else que ele cai false e ocorre o problema. 17/07/2017 às 12:00
  • Mas como chama o evento do botão no console se está assim data-bind="click: AddInternalAuditRecordTopic"
    – Bruno H.
    17/07/2017 às 12:06
  • , porém estranhamente se eu tiro o "@section scripts", ele funciona só depois de da o erro
    – Bruno H.
    17/07/2017 às 12:12
  • Parece que seu script chama o evento nesse local: $("#addInternalAuditRecordTopic").live("click", function () { saveInternalAuditRecordTopic(); }); dentro do $(document).ready 17/07/2017 às 13:02

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .