【问题标题】:Submit only first time knockout.js and bootstrap modal仅提交第一次 knockout.js 和 bootstrap modal
【发布时间】:2014-01-15 15:22:21
【问题描述】:

我有问题,与 knockout.js 和引导模式有关。在按钮上单击我打开引导模式,用于创建新城市。然后我提交表单并保存在基础中。问题是因为提交只在第一次工作。之后它不起作用。 这是它的样子

html文件

> <!-- Modal add new city
>      ==================================================-->
>     <div class="modal fade" id="addCity" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
>       <div class="modal-dialog">
>         <form data-bind="submit: onSubmit">
>         <div class="modal-content">
>           <div class="modal-header">
>             <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
>             <h4 class="modal-title">Dodaj novi grad</h4>
>           </div>
>           <div class="modal-body">
>             <div class="input-group">
>               <span class="input-group-addon">Ime grada</span>
>               <input type="text" class="form-control" placeholder="Ime grada" data-bind="value : city_name">
>           </div
>     
>     
>         </div>
>           <div class="modal-footer">
>             <button type="button" class="btn btn-default" data-dismiss="modal">Zatvori</button>
>             <button type="submit" class="btn btn-success">Sacuvaj</button>
>           </div>
>         </div><!-- /.modal-content -->
>         </form>
>       </div><!-- /.modal-dialog -->
>     </div><!-- /.modal -->

js文件

    var viewModel = ko.computed(function()
{
    var self = this;

        var cities = getAllCities();
    self.cities = ko.observableArray(cities);



    self.city_name = ko.observable();
    self.logo_path = ko.observable();

    //add new city
    self.onSubmit = function() 
    {

        var data = JSON.stringify(
            {
                city_name : self.city_name(), logo_path : self.logo_path()        
            }); // prepare request data
        var response =  ajaxJsonPost("/services/private_service/add_city", data, false, false);
        if (response.status === ResponseStatus.SUCCESS) {
        $("#cityName").attr("value", "");
        $('#addCity').modal('hide');
        self.cities.push(data);
        } else {
            //handle error
        }
    };

});

ko.applyBindings(new viewModel());

【问题讨论】:

    标签: javascript html twitter-bootstrap knockout.js bootstrap-modal


    【解决方案1】:

    你能不能只做一个 ajax 请求而不是一个表单提交?比如:

    $.ajax({
        url: "/services/private_service/add_city",
        data: data,
        success: function (data) {
            $("#cityName").attr("value", "");
            $('#addCity').modal('hide');
            self.cities.push(data);
        }
    });
    

    除非您为此方法编写过脚本,否则我对“ajaxJsonPost()”并不熟悉。

    【讨论】:

    • 是的,ajaxJsonPost 是将 JSON 发送到休息服务的方法。我认为问题在于当我尝试隐藏模式时。他只是被隐藏了,下次我触发模态时,它与我第一次触发的模态相同。提交后我不知道如何销毁modal,而不仅仅是隐藏他。
    • 那么在 self.cities.push(data) 之后你能不能不写:self.city_name(null)。你不需要破坏你的模态,你只想清除你的 observables。
    • 您还试图清除标记中不存在的#city_name 元素。
    • 对不起,我在这里复制了错误的代码,我已经用#new_city_name 修复了它。使用 self.new_city_name,输入已重置,但我仍然有同样的问题。当我删除 $('#addCity').modal('hide');一切正常,除了模式保持打开状态。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-02-26
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多