There is some button which user clicks to be redirected to diffrent controller action. I would like to show user some nice waiting information (maybe using bootstrap?) that user knows to wait. Can you advice something? Below my curernt code:
this is part of my JS which is pasting some href url to modal bootstrap window:
...
var href = $('#details').attr('href'); // currently returns '/TransportGallery/Details/1'
href = href.slice(0, href.lastIndexOf('/') + 1) + id;
$('#details').attr('href', href);
...
this is the modal bootstrap window where above js href will be placed and will replace this one:
...
<a href="#Url.Action("Details", "TransportGallery", New With {.id = 1})" class="btn btn-primary" id="details">
Show pictures
<span class="glyphicon glyphicon-picture" aria-hidden="true"></span>
</a>
<button type="button" class="btn btn-warning glyphicon glyphicon-off" data-dismiss="modal"> Close</button>
</div>
</div>
</div>
</div>
...
Now when this is done there is some operation behind which is loading pictures to gallery and on that moment i would like to show user animation. How do do that?
You can use BlockUI.JS
$(function(){
$('#details').on('click',function(){
$.blockUI();
});
});
after you redirect page to somewhere else page will be automaticly unblockui.
Related
My problem is that when you click on the link, a pop-up window opens, but when working with selenium, it opens, but closes the main window. I open the link using .click()
Here's the html:
<a class="do do-task btn btn-sm btn-primary btn-block" href="javascript:;"
data-task-id="13054765" data-do-class="do-task"
data-getcomment-href="/tasks/getcomment/" data-check-count="0"
data-max-check-count="2" data-point-text="10 points">
<i class="far FA-star"></I> 10 points</a>
Function for click:
driver = webdriver.Chrome('chromedriver.exe')
def click_tasks():
tasks = driver.find_elements_by_class_name('btn-block')[7:]
print(tasks[0].text)
tasks[0].click()
You can find out the href, but I don't know how.
Help me find out how to get href or make the main window not close when you open the pop-up window. I will be grateful.
Assuming you've initialised a driver like driver = webdriver.Chrome(), one way of getting the href based on the html you posted is:
your_href=driver.find_element_by_class_name('do do-task btn btn-sm btn-primary btn-block').get_property('href')
When I click on the following button, I would like to be redirected to the route specified in the href. However it doesn't work:
<button href="/auth"> Google+ </button>
I am not sure if it matters but I am running a node app.
How can I navigate to a route on button click?
Buttons were not initially designed for the purpose of redirecting to a new page. Instead, what you are looking for is the a tag. From reading the comments, however, it is clear that you would like to keep the button element and add the same functionality for redirecting without the use of JavaScript, so I will provide a couple of solutions:
With JavaScript
var button = document.getElementById('myButton');
button.onclick = function() {
location.assign('https://stackoverflow.com/questions/52229901/navigate-to-route-on-button-click/');
}
<button id="myButton">Visit Website</button>
Without JavaScript
<form action="https://stackoverflow.com/questions/52229901/navigate-to-route-on-button-click/">
<input type="submit" value="Visit Website"/>
</form>
You can use the following solution to navigate to the route on a button click:
<button onclick="clickFun()"> Google+ </button>
<script>
clickFun() {
window.location = '/auth';
}
</script>
Buttons need an onClick handler. The href attribute is for links (anchor tags, more specifically).
<button onClick='someFunction'>Google</button>
<script>
someFunction() {
window.location = 'some-url';
}
</script>
You can use an a element instead:
Google+
The best way to rout some different page: we have native javascript method
location.asign('here your link');
For example
var btn = document.getElementById('btn');
btn.onclick = function() {
location.assign('https://stackoverflow.com/questions/52229901/navigate-to-route-on-button-click');
}
<button id="btn">
click
</button>
Its very simple you can't use link inside the button tag but you can add tag outside the button tag
for example
<a href='www.google.com'><button>Click me</button></a>
rest depends on your css skills
You can put the link inside the button and give the link href property , style the href class as per need
<button class="button is-success" onclick={submit}>
<a href="/auth" class="href">
Save changes and Submit
</a>
</button>
You can nest your button inside the anchor tag
<a href="/auth">
<button> Google+ </button>
</a>
I have a table created in meteor that is expandable. The initial button that is pressed to expand the table has a plus icon on it. Once the table is expanded I wan't to be able to make the icon on the button change to a minus sign. Basically I want the icon to toggle between a plus and minus sign depending on if the table is expanded or collapsed.
My template for the button:
<template name="expandButton">
<button class="btn btn-default btn-xs btn-circle">
<span id="expand" class="glyphicon glyphicon-plus"></span>
</button>
</template>
The template is callled in the html and works as expected.
My most recent attemp has been trying to use an event for getting the icon to switch from the plus sign to the minus sign:
Template.expandButton.events({
'click #expand'(event) {
event.toggleClass('glyphicon-plus glyphicon-minus');
}
})
I have also tried a couple other ways, but nothing has worked. I would like to know if this is close to being a way of doing this or if this is completely wrong. And if it is the wrong way to do this, how should I go about doing it?
Thanks for any help. It is appreciated.
In Meteor you have to bind the events on right places. you want to bind the click event to button.
<template name="expandButton">
<button class="btn btn-default btn-xs btn-circle" id="expandBtn">
<span id="expand" class="glyphicon glyphicon-plus"></span>
</button>
</template>
and here is your event
Template.expandButton.events({
'click #expandBtn'(event, temp) {
temp.$('#expand').toggleClass('glyphicon-plus glyphicon-minus');
}
})
Please also note that in meteor events, the first argument is event and second is template so using temp.$ is more efficient then parsing the complete dom i.e $(#id)
I am looking to implement a menu that a user clicks the first level button, it has a popover effect. Then a user clicks on the second level menu, another popover shows up. I tried looking up online but there isn't much useful information. Is it doable? The mock picture has been attached below.
You need to set your popover content to support html as per
official documentation.
You need to initialise your second popover after your first popover
is triggered.
HTML:
<button id="firstpopover" type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right">
Popover on left
</button>
<button id="secondpopover" type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-content="test" data-placement="right"> Popover on left
</button>
JS:
var second = $('#secondpopover').remove();
var first = $('#firstpopover');
second.show();
first.data('content', second);
first.popover({html: true});
first.on('shown.bs.popover', function () {
second.popover();
})
first.on('hidden.bs.popover', function () {
second.popover('hide');
})
CSS:
#secondpopover {
display: none;
}
DEMO
I have taken over a web application from a previous developer which is built on asp.net and vb.net
I am trying to create a simple popup with javascript but the popup is not working.
the asp.net code was
<a class="hover-glow" data-placement="bottom" rel="tooltip"
title="change status"
data-bind="attr: { 'href':'update-status_popup.aspx?i='
+ Id + '&c=' + StatusId }">
<i class="icon icon-random"></i>
</a>
The link is opening on a different page. when opening link it's also getting the ID from the database.
The requirement is now to open the link in a popup window.
I have created a javascript function call popup(). The code is like below:
<script type="text/javascript" charset="utf-8">
function popup() {
var url = 'update-status_popup.aspx?i=' + Id + '&c=' + StatusId;
window.open(url);
}
</script>
and edited the html code as below:
<a class="hover-glow" data-placement="bottom" rel="tooltip"
title="change status"
databind = "attr: { 'href = javascript: popup()' }">
<i class="icon icon-random"></i>
</a>
When i click on the link nothing happens.
I have also tried:
<a class="hover-glow" data-placement="bottom" rel="tooltip"
title="change status" onclick ="javascript: popup()">
<i class="icon icon-random"></i>
</a>
and:
<a class="hover-glow" data-placement="bottom" rel="tooltip"
title="change status" href ="javascript: popup()">
<i class="icon icon-random"></i>
</a>
The result is the same.
The popup must not disable the parent screen.
The website is using another popup by colorbox which disables the screen.
Appreciate your kind response.
It appears that you may be having an issue with building the Query String in your popup() JavaScript function. What you should do is break this task into two steps:
Get the Window.Open working first (without the Query String):
<a class="hover-glow"
data-placement="bottom"
rel="tooltip"
title="change status"
href="javascript: popup()">
<i class="icon icon-random"></i>
</a>
<script type="text/javascript" charset="utf-8">
function popup()
{
//var url = 'update-status_popup.aspx?i='+Id+'&c='+StatusId;
var url = 'update-status_popup.aspx';
window.open(url);
}
</script>
Then once the popup() function is working, build out the dynamic Query String. There are a number of ways to handle this. Please refer to the answers here: How to pass a query string variable?
I would assume that the popup function doesn't work. You might want to look at your browsers console window and see what the error is.
You could try putting all the js in the href.
data-bind="attr: { 'href': 'javascript: window.open(\'update-status_popup.aspx?i=' + Id + '&c=' + StatusId + '\')' }"
Or have a generic popup function that takes the url as a parameter.
data-bind="attr: { 'href': 'javascript: popup(\'update-status_popup.aspx?i=' + Id + '&c=' + StatusId + '\')' }"
function popup(url) {
window.open(url);
}
I think Id and StatusId are server variable and are not available on the client side.
To implement a "pop-up" (not a new browser tab) then you should consider implementing the jQuery.UI Dialog. Here is a link to an answer that shows how to implement it:
How to display an IFRAME inside a jQuery UI dialog
And here is a link to the jQuery UI Dialog documentation: https://jqueryui.com/dialog/