I have a link for downloading Audio Files. I wish to keep it hidden and allow the user to call it using a button. But somehow I am unable to trigger the click event.
Here is HTML:
<a class="APopupDown" data-icon="home" id="DownloadFile" href="http://yahoo.com/abc.mp3" download="My File Name">Download File</a>
<button data-icon="home" href="#" onclick="DlMsg()">Download</button>
And here is the trigger.
function DlMsg()
{
alert("I am here");
$('#DownloadFile').trigger('click');
}
A Jfiddle example is here
As you can see the diredct link works but the button doesn't. Any idea what I am doing wrong?
Thanks
----- UPDATE -------
I have made the change as per Jai's suggestion. However, it now starts playing the Audio instead of downloading, whereas what I want is to use HTML5's download functionality. Here is the jsfiddle link
Got the answer. Just see this fiddle http://jsfiddle.net/EWQ6n/512/
Source:
<a class="APopupDown" class="test" data-icon="home" id="DownloadFile" href="http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3" download="My File Name">Download File</a>
<button data-icon="home" id="btnDownload">Download</button>
Script:
$("#btnDownload").click(function(e){
$("#DownloadFile").get(0).click();
});
I just used like this
$("#DownloadFile").get(0).click();
to trigger the anchor click event.
You need to have a click event bound to that element first:
$('#DownloadFile').click(function(e){
e.preventDefault();
window.location.href = this.href;
});
then your trigger will work:
$('#DownloadFile').trigger('click');
Demo # Fiddle 506
Related
<button type="submit" class="myButton" onclick="window.open('test.txt')">Money Dispenser</button>
Is the current code i have, and does not do anything at all when i click it. ( I want it to download test.txt to the computer or device of the user who cliked it)
I don't really understand what you are trying to achieve using a submit button, if it's not mandatory I'd use an <a>.
With pure HTML5 using the download attribute
<a href="test.txt" download>Money Dispenser</a>
Or with Javascript if you have to use a <button>
This has already been covered grealy in this question
But the gist of it is, create a function to download files as shown on that thread and add it to your <button>
<button onclick="donwloaURI('data:text/plain,Test', 'Test.txt')">Money Dispenser</button>
You can use the HTML download attribute to specify that the target will be downloaded when a user clicks on the hyperlink.
<a href="/download-file-path-here" download>
Money Dispenser
</a>
You can do using:
<a href="data:text/plain;charset=UTF-8,test.txt" download>Download</a>
I have a small program in JSP which basically when I click on a document, it opens a new window that allows me to view it. The problem here is it would not show the viewer unless I update or install adobe flash player.
I added a hyperlink link where I can easily click on it and it prompts me to "Allow" to view the document which is fine. The hyperlink looks like below:
<a href="https://get.adobe.com/flashplayer" >Enable Flash</a>
<img border="0" alt="Enable Flash" src="enable_flash.gif"/>
Now, I have to manually click on it, is there a way I can have the hyperlink auto clicked when the pop up windows shows?
I am new to JavaScript and HTML so I figured there is something that I could use like <body onload > .
Edit
This is how my code looks like now:
<body onload="Auto()" > <!--oncontextmenu="return false;"-->
<script>
function Auto(){
<a href="https://get.adobe.com/flashplayer" >Enable Flash</a>
<img border="0" alt="Enable Flash" src="enable_flash.gif"/>
}
</script>
Am I doing anything wrong?
You can simply use click() method
Add id to anchor element
<a href="https://get.adobe.com/flashplayer" id="myLink" >Enable Flash</a>
Add to your script
function automateClick() {
document.getElementById('myLink').click()
}
window.addEventListener("load", automateClick);
Yes..you can use below code and load your link there
$(document).ready(function() {
document.querySelector('a[href="https://get.adobe.com/flashplayer"]').click();
});
OR
$(function() {
document.querySelector('a[href="https://get.adobe.com/flashplayer"]').click();
});
OR
window.onload = function() {
document.querySelector('a[href="https://get.adobe.com/flashplayer"]').click();
}
You can do this with as little as one line, if you want to learn more about the approach I've used, then it may be worth your time looking into functions such as querySelector. Once you have the desired element, you can then simply fire the click method like so.
Demo
<script type="text/javascript">
document.querySelector('a[href="https://get.adobe.com/flashplayer"]').click();
</script>
I tried using a href=javascript:function() in a button, with a function to execute it. It works in Chrome but it doesn't work in Firefox.
Firefox doesn't alert and open blank tab.
Anyone can help me?
<script>
function verifyisbot() {
alert("test.");
var win = window.open("http://yahoo.com", '_blank');
win.focus();
}
</script>
Below is button code
<div class="frb_textcenter">
<a target="_blank" class="frb_button frb_round frb_center frb_fullwidth" href="Javascript:verifyisbot();">
click here
</a>
</div>
Update
I should have added that im using a live editor(profitbuilder) in wordpress to generate the page and button. There is no area for me to insert additional javascript onclick function to the button. So i figure out to use "ahref" blank field in the live editor to input javascript call function to fire up the function.
Is there any way i can make this work through the ahref without using onclick event? Or can i specify onclick function in the ahref field?
Sorry the test() is actually verifybot() function, typo mistake
You can achieve the goal using only the href attribute:
<a href="javascript:void(verifyisbot())" class="frb_button frb_round frb_center frb_fullwidth">
click here
</a>
It works, because when a browser follows a javascript: URI, it evaluates the code in the URI and then replaces the contents of the page with the returned value, unless the returned value is undefined. The void operator can be used to return undefined.
Use onclick event instead of a href=javascript.It works on firefox.See below:
<div class="frb_textcenter">
<a target="_blank" class="frb_button frb_round frb_center frb_fullwidth" onclick="test()">click here</a></div>
<script>
function test() {
alert("test.");
var win = window.open("http://yahoo.com", '_blank');
win.focus();
}
</script>
UPDATE 1: You can do it without use javascript.You just add the link in the href attribute.See below:
<a target="_blank" class="frb_button frb_round frb_center frb_fullwidth" href="http://yahoo.com">click here</a></div>
Give serious consideration to separating your JavaScript and your HTML such that the problem goes away. For instance, add an ID to your anchor and add an event handler through script:
<div class="frb_textcenter">
<a id="verify" target="_blank" class="frb_button frb_round frb_center frb_fullwidth" href="http://yahoo.com">
click here
</a>
</div>
Later...
<script>
function test() {
alert("test.");
var win = window.open("http://yahoo.com", '_blank');
win.focus();
}
window.onload = function () {
document.getElementById('verify').addEventListener('click', test);
};
</script>
Do note that with the example provided, you don't actually need JavaScript at all. The HTML itself will cause a new window/tab to open with Yahoo! loaded...
I'm attempting to stop some links on my site from working.
Here is my code:
Links:
<a href='http://mysite.home.com'>Home</a><br>
<a href='http://mysite.home.com/nextpage'>Next Page</a><br>
<a href='http://mysite.string.home.com'>Home 2</a><br>
<a href='http://mysite.string.home.com/otherpage'>Other Page</a>
Jquery:
<script>
$("a[href*='.string.']").click(function(e) {
e.preventDefault();
alert('You cannot use this link');
});
</script>
The goal is to stop the last two links (with href containing '.string.') from working and instead display the alert. However, this code isn't working and the links still work. What am I doing wrong?
The strange thing is the code works fine here: http://jsfiddle.net/TzUN3/364/
but not on my site. I have the script and links both in the <body> of my page, script after the links. Is this correct?
Thanks.
Forgot to add
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
to my page. Feel like an idiot.
Thank you all.
$(function() {
// Jquery is ready
// *= is contains
$("a[href*='.string.']").click(function(e) {
e.preventDefault();
alert('You cannot use this link');
});
});
<p>VERIFY</p>
I am using the above code which is a jQM button with the onClick() set. The onclick is called and doSomething() is executed but after that, jQM shows the "error loading page" message.
How can I supress the error? In this case I want the jQM button but don't want it to change page.
Thanks
Since you are using jQuery I would recommend to use jQuery to wire up your events as well. With that being said using e.preventDefault(); and e.stopImmediatePropagation(); should stop jQuery mobile from performing the default action on the <a/>.
$("#verify").click(function (e) {
e.stopImmediatePropagation();
e.preventDefault();
//Do important stuff....
});
Update
The better way to use your existing markup would be to simply add rel="external" to your <a/> And your onclick should behave correctly.
<p>
VERIFY
</p>
This will work since jQuery Mobile will treat the link as a normal <a/> tag and return false will simply stop the default action.
I think your problem is that you have multiple actions on your button and are using a anchor tag. When clicking the button you're invoking the page to transition to index.html and a onClick event.
<a
href="index.html" <-- go to index.html
data-role="button"
data-icon="arrow-r"
data-iconpos="right"
data-theme="a"
onclick="doSomething(); return false"> <-- Click event
VERIFY
</a>
Might try (might need to remove/add some other attributes)
<input
type="button"
name="verify"
id="verify"
data-icon="arrow-r"
data-iconpos="right"
data-theme="a"
value="VERIFY" />
and now add a click event
$('#verify').click(function() {
alert('Button has been clicked');
});
Live Example: http://jsfiddle.net/vRr82/2/
I think you should be append data-ajax="false" inside anchor tag..
because in jQuery mobile the page transition is done by AJAX, and for page transition
it must be false..
Use Jquery live Function. That is prety much useful for me