英文:
Pass Variable From Modal A To Modal B
问题
$(document).on("click", "#btnModifyVisit", function(e) {console.log('modify button clicked');//row id of clicked buttonvar id = $(this).attr("data-id");// Button that triggered the modalvar buttonClicked = $(this).data('bs-whatever');console.log(id);console.log(buttonClicked);});
英文:
Working on building a approval/edit process for company site. I have it set-up so that a jquery datatable displays scheduled events for the logged in user and displays the trip like this
results = await response.json();var tr = $(this).closest('tr');var id = tr.children('td:eq(0)').text()tbl = $('#example').DataTable( {dom: 'lBfrtip',lengthMenu: [ [10, 25, 50, 100, -1], [10, 25, 50, 100, "All"] ],pageLength: 50,data: results,columns: [{title: "Arrived",data: "id" ,width: "10%",className: "text-center",render: function (data, type, full, meta){return '<input type="checkbox" name="id[]" value="' + $('<div/>').text(data).html() + '">';}},{title: "Employee Name",data: "Employee",width: "20%"},{title: "Destination",data: "Destination"},{title: "Modify",render: function(data, type, row, meta){return '<button id="btnModify" data-id="' + row.id + '" data-bs-toggle="modal" data-bs-target="#modifyVisit" class="btn btn-success" type="button">Modify Visit</button>';}}]});}}
this part works excellent - now I am trying to modify this a bit and add the Modify button in the jquery datatable - that piece is done the button is there, YAY!
The issue that when the Modify button is pressed a modal is displayed that gives the user the option to either Reschedule Or Cancel. Here is the html for that
<div id="modifyVisit" class="modal" tabindex="-1"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h5 class="modal-title">Modify Visit</h5><button class="close" type="button" data-dismiss="modal"> × </button></div><div class="modal-body"><h2>Select The Modification Type</h2><div class="wrap"><div class="row"><div class="col-xs-6 col-xl-6 item"><button id="btnReschedule" class="btn btn-primary" type="button" data-bs-whatever="reschedule">Reschedule Visit</button></div><div class="col-xs-6 col-xl-6 item"><button id="btnCancel" class="btn btn-primary" type="button" data-bs-whatever="cancel">Cancel Visit</button></div></div><div class="modal-footer"><button class="btn btn-secondary" type="button" data-dismiss="modal">Close</button></div></div></div></div></div>
my issue is that I need to capture which button was pressed (so I know which data points to display) and also the id of the row that the user clicked the modify button on.
I tried to capture it like this
var modifyVisit = document.getElementById('#btnModify')modifyVisit.addEventListener('show.bs.modal', function (event) {//row id of clicked buttonvar id = $(this).attr("data-id");// Button that triggered the modalvar button = event.relatedTarget// Extract info from data-bs-* attributesvar buttonClicked = button.getAttribute('data-bs-whatever')console.log(id);console.log(buttonClicked);});
but I get a console error, I assume because I'm trying to add an event listener to an element that is not displayed on the page when the page loads...
caught TypeError: Cannot read properties of null (reading 'addEventListener')at HTMLDocument.<anonymous>
I know I can use var id = $(this).attr("data-id"); to get the id of the row where the button was pressed, but what have I set-up incorrectly here?
<strong>EDIT</strong><br>
I edited the click to use jquery like this
$(document).on("click", "#btnModifyVisit", function(e) {console.log('modify button clicked');//row id of clicked buttonvar id = $(this).attr("data-id");// Button that triggered the modalvar button = e.relatedTarget// Extract info from data-bs-* attributesvar buttonClicked = e.getAttribute('data-bs-whatever')console.log(id);console.log(buttonClicked);});
and now it is giving me an error on click of
caught TypeError: e.getAttribute is not a function
答案1
得分: 0
You are exactly right. It can't listen to an element that does not exist when the page loads. jQuery has a very good solution for this that I use for everything - .on().
Also I think the show.bs.modal event happens on the modal element.
Try the below code.
$(document).on('show.bs.modal', '.modal', function (event) {//row id of clicked buttonvar id = $(this).attr("data-id");// Button that triggered the modalvar button = event.relatedTarget// Extract info from data-bs-* attributesvar buttonClicked = button.getAttribute('data-bs-whatever')console.log(id);console.log(buttonClicked);});
This essentially works behind the scenes to attach the listener to the document and check to see if the target equals the second parameter (in this case #btnModify). It allows you to have listeners for dynamically added content, which is exactly what you need.
英文:
You are exactly right. It can't listen to an element that does not exist when the page loads. jQuery has a very good solution for this that I use for everything - .on().
Also I think the show.bs.modal event happens on the modal element.
Try the below code.
$(document).on('show.bs.modal', '.modal', function (event) {//row id of clicked buttonvar id = $(this).attr("data-id");// Button that triggered the modalvar button = event.relatedTarget// Extract info from data-bs-* attributesvar buttonClicked = button.getAttribute('data-bs-whatever')console.log(id);console.log(buttonClicked);});
This essentially works behind the scenes to attach the listener to the document and check to see if the target equals the second parameter (in this case #btnModify). It allows you to have listeners for dynamically added content, which is exactly what you need.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论