HTML JS / JQuery:按钮单击后存储参数以将其用于以后的功能

时间:2018-03-27 20:59:31

标签: javascript jquery html

自从过去两天以来,我通过实施一种简单的方法让用户采取以下步骤而感到困惑:

  1. 用户有一个包含条目的表
  2. 他可以在编辑按钮上单击每行
  3. 打开模态视图
  4. 用户输入值
  5. 点击保存按钮,这些值加上表中的id将转移到我的控制器
  6. 到目前为止我所取得的成就是:

    我可以在用户点击修改之后在模态窗口打开之前过滤掉点击的条目

    $(this).closest('tr').find('.userID').text()
    

    $(button.relatedTarget).attr('id')
    

    但是我无法将必要的userID移交给我的updateModal()JS函数。我需要我的Spring MVC控制器的ID。

    当我尝试在updateUser()函数中获取这些参数时,它们就消失了。因此,在用户点击编辑按钮和显示模式之间我丢失了这些信息。它们仅在单击编辑按钮后才能直接使用,但不能在以后使用。

    我需要的是在模式视图打开后使这些参数可用的方法,以及当用户点击发送时我可以将userID发送到控制器。< / p>

    我找到了这个选项:

    localStorage.setItem('key', 'value'); 
    

    但它没有帮助我,因为我的updateUser函数不知道模态正在使用什么ID。

    这是我的JS:

    function updateUser() {
        alert("try getting parameter");
        alert($(this).closest('tr').find('.userID').text()); //not working HELP pls
        alert($(button.relatedTarget).attr('id')); //not working too
        alert("success?");
        var newValues = {};
        newValues["newName"] = $("#newName").val();
        newValues["newAge"] = $("#newAge").val();
        var userID = "???";
    
        $.ajax({
            type: "POST",
            contentType: "application/json",
            url: "/api/edit/" + userID,
            data: JSON.stringify(newValues),
            dataType: 'json',
            timeout: 100000,
            success: function (data) {
                console.log("SUCCESS: ", data);
                display("SUCCESS");
                resultObj = data.result;
            },
            error: function (e) {
                console.log("ERROR: ", e);
                display("ERROR");
                //display(2);
            },
            done: function (e) {
                console.log("DONE");
                display("DONE");
                enableSearchButton(true);
            }
        });
    }
    

    这是我的HTML:

    <!--- start table -->
    <div class="container">
        <br>
        <h3>Overview</h3>
        <br>
    
        <div class="container" id="modal-submit">
            <div class="col-12">
                <table class="table table-hover">
                    <thead>
                    <tr>
                        <th scope="col">Name</th>
                        <th scope="col">Age</th>
                        <th scope="col">ID</th>
                    </tr>
                    </thead>
                    <tbody>
                    <!--/*@thymesVar id="productList" type="java.util.List"*/-->
                    <tr id="person" th:each="person : ${elementList}">
    
                        <td th:text="${person.getName()}" id="username"></td>
                        <!--/*@thymesVar id="getTradableBTC" type="java.lang.Double"*/-->
                        <td th:text="${person.getAge()}" th:id="${person.getName()+person.getAge()}" id="age"></td>
                        <!--/*@thymesVar id="getTop" type="java.lang.Double"*/-->
                        <td th:text="${person.getId()} " th:id="${person.getName()+person.getId()}" class="userID"></td>
    
                        <td>
                            <div class="btn-toolbar" role="toolbar">
                                <!-- Button trigger modal -->
                                <div class="btn-group mr-2" role="group" aria-label="First group">
                                    <button type="button" class="btn btn-outline-primary btn-sm" data-toggle="modal"
                                            data-target="#myModal" data-th-id="${person.getId()}">
                                        Edit
                                    </button>
                                </div>
                                <div class="btn-group mr-2" role="group" aria-label="Second group">
                                    <button type="button" class="btn btn-outline-danger btn-sm" id="delete">Delete
                                    </button>
                                </div>
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <button class="btn btn-primary" type="button" id="addElement">Add Element</button>
            <button class="btn btn-light" type="button" id="DeleteAll">Delete all Elements</button>
        </div>
    </div>
    <br>
    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog"
         data-keyboard="false" data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Change data</h5>
                    <button type="button" class="close" data-dismiss="modal"
                            aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                </div>
                <div class="row">
                    <div class="col-sm-6">
                        <div class="modal-body">
                            <input name="referencia" id="newName" type="text"
                                   class="form-control"
                                   placeholder="Enter new name">
                            <br>
                            <input name="referencia" id="newAge" type="text"
                                   class="form-control"
                                   placeholder="Enter new age">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light"
                            data-dismiss="modal">Discard
                    </button>
                    <button type="button" class="btn btn-primary"
                            onclick="updateUser()">Save
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    

1 个答案:

答案 0 :(得分:1)

您问题的一个可能解决方案是

  • 当用户点击表格行时,获取相应行的用户ID,即$(this).closest('tr').find('.userID').text()
  • 将您在上面检索到的用户ID存储到模型DOM

    var userId = $(this).closest('tr').find('.userID').text();
    $("#myModal").data('currentUserId', userId);
    
  • updateUser中从DOM获取用户ID。

    var userId = $("#myModal").data('currentUserId');
    

基本上,您需要将UserID存储在全局上下文中,一旦模型关闭为updateUser,您就可以访问它,并且将在不同的上下文中调用表行单击两者。

此外,我认为您需要阅读此https://stackoverflow.com/a/3127440/2509344以了解this在JavaScript中的工作原理。