weixin_33701251 2015-02-16 14:01 采纳率: 0%
浏览 15

Bootstrap模态Ajax

I have a bootstrap table with data. Need to edit that data and set the value of some fields that are not displayed with the table.

I added a edit button to each row, and a modal form. The button is loading the modal form with no issue.

I have 3 questions.

  1. How to load the modal with the data for the row associated with the button.
  2. How to save the edited data in the modal when the save button is clicked.
  3. How to refresh the table after the modal closes when the save button was clicked.

I'm assuming that I'd be better off with a tutorial, but I'll be danged if I can find one.

The table code is just basic bootstrap table.

Current code for the button.

<button type="button" class="btn btn-warning btn-xs" data-toggle="modal" data-target="#checkInModal">Check In</button>

Current code for the modal. (for brevity sake i removed all the fields from the snippet.)

  <!-- Modal -->
    <div class="modal fade" id="checkInModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Check In</h4>
                </div>
                <div class="modal-body">
                    ...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>
  • 写回答

3条回答 默认 最新

  • weixin_33695450 2015-02-16 14:23
    关注

    When the edit button is clicked you would need to find the closest element relative to the button. In jQuery you can do it like this:

    <button type="button" data-toggle="modal" data-target="#myModal"></button>


$('.btn').on('click', function(){
   var $row = $(this).closest('tr');
})

    Then you can loop through all the cells and retrieve the contents and place them into the modal body area.

    var $row = $(this).closest('tr');

var $modalContentArea = $('#myModal .modal-body');

$row.find('td').each(function(){

   var $cell = $(this);

   var cellContents = $cell.text();

   $modalContentArea.append('<input type="text" value="' + cellContents +'"/>');

});

    The save button would need to be connected to an ajax request of some sort. You would need to construct a JSON object from the data collected. Then you could use the $get function of jQuery to send the request with the JSON object as the parameter.

    $('btn-primary').on('click', function(){

    $.get( "process.php", function( data ) {

        //The ajax callback can populate the table with the new values.

    })

});

    In the backend you would need to retrieve the JSON object, parse it, and save it to a database. Then return the new values to the ajax callback.

    评论

报告相同问题？

  • BootstrapModalDialog:使用 Bootstrap 模态对话框和 AJAX 的 Play 1.2.7 示例
    2021-07-04 14:08
    BootstrapModalDialog 是一个基于 Play 1.2.7 框架和 Bootstrap UI 库的示例项目，展示了如何在 Web 应用程序中利用模态对话框进行 AJAX 交互。Bootstrap 是一个流行的前端开发框架，它提供了丰富的 UI 组件，包括...
  • 解决bootstrap模态框数据缓存的问题方法
    2020-10-18 06:20
    Bootstrap模态框是一种非常流行的前端组件，它可以在当前页面上弹出一个浮动层，用于展示信息、完成用户交互等。然而，在使用模态框进行数据更新时，会遇到一个常见问题——数据缓存。当模态框用于新增和修改操作时...
  • AJAX +SpringMVC 实现bootstrap模态框的分页查询功能
    2020-10-20 13:36
    在本文中，我们将深入探讨如何使用AJAX与SpringMVC框架来实现Bootstrap模态框的分页查询功能。Bootstrap模态框（Modal）是一种在不离开当前页面的情况下展示额外信息的有效方式，而分页则是处理大量数据时常用的一种...
  • Bootstrap模态框调用功能实现方法
    2020-09-01 14:55
    Bootstrap模态框（Modal）是前端开发中常用的一种交互元素，用于在当前页面上弹出一个浮动窗口，显示额外的信息或进行操作。在Bootstrap框架中，模态框提供了丰富的样式和交互效果，使得开发者能够方便地创建弹出式...
  • bootstrap模态窗口美化特效
    2019-12-10 20:24
    Bootstrap模态窗口是网页设计中常用的一种...它不仅展示了Bootstrap模态窗口的可塑性，也体现了前端开发中对用户体验和视觉设计的重视。通过学习和应用这样的特效，开发者可以提升自己在网页设计和开发领域的专业技能。
  • 在iframe中使bootstrap的模态框在父页面弹出问题
    2020-08-29 18:51
    BootStrap模态框在iframe中弹出问题解决方法 Bootstrap是当前Web开发中最流行的前端框架之一，提供了许多实用的UI组件，包括模态框，但是当我们在使用iframe时，bootstrap的模态框就会出现问题，即模态框弹出的位置...
  • Bootstrap响应式模态登录框插件
    2019-07-30 10:45
    在项目文件中，`index.html`是主HTML文件，包含页面结构和Bootstrap模态框的基本元素。`js`目录可能包含jQuery库以及插件的JavaScript代码，用于实现模态框的动态行为。`css`目录则可能包含插件的定制样式，以确保...
  • bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能
    2020-10-20 09:37
    本篇内容将详细介绍如何在Bootstrap模态框（modal）中集成Bootstrap Validator插件，并通过JSP页面和Ajax提交功能来实现表单验证，确保用户提交的数据符合预期要求。 首先，为了使用Bootstrap Validator，我们需要...
  • Bootstrap进度条与AJAX后端数据传递结合使用实例详解
    2020-08-30 17:50
    首先，创建一个模态框，并在模态框中添加Bootstrap进度条组件。然后，使用AJAX技术发送POST请求到服务器，并将服务器返回的数据展示在页面上。最后，通过设置进度条的值，可以控制进度条的长度，提高用户体验。 ...
  • Bootstrap模态框的使用
    2022-06-06 17:26
    sunflower(*^ω^*)的博客 模态框使用，弹出模态框。
  • 没有解决我的问题, 去提问