There is a page where a list of all users is displayed. You can also edit information about the user. It is necessary to do so that when you click on the Редактировать пользователя button Редактировать пользователя a modal window opens and information about the user (first name, last name, etc.) is passed to the input window of this window.

Code:

 <!-- В цикле перебираем всех пользователей--> ... { <td><?= $ps['name'];?></td> <td><?= $ps['firstName'];?></td> <button class="editUser<?=$ps['id']?>" id="<?=$ps['id'] ?>" value="..."> Редактировать пользователя </button> } <!-- Модальное окно куда все нужно передать--> <div id="myModal" class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-body"> <input type="hidden" class="userId" id=""> <input type="text" class="userName" name="userName" value=""> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-default"data-dismiss="modal">Закрыть</button> <button type="button" class="btn btn-primary" id="">Сохранить изменения</button> </div> </div> </div> 

 <!-- Скрипт который должен передавать значение в модальное окно!--> <script> $(document).ready(function(){ $(".btn").click(function() { var id = this.id; var userName = $('.editUser' + id).val(); $('#myModal .userId').data('id', id); $('#myModal .userName').data('userName', value); $("#myModal").modal('show'); }); }); </script>

For some reason, the data does not come. And everywhere is empty. What am I doing wrong? How can I transfer variable values ​​to a modal window?

  • and where should it not be empty? you write the data- attribute, not the field value. Moreover, you retrieve the data in username and you record some value . But in general, a strange approach, it is not clear why everything should be written down / duplicated in the button if it is recorded in the table cells - teran September
  • @teran, And how to make this data (name, surname) displayed in the input field, i.e. in the input. As far as I understand, for this it is necessary that these values ​​be in value - r.mcreal
  • Duck to use not .data('id', id) but .val(id) - teran
  • @teran, could get the value . Now you need to send the modified value from the modal window. If I change it just in the input, then nothing happens, as it has come, it remains so, nothing changes - r.mcreal
  • Are you waiting for what will change? it is necessary to handle the event of closing the window, and similarly, the values ​​of the inputs are written to the table. Read at least the most basic manuals. It’s much easier to read the documentation first, spend some time on it and do it rather than poking around for a long time and persistently, and still nothing in the end turns out. - teran

2 answers 2

I did not quite understand what the further problem was from the comments, but your code should be somehow

 var $editRow = null; $(".edit").click(function(e){ $editRow = $(this).closest("tr"); $("#uid").val($editRow.data('user-id')); $("#uname").val($editRow.find(".uname").text()); $("#myModal").modal('show'); }); $("#save").click(function(){ $editRow.find(".uname").text( $("#uname").val() ); $(this).closest('.modal').modal('hide'); // $.post("some-url.php", { ..... }) // .done(function(){ // обновить таблицу, закрыть окно // $editRow.find(".uname").text( $("#uname").val() ); // $(this).closest('.modal').modal('hide'); // }) // .fail(function(){ // // ничего не делать, ошибка // }) ; }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <table class="table table-hover"> <tr data-user-id="123"> <td class="uid">123</td> <td class="uname">username-123</td> <td><a href="#" class="edit">edit</a></td> </tr> <tr data-user-id="321"> <td class="uid">321</td> <td class="uname">username-321</td> <td><a href="#" class="edit">edit</a></td> </tr> </table> <div id="myModal" class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-body"> <input type="hidden" class="userId" id="uid"> <input type="text" class="userName" id="uname" name="userName" value=""> </div> <div class="modal-footer"> <button type="button" class="btn btn-default"data-dismiss="modal">Закрыть</button> <button type="button" class="btn btn-primary" id="save">Сохранить изменения</button> </div> </div> </div>

  • almost what you need. Only the value needs to be changed not in the table, but in .userName . So that when you click Сохранить изменения we can get the value of var userName = $('.userName').val(); and transfer this value to the database. You immediately change the value in the table, but you need to change this value in the database. Those. we get the value from the table in the modal window. There we change it and then send it to the server. I hope I can explain everything, if it’s not so, please understand and forgive me) - r.mcreal
  • I did it like this and everything works: $("#save").click(function(){ $editRow.find(".userName").text( $("#uname").val() ); var userId = $('.userName').val(); console.log(userId); $(this).closest('.modal').modal('hide'); }); - r.mcreal
  • Thank you very much! - r.mcreal
  • I beg your pardon. Then there was such a question, let's say I only know the user id , and after clicking on the user id , a modal window should open in which all the information about the user will be displayed. How can this be realized? - r.mcreal
  • @ r.mcreal the easiest way to mark a table row as <tr id="user-123"> , then knowing id, you can access the desired line by $("tr#user-" + id) . in my example, the string contains the data-user-id attribute, as an option. Well, or if there is no table, then make an ajax request to the server to retrieve the data, and then push them into the modal window - teran

First you have to open the modalka, and then transfer the value to it. And this should be done not through data , but through val

$('#myModal .userId').val(id); $('#myModal .userName').data('userName', value);

  • I could get the value , thanks! And how do I get the changed value now when sending a form? Those. it comes to the modal window, everything is displayed normally, but I cannot change it ( - r.mcreal
  • Dear, what's the difference when you enter the data in the form, before the show or after? - teran