JQuery引导模式窗口以某种方式重载/清除Ruby on Rails项目中的父字段

JQuery Bootstrap Modal Window somehow reload/clears the parent fields in Ruby on Rails project

本文关键字：Rails on Ruby 清除 项目 字段 重载 模式 窗口 方式 JQuery      更新时间：2023-09-26

我的问题是，当点击OK在模态窗口，去javascript函数在模态会重新加载或清除父字段?

下面是用例:1. 在父名称表单输入中输入名称字符串2. 点击测试模态按钮3.出现一个模态窗口4. 点击模态窗口"OK"按钮。(有了取消按钮，这不是问题)5. 清除父名称输入。可能父节点被重新加载了

我已经创建了一个简单的rails项目与生成的脚手架名称:字符串。没什么特别的，只是启用了bootstrap js和css。https://github.com/axilaris/bootstrapmodal/blob/master/app/assets/javascripts/application.jshttps://github.com/axilaris/bootstrapmodal/blob/master/app/assets/stylesheets/application.css

然后，我将这段代码插入_form.html。你可以在这里查看:https://github.com/axilaris/bootstrapmodal/blob/master/app/views/posts/_form.html.erb 

<div id="windowCreateInvoiceProductDialog" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="windowTitleLabel" aria-hidden="true">
            <div class="modal-header">
                <a href="#" class="close" data-dismiss="modal">&times;</a>
                <h3>Please enter a new product</h3>
                </div>
            <div class="modal-body">
                <div class="divDialogElements">
                    Code:<input class="xlarge" id="xlInput" name="modal_code" type="text" />
                    <br>
                    Name:<input class="xlarge" id="xlInput" name="modal_name" type="text" />
                    <br>
                    Description:<input class="xlarge" id="xlInput" name="modal_desc" type="text" />
                    <br>
                    Price:<input class="xlarge" id="xlInput" name="modal_price" type="text" />
                    </div>
                </div>
            <div class="modal-footer">
                <a href="#" class="btn" data-dismiss="modal">Cancel</a>
                <a href="#" class="btn btn-primary" onclick="okClicked ();">OK</a>
            </div>
    </div>
        <div class="divButtons">
            <a data-toggle="modal" href="#windowCreateInvoiceProductDialog" class="btn btn-primary btn-large">Test Modal Button</a>
            </div>          
    <script>
        $(document).ready(function() {
            $('#windowCreateInvoiceProductDialog').bind('show', function () {
            //  document.getElementById ("xlInput").value = document.title;
                });
            });
        function okClicked () {
            $('#windowCreateInvoiceProductDialog').modal('hide'); 
        //  document.title = document.getElementById ("xlInput").value;
        //  closeDialog ();
            };

        </script>

找到答案了!

而不是

<a href="#" class="btn btn-primary" >OK</a>

替换为

<button type="button" class="btn btn-primary" onclick="okClicked ();">Save changes</button>

就是这些，它很灵活，我可以隐藏，不隐藏，做一些事情

相关文章：