JavaScript function call in href attribute - javascript

I am attempting to call a basic javascript function through the href attribute in an <a> tag. I have done this countless times before, but now every browser is throwing exceptions in jQuery on the href javascript call and and some browsers elect not to run it but rather open a blank new window. I am just purplexed at this point. Any ideas?
HTML:
<td>
<a href="javascript:showQuote(12);" data-toggle='modal' target='#quoteBox'>
View Quote
</a>
</td>
JavaScript/jQuery:
function showQuote(id){
$("#spot").load("viewQuote.php?id=" + id);
$('#modal').modal('show');
}
Chrome is the only browser in which this works (it still throws an error). I have run this through some online validators and they turned up clean.
Also, I am using jQuery version 1.11.3.

It's better to write this in "jquery" style.
Updated answer - using current controls id
<td>
<a href="" data-toggle='modal' id="12" class="mylink" target='#quoteBox'>
View Quote
</a>
</td>
In Document.Ready..
$('.mylink').on('click',function(event){
event.preventDefault();
var id = $(this).attr('id');
$("#spot").load("viewQuote.php?id=" + id);
$('#modal').modal('show');
})

HTML
<td><a href="javascript:showQuote(12,event);" data-toggle='modal' target='#quoteBox'>View Quote</a></td>
Javascript
function showQuote(id,event){
$("#spot").load("viewQuote.php?id=" + id);
$('#modal').modal('show');
event.preventDefault();
return false;
}

Related

How to hide url on mouse hover of a hyper link

I'm my backend part of the app which is built in PHP Symfony I have HTML twig files, I want to change behavior for some href link, I want to hide URL in the bottom left corner after I hover them, I tried this solution that needs to change URL text to Contact, but it won't work
<a
class="activo"
href="link"
onmouseover="window.status='Contact'"
onmouseout="window.status=''"
>
Click
</a>
any help?
TL;DR; Simply use JavaScript, like:
window.location.href = "https://stackoverflow.com";
Remove the "<a ...>" element's href-attribute.
Then make it trigger a JavaScript function:
<a onclick="myFunction()">my link</a>
Finally, simply use JavaScript to redirect, like:
<script type="text/javascript">
function myFunction() {
window.location.href = "https://stackoverflow.com";
}
</script>
Note that you may need to add CSS to set cursor, I mean, already existing CSS may check href's existence, and not apply once href is removed.
Reusing same function
<a data-url="https://stackoverflow.com"
onclick="myFunction(this)">my link label</a>
<!-- In case you are using Twig or Blade: -->
<a data-url="{{ 'https://example.com' }}"
onclick="myFunction(this)">my other link</a>
<script type="text/javascript">
function myFunction(element) {
window.location.href = element.getAttribute('data-url');
}
</script>

Update not working for href property in Markdown

I want to create a custom hyperlink which passes current URL as one of the parameter to web app endpoint (abc.azurewebsites.net).
These are the versions I tried with thought process of getting the element by Id and update the href using basic HTML properties but no luck.
Approach 1
> <script> baseurl="abc.azurewebsites.net?="
function buildURL(item) {
> item.href=baseurl+window.location.href;
> return true; }
</script>
> </head> <body> <a onclick="return buildURL(this)" href="">Google</a> </body>
Approach 2
Click on this <a href=""
target="_self" id= "test" onclick = buildURL() >Link </a> to execute
<script>
var el_up = document.getElementById("test");
function buildURL() {
this.href = "abc.azurewebsites.net?=" + document.URL;
}
</script>
Any suggestions please. Is it even possible?
Update: Just to mention, I'm trying this from Azure Devops description section
I believe this will work:
<body>
<a id="link-to-edit" href=""> Click here to execute </a>
</body>
<script>
baseurl="https://abc.azurewebsites.net?="
link = document.getElementById("link-to-edit")
link.href = baseurl + window.location
</script>
This will use javascript to programmatically update the href to the baseurl plus current location as soon as the page/script loads. Then when you click the link will be executed properly. The key is that the href must be set at the time of clicking. In your examples, you set the href AFTER the user clicks and thus the link will not work as you intend. Hope that helps!

a href=javascript:function() in firefox not working

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...

readOnly attribute not being set with JavaScript function in Struts 2

I am trying to create an edit link such that when it is clicked it opens the details for that row in read-only mode.
Here is the link:
<c:set var="deletableBook" value="0"/>
<a href="" title="Edit Book Info" onClick='resetDateAndMakeReadOnly(${deletableBook}); return performAction(${item.bookId}, "bookEdit");'>Edit</a>
And here's the function that gets called:
function resetDateAndMakeReadOnly(allEditable) {
var e22 = document.getElementById('book_Date');
var e3 = document.getElementById('book_type');
var e4 = document.getElementById('book_Number');
if (allEditable){
e22.readOnly=false;
e3.disabled=false;
e4.readOnly=false;
alert("read and write");
} else {
e22.readOnly=true;
e3.disabled=true;
e4.readOnly=true;
alert("readOnly new");
}
e22.value = "<c:out value='${params.book_Date}'/>";
return false; }
And currently nothing seems to change when this method is run. I've confirmed that it makes it to the correct part of the logic, but things are still editable.
It is because you are using link with empty href to trigger your javascript function which will reload your page. Use javascript:void(0); inside href.
<a href="javascript:void(0);" title="Edit Book Info" onClick='resetDateAndMakeReadOnly(${deletableBook}); return performAction(${item.bookId}, "bookEdit");'>Edit</a>
The attribute deletableBook is not a boolean value, and is not false that you expect in the javascript function. To switch the variable in the action
session.put("allEditable", !(session.get("allEditable")==null?Boolean.FALSE:(Boolean)session.get("allEditable")));
then use
$(document).ready(function(){
resetDateAndMakeReadOnly(<s:property value="%{#session.allEditable}"/>);
});
that will reset fields attributes depending on allEditable when the page is reloaded. But this
<s:a href="" title="Edit Book Info" onClick="resetDateAndMakeReadOnly(%{#session.allEditable});">Make readonly</s:a>
will not reload the page and keep the value that you have in the allEditable session attribute. That syntax may be a little bit confuse the IDE but is correctly evaluate the OGNL expression and renders like
<a title="Edit Book Info" onClick="resetDateAndMakeReadOnly(false);">Make readonly</a>
there's no href attribute, that's why the page is not reloaded.
Also elements in the JSP should be findable by their id attribute should be set.

How can I stop window.status from displaying?

I have the following:
<a class="button accessLink"
id="loginLink"
href="#"
data-action="Login"
data-dialog="access"
data-disabled="false"
data-entity="n/a"
data-href="/MyAccount/Access/Login"
title="Login">Login</a>
and:
$('.accessLink')
.mouseover(function() {
window.status = '';
});
However when I mouseover the link above I still see
<my ip address>/#
Is there some other way I can stop this showing at the bottom of the browser window?
How about not using an anchor<a> tag altogether ?
Handle the click event of a <span> or a <div> element in jQuery and do a location.href to take the user to the link specified in element's data-href. That way, nothing would show up in status bar.
window.status would be disabled by default in most recent browsers. Consider the
scenario where a malicious website could effectively impersonate a trusted entity:
<script>
$('#bad-link').mouseover(function() {
window.status = 'www.microsoft.com';
});
</script>
Click me
Also remember that a lot of browsers by default don't even display the status bar anymore!
Please Try this:
specify href="javascript:"
<a class="button accessLink"
id="loginLink"
href="javascript:"
data-action="Login"
data-dialog="access"
data-disabled="false"
data-entity="n/a"
data-href="/MyAccount/Access/Login"
title="Login">Login</a>

Categories