Bootstrap模態對話框無法通過javascript更新嗎？

Question

我是引導程序的新手，遇到的問題是在用戶調用對話框之前，我無法更新模式內的文本框。 我已經嘗試了一切，從通過javascript甚至通過服務器端語言c＃更新文本框，但似乎沒有任何內容可以更新內部的文本框。

這是我的代碼：

<head id="Head1" runat="server">

    <script type="text/javascript">

    function func(name)
        {

        //triggered when modal is about to be shown
        $('#edit').on('show.bs.modal', function (e) {

            //get data-id attribute of the clicked element
            var bookId = $(e.relatedTarget).data('id');

            //populate the textbox
            $(e.currentTarget).find('input[name="mohsintext"]').val(bookId);
        });
            }
        </script>
</head>
<body>






    <!--/#middle-->
     <section id="middle">

    <div class="container">
    <div class="row">


        <div class="col-md-12">
        <h4>Your Cases</h4>
        <div class="table-responsive">

              <table id="mytable" class="table table-bordred table-striped">

                   <thead>

                   <th><input type="checkbox" id="checkall" /></th>
                   <th>Case Title</th>
                    <th>Case Description</th>
                     <th>Origin</th>
                     <%--<th>Email</th>
                     <th>Contact</th>--%>
                      <th>Edit</th>

                       <th>Delete</th>
                   </thead>
    <tbody>


 <asp:Repeater ID="repPeople" runat="server" >
    <ItemTemplate>

    <tr>
    <td><input type="checkbox" class="checkthis" /></td>
    <td><%# Eval("Title") %></td>
    <td><%# Eval("Description") %></td>
    <td><%# Eval("Origin") %></td>
    <%--<td><%# Eval("First Name") %></td>
    <td><%# Eval("First Name") %></td>--%>
    <td><p data-placement="top" data-toggle="tooltip" title="Edit"><asp:LinkButton id="LinkButton1" runat="server" data-id="ISBN-001122" class="open-AddBookDialog btn btn-primary btn-xs" data-title="Edit" data-toggle="modal" data-target="#edit" > <span class="glyphicon glyphicon-pencil"></span></asp:LinkButton></p></td>
    <td><p data-placement="top" data-toggle="tooltip" title="Delete"><asp:LinkButton ID="LinkButton2" runat="server" class="btn btn-danger btn-xs" data-title="Delete" data-toggle="modal" data-target="#delete" ><span class="glyphicon glyphicon-trash"></span></asp:LinkButton></p></td>
    </tr>

   </ItemTemplate>
</asp:Repeater>




    </tbody>


</table>


            </div>

        </div>
    </div>
</div>


<div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">
      <div class="modal-dialog" id="my_modal">
    <div class="modal-content">
          <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
        <h4 class="modal-title custom_align" id="Heading">Edit Your Detail</h4>
      </div>
          <div class="modal-body">
          <div class="form-group">
        <asp:TextBox runat="server" class="form-control " type="text" id="mohsintext" name="mohsintext"/>
        </div>
        <div class="form-group">

        <input class="form-control " type="text" placeholder="Irshad"/>
        </div>
        <div class="form-group">
        <textarea rows="2" class="form-control" placeholder="CB 106/107 Street # 11 Wah Cantt Islamabad Pakistan"></textarea>
    <div id="myDialogText"></div>

        </div>
      </div>
          <div class="modal-footer ">
        <button type="button" class="btn btn-warning btn-lg" style="width: 100%;"><span class="glyphicon glyphicon-ok-sign"></span> Update</button>
      </div>
        </div>
    <!-- /.modal-content --> 
  </div>
      <!-- /.modal-dialog --> 

   </div>





    <div class="modal fade" id="delete" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">
      <div class="modal-dialog">
    <div class="modal-content">
          <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
        <h4 class="modal-title custom_align" id="H1">Delete this entry</h4>
      </div>
          <div class="modal-body">

       <div class="alert alert-danger"><span class="glyphicon glyphicon-warning-sign"></span> Are you sure you want to delete this Record?</div>

      </div>
        <div class="modal-footer ">
        <button type="button" class="btn btn-success" ><span class="glyphicon glyphicon-ok-sign"></span> Yes</button>
        <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> No</button>
      </div>
        </div>
    <!-- /.modal-content --> 

  </div>
      <!-- /.modal-dialog --> 
    </div>
     </section>




    <!-- Back To Top -->
    <script type="text/javascript">
        jQuery(document).ready(function () {
            var offset = 300;
            var duration = 500;
            jQuery(window).scroll(function () {
                if (jQuery(this).scrollTop() > offset) {
                    jQuery('.back-to-top').fadeIn(duration);
                } else {
                    jQuery('.back-to-top').fadeOut(duration);
                }
            });

            jQuery('.back-to-top').click(function (event) {
                event.preventDefault();
                jQuery('html, body').animate({ scrollTop: 0 }, duration);
                return false;
            })
        });
</script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#mytable #checkall").click(function () {
                    if ($("#mytable #checkall").is(':checked')) {
                        $("#mytable input[type=checkbox]").each(function () {
                            $(this).prop("checked", true);
                        });

                    } else {
                        $("#mytable input[type=checkbox]").each(function () {
                            $(this).prop("checked", false);
                        });
                    }
                });

                $("[data-toggle=tooltip]").tooltip();
            });
</script>



    </form>
</body>
</html>

我已經使用了幾種javascript方法來嘗試更新textbox元素，但是沒有任何效果。 請注意，我已經刪除了一些不必要的代碼以使其更具可讀性，例如，引導CSS文件的鏈接等。

Answer 1

將您的腳本放在文檔的底部...我認為jQuery試圖在呈現之前綁定#edit。 由於jQuery查詢DOM綁定事件，因此在嘗試綁定之前它必須存在。

Bootstrap模態對話框無法通過javascript更新嗎？

問題描述

1 個解決方案

解決方案1
0 2015-09-22 13:24:28

Bootstrap模態對話框無法通過javascript更新嗎？

問題描述

1 個解決方案

解決方案1 0 2015-09-22 13:24:28

解決方案1
0 2015-09-22 13:24:28