In my app, I display a list of items which have extra information (which isn't displayed) and a button next to each item to 'View' more info. I want to display that extra information inside a modal. I successfully implemented the modal and it displays the information the way I want it to.
But the problem is that when I click the button of the second list item, the information isn't being updated, it still displays old information (of the first item). How do I resolve this? Why does this happen?
Calling a map function from another class :
<List>
this.props.enrolledClasses.map(enrolledClass => (
<ClassesPeek
title="Overview"
enrolledClass={enrolledClass}
/>
</List>
ClassesPeek :
<List.Item>
<span>{this.props.enrolledClass.name}
<button type="button" className="ui compact primary button mt-3" data-toggle="modal" data-target="#details">
View
</button>
<div class="modal" id="details">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<center><h4 class="modal-title">{this.props.enrolledClass.name}</h4></center>
<button type="button" className="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
{this.props.enrolledClass.description}
</div>
</div>
</div>
</div>
</span>
</List.Item>
So in the above code, when I click the 'View' button for the second list item, the modal still shows the name and description of the first item.
It will always show the old one because you didn't specify which one it should view by passing a unique key (id) to the modal. Update your code to the below snippet then it would work as expected
<List.Item>
<span>{this.props.enrolledClass.name}
<button type="button" className="ui compact primary button mt-3" data-toggle="modal" data-target={`#details${this.props.enrolledClass.id}`} id={`#details${this.props.enrolledClass.id}`}>
View
</button>
<div class="modal" id={`details${this.props.enrolledClass.id}`}>
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<center><h4 class="modal-title">{this.props.enrolledClass.name}</h4></center>
<button type="button" className="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
{this.props.enrolledClass.description}
</div>
</div>
</div>
</div>
</span>
</List.Item>
I think the main reason for such scenario is your JavaScript code that opens the modal onthe button click. Can you please check that once. I would suggest always use ref for such usecase instead of id.
Related
I'm quite new to React and Bootstrap. I'm trying to implement a modal dialog on button click. My modal currently is not displaying - you can see on the 2nd snippet of code how I'm trying to include the modal using a boolean show variable.
I've seen various libraries which help to do this but I wanted to try understand how to make this work without those libraries first.
I'm not sure why this modal does not show.
const ModalContent = () => {
return (
<div className="modal">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title">Modal title</h5>
<button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div className="modal-body">
<p>Modal body text goes here. {modalInfo}</p>
</div>
<div className="modal-footer">
<button type="button" className="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" className="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
);
}
<div className="row">
<div className="col">
<table className="table table-hover">
...
</table>
<Pagination itemsCount={filtered.length}
pageSize={pageSize}
currentPage={currentPage}
onPageChange={handlePageChange}/>
</div>
{show ? <ModalContent /> : null}
</div>
2 words, conditional rendering is the best way to do it. Like this:
<div className="row">
<div className="col">
<table className="table table-hover">
...
</table>
<Pagination itemsCount={filtered.length}
pageSize={pageSize}
currentPage={currentPage}
onPageChange={handlePageChange}/>
</div>
{show && <ModalContent />}
</div>
the logic behind it is like this , if both sides of & operator are true , they will be rendered , if not, none of them will render, therefore causing the modal to not render at all.
Looking at the documentation, you are missing the button which should toggle the modal.
Page: https://getbootstrap.com/docs/4.0/components/modal/
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
You can also setup a custom trigger using with this line of code:
Call a modal with id myModal with a single line of JavaScript:
$('#myModal').modal(options)
Options: https://getbootstrap.com/docs/4.0/components/modal/#options
(Not tested) you could also try to use Document.getElementById() to get the element and call modal.
That said, I don't know if it is a good idea to use jQuery when you already use React, but I think you already know that there is an implementation for React Bootstrap already.
I have this delete button here where in when you click this it suppose to show the bootstrap confirmation modal that looks like this:
So I have this button here along with the html code for the modal:
<button classNameName="btn btn-sm" data-bs-toggle="modal" data-bs-target="#deleteResortOwner" onClick={() => deleteHandler(resort._id)}>
DELETE
</button>
<div className="modal fade" id="deleteResortOwner" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="deleteResortOwnerLabel" aria-hidden="true">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title" id="deleteResortOwnerLabel">Modal title</h5>
<button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div className="modal-body">
<p>Are you sure you want to delete this resort?</p>
</div>
<div className="modal-footer">
<button type="button" className="btn btn-secondary" data-bs-dismiss="modal">Not Sure</button>
<button type="button" className="btn btn-primary">Yes</button>
</div>
</div>
</div>
</div>
Now on my onClick effect that will call the deleteHandler method:
const deleteHandler = (id) => {
dispatch(deleteResortOwner(id))
}
This will of course delete the item directly without showing a confirmation modal. I used to do this like this which is a basic alert:
const deleteHandler = (id) => {
if(window.confirm('Are you sure')){
dispatch(deleteResort(id))
}
}
But I need this to run like a modal not an alert. Wondering how can I attain this and still open the modal to do the confirmation instead of the window.confirm? This will also must delete the item if the "Yes" button on the modal was click and will simply close the modal when "Close" button was click.
Any idea how to do this? Please help.
Use react-modal NPM package and then add styles using bootstrap.
And check it's docs for more details.
I am working on a component with a modal. A button trigger the modal, then if you click on the button inside the modal, you are redirect to another page (using Link) and the modal is supposed to close.
Unfortunately, if I use data-dismiss the redirection does not work anymore.
Is there another way to do it?
Here is the code and thank you for your help:
<div
className="modal fade"
id="exampleModal"
tabIndex="-1"
role="dialog"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<div className="modal-dialog" role="document">
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title" id="exampleModalLabel">
Commande OK
</h5>
<button
type="button"
className="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div className="modal-footer text-center">
<Link
to="/offers"
className="col-6 justify-content-center"
>
<button
type="button"
className="btn btn-info"
>
Back
</button>
</Link>
</div>
</div>
</div>
</div>
I'd suggest using Local state in the component that has a modalOpen boolean property that is set to true or false depending on whether the modal is open or closed. The button on the modal should also have an onClick handler that sets the modalOpen to false once the button is clicked for redirection.
Ok I found a solution:
I add a function to the button: onClick={this.closeModal}
and then just add this function before render:
closeModal() {
$("#exampleModal").modal("toggle");
}
Hope it helps.
I have a requirement as, Creating a one form and load this form on multiple screen as modal using bootstrap.
Example : Suppose I am having 3 jsp pages i.e. Index.jsp, Request.JSP, Form.jsp
Now I have a link on Index.jsp which will display Form.jsp as Modal and I have button on Request.jsp, on click of button Form.jsp will get displayed as modal.
I have gone through multiple queries but solution was not satisfactory. I dont want to repeat the code and want to use Modal.
Thanks in advance.
i got the solution. I kept the Modal and Modal-dialog class div tags in main JSP like below :
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Cash Request Form</h4>
</div>
<div id="loadModalBody" >
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Then I added the form with modal-body class in second JSP CashRequestForm.jsp :
<div class="modal-body panel">
<div class="panel panel-body" id="panelActTypeAndDate">
<div class="row">
<div class="col-md-8"><font>Activity Type</font></div>
<div class="col-md-3"><font>Select Activity Date</font></div>
</div>
<div id="row1" class="row">
.....
.....
Your code
</div>
</div>
</div>
Then I called .load using jquery as below :
$(".popUp").click(function () {
$("#loadModalBody").load("CashRequestForm.jsp");
});
And it worked for me.
I have an index.html page that has a link on it that displays modal dialog when clicked.
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>Modal sample text</p>
</div>
<div class="modal-footer">
Close
</div>
</div>
Also index page displays partial pages inside a ui-view:
<div class="" ui-view>
</div>
The link that opens the modal is on the index page in the , so it is visible on any page. The problem I am having is when Close button is clicked, the modal dialog closes but then the user is taken to the login page.
This is happening because href="#". In order for it to be taken the a page should be something like #/page1. So it has to be set dynamically as the user navigates through the site. I can't seem to figure out a way to do that. Can anyone help?
The page url is something like this:
http://localhost:77777/index.html#/page1
So I'd need to capture the page it is on and assign it to href property dynamically. How could I do that?
Why don't you use a button and ng-click?
something like:
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>Modal sample text</p>
</div>
<div class="modal-footer">
<button ng-click="closeModal()" class="modal-action modal-close waves-effect waves-green btn-flat">Close</button>
</div>
</div>
And on the controller:
$scope.closeModal = function(){
//your code to close the modal window
}
Hope it helps