I tryed to use href but its only redirected me to a web player.
<span><a download class="btn btn-action ml-auto mr-4 btn-sm waves-effect waves-light" download="audio.mp3" onclick="downloadMusic()" style="background-color: #F50057;"><i class="fas fa-download pl-1"></i></a></li></span>
function downloadMusic() {
location.href = audiolink;
}
Welcome to Stack Overflow!
There isn't much reason to use JavaScript here unless you wanna change what location of the audio file is depending on some other statement. If so, you'll have to change the button to that new audio link before the user clicks on it, the JS to change the link would be something like:
function setDownloadLink() {
document.getElementById('downloadbutton').innerHTML = 'Download'
//You would need an element around the hyperlink with an ID, then you replace 'downloadbutton' with that ID.
}
If you're not wanting to have it update along with other JavaScript, then you can just do something like:
Download
Related
I currently have a piece of Python Flask code that is very annoyingly not working. On the Python side, I have
# Delete a project with the given ID from the system
# Must also delete the project from all user's owned and joined arrays
#app.route('/delete_project/<string:project_id>', methods=['POST', 'GET'])
#require_user_login
def delete_project(project_id):
# delete the project itself from the projects database
mongo.db.projects.delete_one({'_id': ObjectId(project_id)})
# remove pointers to the project from the owner
# as well as all collaborators
mongo.db.sites.update(
{ },
{ '$pull': { 'owned_projects': ObjectId(project_id) , 'joined_projects': ObjectId(project_id) } }
)
# TODO: delete all files associated with this project
# also delete all JSON objects associated with the files
return redirect(url_for('dashboard'))
On the HTML side, the code looks like this
<button id="{{project['_id']|string}}" class="btn btn-info">
<a href="">
<i class="fas fa-trash-alt"></i> Delete Project
</a>
</button>
<script>
document.getElementById("{{project['_id']|string}}").addEventListener('click', function() {
if (window.confirm("Do you really want to delete this project?")) {
alert("{{ url_for('delete_project', project_id=project['_id']|string) }}");
document.location.href("{{ url_for('delete_project', project_id=project['_id']|string) }}");
}
});
</script>
When I click on this button, nothing happens. The page merely refreshes, but no deletion occurs, and it appears that the site doesn't even hit the delete_project function at all. Now, what is interesting is, if I put the code directly in the link, i.e.
<button id="{{project['_id']|string}}" class="btn btn-info">
<a href="{{ url_for('delete_project', project_id=project['_id']|string) }}">
<i class="fas fa-trash-alt"></i> Delete Project
</a>
</button>
The above code works, but doesn't have the needed confirmation popup. The following also works, technically
<button id="{{project['_id']|string}}" class="btn btn-info">
<a href="">
<i class="fas fa-trash-alt"></i> Delete Project
</a>
</button>
<script>
document.getElementById("{{project['_id']|string}}").addEventListener('click', function() {
if (window.confirm("Do you really want to delete this project?")) {
window.open("{{ url_for('delete_project', project_id=project['_id']|string) }}");
}
});
</script>
BUT, it opens a new tab every time the button is pushed. Doing window.open('url', '_self') has the same problem as location, i.e. it just refreshes the page without going anywhere. I've tried window.location, window.location.href, window.location.redirect, and a bunch of other stuff besides, and nothing seems to actually work!
In an effort to see if it's redirecting AT ALL, I tried redirecting to a known good site, so I tried window.location.href='htttps://www.google.com/' to see if it'll go to Google. Nope - nothing except for window.open seems to work at all.
Please help! If I must use window.open, how can I make it work without opening a million new tabs? And why doesn't window.location work?! I'm pulling my hair out here...!
First, when you want to handle click in JS, you want to avoid link to make transition (to href="", which simple reloads page) Use preventDefault on event
addEventListener('click', ev => {
ev.preventDefault();
// do your handling here
})
To trigger delete from JS, window.open is not good options
Look at XHR request / fetch api
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
in your case
fetch("{{ url_for('delete_project', project_id=project['_id']|string) }}");
As next step, it would be better use POST method instead of GET for delete request
I found it. It was a syntactical issue: window.open is coded as
window.open('your/url/here')
But window.location is coded as
window.location = 'your/url/here'
Thus the end result was that I was not calling proper javascript and it just failed silently. God I miss complied code!
fetch("{{ url_for('delete_project', project_id=project['_id']|string) }}");
As next step, it would be better use POST method instead of GET for delete request
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')
I've the following issue: I've build a quote generator (freecodecamp) and need to be able to share the quote via twitter. My approach was via Twitter web intent and the text is the data I receive via the API. It only works once.
HTML:
<p>Share the wisdom</p>
<a class="twitter-share-button" href="#" target="_blank">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span>
</a>
JS:
<script>
function myFunction() {
var firstName = document.getElementsByName("firstname")[0].value;
var trumpAPI = "https://api.whatdoestrumpthink.com/api/v1/quotes/personalized?q="+firstName;
$.getJSON(trumpAPI, function(data, status){
document.getElementById("trump").innerHTML = data.message;
$('a[href="#"]').attr("href","https://twitter.com/intent/tweet?text="+data.message+"&hashtags=trump, quoteoftheday");
});
document.getElementById("trump").classList.add("border");
}
</script>
Could it be that the text parameter in the web intent is not dynamic? Any suggestion how to fix this? thanks in advance.
I have to guess a little bit because you didn't share your complete functionality, I assume what you do is this:
You have a button of some sort, clicking which will get another quote.
Clicking that button calls your myFunction().
If that's correct, then the problem is that your <a> element no longer has href="#" after the first time the function has run; the href is now the intent link. And because of that, $('a[href="#"]') no longer selects that link on the second call. If you use $(".twitter-share-button") instead, it should work.
Following JavaScript call function not working in googleweblight
<i class="fa fa-facebook"></i> Facebook ID
or
<a onclick="FBLogin()" href="#" class="btn btn-sm azm-social azm-btn azm-facebook"><i class="fa fa-facebook"></i> Facebook ID</a>
What may be issue? is it possible to fix it?
For a example
http://jsfiddle.net/zalun/Yazpj/1/ It will work,
but same link wont work in
googleweblight http://googleweblight.com/?lite_url=http://jsfiddle.net/zalun/Yazpj/1/
Javascript seems to be disabled in googleweblight, if you want to see in detail then you can look at your site by this
http://googleweblight.com/?lite_url=[your_website_URL]
example http://googleweblight.com/?lite_url=https://stackoverflow.com/
Well, you can opt out of it but in such case google will label your page in the search results to indicate to users that non-transcoded pages may take longer to load and may use more data.
You can find more details here
https://support.google.com/webmasters/answer/6211428?hl=en
I have some mockup in HTML
<img title="next page" alt="next page" src="/themes/me/img/arrn.png">
I got the response from server when I sent the request.
With this mockup I got as a response of AJAX request that sends my code to server.
Well, everything is fine but when I click on the link the browser wants to open the function as link; meaning after click I see the address bar as
javascript:ShowOld(2367,146986,2)
means browser thing that's url if I want to do this in firebug that's work. Now I want to do that then when anyone clicks the link then the browser tries to call the function already loaded in the DOM instead of trying to open them in browser.
That syntax should work OK, but you can try this alternative.
<a href="javascript:void(0);" onclick="ShowOld(2367,146986,2);">
or
<a href="javascript:ShowOld(2367, 146986, 2);">
UPDATED ANSWER FOR STRING VALUES
If you are passing strings, use single quotes for your function's parameters
<a href="javascript:ShowOld('foo', 146986, 'bar');">
If you only have as "click event handler", use a <button> instead. A link has a specific semantic meaning.
E.g.:
<button onclick="ShowOld(2367,146986,2)">
<img title="next page" alt="next page" src="/themes/me/img/arrn.png">
</button>
Try to make your javascript unobtrusive :
you should use a real link in href attribute
and add a listener on click event to handle ajax
I use a little CSS on a span to make it look like a link like so:
CSS:
.link {
color:blue;
text-decoration:underline;
cursor:pointer;
}
HTML:
<span class="link" onclick="javascript:showWindow('url');">Click Me</span>
JAVASCRIPT:
function showWindow(url) {
window.open(url, "_blank", "directories=no,titlebar=no,toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes");
}
Your should also separate the javascript from the HTML.
HTML:
<img title="next page" alt="next page" src="/themes/me/img/arrn.png">
javascript:
myLink = document.getElementById('function-click');
myLink.onclick = ShowOld(2367,146986,2);
Just make sure the last line in the ShowOld function is:
return false;
as this will stop the link from opening in the browser.
<a href="#" onclick="javascript:ShowOld(2367,146986,2)">
href is optional for a elements.
It's completely sufficient to use
<a onclick="ShowOld(2367,146986,2)">link text</a>