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
Related
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.
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 modal pop up and in that modal popup i want to have one more modal popup(smaller modal).My code is as follows
Click event for 1st modal
<!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
My Modal
<!-- Modal Structure -->
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
Agree
</div>
</div>
I want to show my 2nd popup modal after clicking on Agree button my 2nd modal is as follows.
<!-- Modal Structure -->
<div id="modal2" class="modal">
<div class="modal-content">
<p>Thank you</p>
</div>
</div>
When i open my 1st pop up i am unable to open 2nd popup. How can i achive popup modal on popup modal using materialize UI?
I have two ng-clicks in my menu:
One toggles the off-canvas navigation, the other one closes it.
The toggler works fine, but after I click the other one it doesn't work anymore.
Toggler:
<div class="row menu-bar sticky">
<div ng-include="'shared/nav.html'" class="nav-bar"></div> // This includes the offcanvas
<div ng-click="offcanvas = !offcanvas" class=" button hamb-button">
Menu
</div>
</div>
Closer:
<div class="offcanvas-container" ng-class="{'offcanvas-container-in': offcanvas}">
<div class="close-offcanvas" ng-click="offcanvas = false">x</div>
<div class="menu">
<ul ng-controller="PagesCtrl">
'...'
</ul>
</div>
</div>
What could cause this issue?
I'm starting with AngularJS and I'm having some issues with routes.
I configured my project for html5mode, I set my tag, and everything was ok.
The problem comes when I try to use a bootstrap modal. The link that fires the modal is:
<a data-toggle="modal" href="#upload-files" >Upload files</a>
The modal code is:
<div class="modal hidden" id="upload-memories">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Upload memories</h4>
</div>
<div class="modal-body">
asdadsd
</div>
<div class="modal-footer">
Close
</div>
</div>
</div>
</div>
So the href in the anchor references the modal's id, not a route. But my application is going to home page (because the 'otherwise' I suppose).
Can I say AngularJS to ignore this? or is there a better solution?.
Thank you very much!