The first time of detailed notes: learning the integration of ssm - day 7 of CRUD (2021-11-27) 5

The first time of detailed notes: learning the integration of ssm - day 7 of CRUD (2021-11-27) 5

28. Modification_ Create modify modal box for employee


Now let's do the function of this button.
requirement:
Click the Edit button of a line of employee information.
First, all the information of the employee will be displayed in the modal box.

Logic:
1. Click Edit
2. Pop up the user modified mode box (display user information)
3. Click the update button to complete the user's modification.

Operation:
1. Copy the new modal box of the employee written before

<div class="modal fade" id="empAddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <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">Employee addition</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="empAddModalForm">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">empName</label>
                        <div class="col-sm-10">
                            <input type="text" name="empName" class="form-control" id="empName_add_input" placeholder="empName">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">email</label>
                        <div class="col-sm-10">
                            <input type="text" name="email" class="form-control" id="email_add_input" placeholder="email@qq.com">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">gender</label>
                        <div class="col-sm-10">
                            <label class="radio-inline">
                                <input type="radio" name="gender" id="gender1_add_input" value="M" checked="checked"> male
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="gender" id="gender2_add_input" value="F"> female
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">deptName</label>
                        <div class="col-sm-4">
                            <select class="form-control" name="dId" id="dept_add_select">

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

                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">close</button>
                <button type="button" class="btn btn-primary" id="emp_save_btn">preservation</button>
            </div>
        </div>
    </div>
</div>

Modify the copied id value

<!-- Modal box of employee modification button -->
<div class="modal fade" id="empUpdateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <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">Employee addition</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="empUpdateModalForm">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">empName</label>
                        <div class="col-sm-10">
                            <input type="text" name="empName" class="form-control" id="empName_update_input" placeholder="empName">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">email</label>
                        <div class="col-sm-10">
                            <input type="text" name="email" class="form-control" id="email_update_input" placeholder="email@qq.com">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">gender</label>
                        <div class="col-sm-10">
                            <label class="radio-inline">
                                <input type="radio" name="gender" id="gender1_update_input" value="M" checked="checked"> male
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="gender" id="gender2_update_input" value="F"> female
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">deptName</label>
                        <div class="col-sm-4">
                            <select class="form-control" name="dId" id="dept_update_select">

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

                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">close</button>
                <button type="button" class="btn btn-primary" id="emp_update_btn">to update</button>
            </div>
        </div>
    </div>
</div>

Find the location of the Edit button written at that time:

2. Add unique identification to edit and delete buttons

3. Bind click event to edit button:
[note]:
It is useless to write a function directly in the script tag.

Why?
As soon as the page is loaded, these js codes will be executed to bind events to some components.
These data are obtained by sending an ajax request after the page is loaded.
Including these edit and delete buttons, they are only executed after binding events.
The $() method in jsp is executed when the page is loaded. It is equivalent to registering first. If this component is clicked, what will be done.

Current order:
1. First register the binding event for the Edit button
2. Then send an ajax request to generate an edit button while generating data.
This leads us to write this code now. When redeploying:
Click the Edit button, no response.

Viewing the front-end source code is also the reason why the click event is not bound to the Edit button.

terms of settlement:
1. When we create the button again, we bind the event.

2. Using the on() method of jQuery, click the bind button.
Even if: this component was created later. It doesn't matter. You can avoid the situation that there is no binding as mentioned above.
Current scenario:
Register the binding event of a button first.
Create the button after.


$(document).on("click",".edit_btn",function(){
        alert("edit");
    });

Now click the Edit button:

Now the click event of the Edit button has been successfully bound.

Click the Edit button:
1. Query the current employee information to be updated. Display employee information
2. Query department information and display the drop-down list of Department list.
3. Pop up modal box

1. Query department information.
It has been written before. Copy and paste directly.

//Check the Department data of DB and put it in the drop-down list
    function getDepts(ele){
        $(ele).empty();
        $.ajax({
            url:"${APP_PATH}/depts",
            type:"GET",
            success:function (result){
                // console.log(result);
                //{"code":100,"msg": "processing succeeded!", "extend": {depts ": [{" Id ": 1," deptname ":" development department "}, {" id":2,"deptName ":" test department "}]}}
                $.each(result.extend.depts,function (){
                    //Without passing parameters, use this to represent the current object
                    //Build option
                    var optionEle = $("<option></option>")
                                            .append(this.deptName)
                                            .attr("value",this.id);
                    optionEle.appendTo(ele);
                });
            }

        });
    }


29. Modification_ Employee information will be first.

After clicking the Edit button, all the information of the current employee to be modified will be displayed in the pop-up modal box.
Requirement: empName is displayed directly, not in the text box.
This means that the empName of an employee cannot be changed when you click Edit
How to implement: a field value in the form cannot be modified?

<p class="form-control-static">email@example.com</p>


Step 1:
Find out the employee information of the line you currently Click to edit.
So the point is: how do you get which element you are currently clicking on?
Idea: add a user-defined attribute in the Edit button to represent the employee id of the current line

Right click the Edit button to check:

2. Write the ajax request sent by the EmployeeController layer to the front end through the controller method.
According to the URI specification of RESTFul written before

Query employee:
Request path: / emp/{id} GET request

service layer:

Send an ajax request to query employee data in index.jsp.

Click the Edit button to see if the data of the employee with the current id will be queried
And print the data on the console.

After querying the data of the employee with the corresponding id, it needs to be filled in the pop-up mode box.
Which asks:
How is the gender radio box assigned?

//result represents the Msg object: query the Employee data of the specified id
var empData = result.extend.emp;
 $("#empUpdateModal input[name=gender]").val([empData.gender]);

How to assign a value to the multi selection box of a department?

$("#empUpdateModal select").val([empData.dId]);

Defined method: obtain the employee data in the row where the Edit button is clicked and fill it in the modal box.

function getEmp(id){
        $.ajax({
            url:"${APP_PATH}/emp/"+id,
            type:"GET",
            success:function (result){
                var empData = result.extend.emp;
                $("#empName_update_static").text(empData.empName);
                $("#email_update_input").val(empData.email);
                $("#empUpdateModal input[name=gender]").val([empData.gender]);
                $("#empUpdateModal select").val([empData.dId]);
            }
        });
    }


Test:
For the data in this row, click the Edit button:

Contents of the pop-up modal box:

Tags: Mybatis Spring Spring MVC

Posted on Sat, 27 Nov 2021 14:19:15 -0500 by mikr