I have a bootstrap modal given below, which is inside an angular contoller registrationCtrl, which pops up if re-registration is attempted. There is a LOGIN link at the footer of modal, however when I click the link, only the url in browser's addressbar changes. But the page does not navigate to /login, as it is supposed to.
<div class="modals">
<div id="registered" tabindex="-1" role="dialog" aria-labelledby="registeredModal" aria-hidden="true" class="modal fade">
<div class="modal_container">
<div id="modal-head"><span>Already Registered</span></div>
<div class="modal_body">
...
</div>
<div class="modal_footer">
<div id="notice"><span>*Please login to continue or cancel to register with different </span></div>
<div class="buttons button-toolbar">
<div class="login btn-vert-block">
<span>LOGIN</span>
<div class="cancel btn-vert-block"> <!--the link that is not working-->
<span>
<button type="button" data-dismiss="modal">CANCEL</button>
</span>
</div>
</div>
</div>
</div>
The modal works perfectly when used as an independent html. What am I missing here?
The link problem was in whole html page and not exclusive to the modal. I found out the problem arose from setting the html5Mode to true:
angular.module("MyAPP",[],function($locationProvider){
$locationProvider.html5Mode(true);
});
The link navigates if we put target='_self' in the anchor tag. I found the solution from here. But I couldnt find the actual reason and explanation. If someone can give me the explanation that would be great help, as I am an angular beginner.
Related
I would like to have a modal window using uikit popup in my react application.
When I include this code in my public/index.html file the modal is showing correctly:
<a uk-toggle href="#my-id">Teste Modal bg-close:false</a>
<div id="my-id" uk-modal="bg-close: false">
<div class="uk-modal-dialog uk-modal-body">
<button class="uk-modal-close-default" type="button" uk-close></button>
<p>This modal can NOT be close by just clicking outside of it ...</p>
<p>Please click on the X at the top right to close it.</p>
</div>
</div>
But it will not work if I try to use it from inside a react component like this:
<a className="uk-toggle" href="#my-id">Test Modal bg-close:false</a>
<div id="my-id" uk-modal="bg-close: false">
<div className="uk-modal-dialog uk-modal-body">
<button className="uk-modal-close-default" type="button" uk-close></button>
<p>This modal can NOT be close by just clicking outside of it ...</p>
<p>Please click on the X at the top right to close it.</p>
</div>
</div>
I can see the link but the click doesn't have any effect.
Am I doing something wrong?
EDIT
I added a jsfiddle, and I confirm the react version is still not working...
https://jsfiddle.net/umfk8jnc/9/
You have to add a data- prefix. Here is an updated JSFiddle link: https://jsfiddle.net/pd8nt5mx/
NOTE React will work with data-uk-* prefixes only.
Source: https://getuikit.com/docs/javascript#component-usage
I want to click on below link in a page with several other links like this one.
I have tried cy.get() with a number of alternative ways. I also tried cy.contains('Content 6') but received an error.
<div class="column">
<a href="/admin/contents/109">
<div class="ui segment">
<div class="ui center aligned header">
Content 6
<div class="sub header">Add description to content packages
</div>
</div>
</div>
</a>
</div>
This was my final solution:
cy.get('a[href*="admin/contents"]').contains('Content 6').click()
I found the solution on this page and with help from user called Udo: https://docs.cypress.io/faq/questions/using-cypress-faq.html#How-do-I-get-an-element’s-text-contents
The href code gives more example on how to handle this problem then other examples for same problem.
you have to "get" the correct element to click on. in your case it could be handled like this:
// find the link with href attribute containing "admin/contents" and click it
cy.get('a[href*="admin/contents"]').click()
I'm working on a project where the client has supplied a pile of html where I need to plugin the data from our database and have hit a problem that I'm finding difficult to solve....
So first problem is with routing
<div ng-repeat="class in vm.classes">
<div class="class-overview">
<a href="#">
<span class="class-title">{{class.description}}</span>
... more stuff here
</a>
</div>
<div class="class-information collapse">
<div class="full-width">
{{class.longDescription}}
</div>
</div>
</div>
he has supplied some javascript to handle the click on class-overview
$('.class-overview a').on('click',function(e) {
e.preventDefault();
});
$('.class-overview').on('click',function() {
$('.class-overview.active').removeClass('active').next('.class-information').collapse('hide');
$(this).addClass('active').next('.class-information').collapse('show');//.css('top',offset).collapse('show');
});
and i have a line like this in my state provider
// default route
$urlrouterProvider.otherwise("/")
So the problem is that the ui-router handles the click and sends me back to the home page.
The ideal solution is to leave as much of his markup intact, so can anyone tell me how I stop ui-router handling the click?
or failing that, how I might use ng-click and ng-show to get the same effect, i.e. hiding and showing the class-information div...
If I understand well your question, you want to display the .class-information div when you click on the .class-overview element.
That can be done by using a variable in a ng-show like this:
<div ng-repeat="class in vm.classes">
<div class="class-overview">
<a href="#" ng-click="display = !display">
<span class="class-title">{{class.description}}</span>
... more stuff here
</a>
</div>
<div class="class-information" ng-show="display">
<div class="full-width">
{{class.longDescription}}
</div>
</div>
</div>
The display variable will be falsy when you land on the page, therefore the ng-click will be executed, this variable will be set to true.
I see that you are using a collapse class to hide the content if it is collapsed. Then you could use angular ng-class to put the collapse class when the display variable is false. Your div.class-information would look like this:
<div class="class-information" ng-class="{collapse: !display}">
<div class="full-width">
{{class.longDescription}}
</div>
</div>
When i click on Show Modal, the myModal modal does not show up.
Instead the URL on browser window itself changes to /myapp/#myModal (unexpected)
What am i doing wrong here?
<div>
<label>I am main page.....</label>
....
<a href="#myModal" data-toggle="modal" data-target="addressModal" >Show Modal</a>
<div id="myModal" class="modal fade">
<div>Hello I am Modal...</div>
<div>Whatever....</div>
</div>
...
</div>
I have following included in my app: twitter bootstrap 2.3.1, and ui-bootstrap-tpls-0.10.0.min.js
i have this html structure and i use angular-snap module:
<div snap-drawer id="menu">
profile
<hr/>
cart
</div>
<div snap-content>
<div ng-view></div>
</div>
When I click on one of the links in the snap-drawer, snap-content correctly loads the page but the snap-drawer will not close.
How can I close it? if you use the directive 'snap-close' on the link, the snap-drawer closes but the snap content does not load page.
Thanks
Snap.js Side Panel Default To Open? helped me with the same problem; try
<div snap-content style="-webkit-transformk: translate3d(266px, 0px, 0px);">
<div ng-view></div>
</div>
I think this works because default snap maxPosition is 266.