I've tried looking at the documentation for addThis and it seems like it's being updated or something because all the links these help posts link to don't even mention the API bits they describe.
Anyway,
I just need to be able to programmatically click an addThis button. However, I can't seem to do it via console before I implement it in my code.
I read that this has something to do with how the addThis listeners are added only when the document is done loading. This doesn't make sense to me because even if I manually try to trigger a click in console, it still does nothing but return the html of the link I'm trying to trigger. For example:
`$('.at-svc-facebook').click();`
OR `$('.at-svc-facebook').trigger('click');`
OR `$('.at-share-btn.at-svc-facebook').click();`
I mean, by the time I open console the dom is ready. So then what else might be preventing me from clicking these buttons via jQuery?
I've tried adding a listener to an element myself, and then clicking it programmatically, and it works. So something is different about the way addThis listens for a click. I may update this question with something I find after inspecting their js.
===================
This is what is in the DOM which addThis populates and listens to:
<div class="addthis_sharing_toolbox"></div>
This is what ^ that code is turned in to from addThis:
<div class="addthis_sharing_toolbox" data-url="http://localhost:8001/halloween/" data-title="33 Halloween Costume Ideas">
<div id="atstbx" class="at-share-tbx-element addthis_32x32_style addthis-smartlayers addthis-animated at4-show">
<a class="at-share-btn at-svc-facebook">
<span class="at4-icon aticon-facebook" title="Facebook"></span>
</a>
<a class="at-share-btn at-svc-twitter">
<span class="at4-icon aticon-twitter" title="Twitter"></span>
</a>
<a class="at-share-btn at-svc-google_plusone_share">
<span class="at4-icon aticon-google_plusone_share" title="Google+"></span>
</a>
</div>
</div>
Now, you can see the jQuery I'm using to click the buttons and the code it's trying to click.
The issue is that addThis was putting a second link with the exact same class in the DOM for some reason. It generates some HTML and appends it to body.
So what I needed to do to select the button and trigger a click was to specify the 2nd element in the array of elements and call click on that one. Like so:
$('.at-svc-facebook')[1].click();
Now, the next problem I face is chrome block a programatic popup, but that's beyond the scope of this question. :(
change the
var class_name = $(this)[0].className;
as below,
var class_name = $(this)[0].attr('class');
and it'll work. :)
Related
This question Close Button for Twitter Bootstrap3 Tabs shows how to create a Bootstrap3 tab with a close button in it:
<li class="active">Tab 1 <button><i class="fa fa-times"></i></button>
This works for me (I'm using glyphicons instead of font awesome) but then i read here Can I nest a <button> element inside an <a> using HTML5? that it's not acceptable to have a <button> inside of an <a> tag.
What is the right way to add a button to a bootstrap tab if it's not allowed to be inside the <a> element?
This JSFiddle (not mine) http://jsfiddle.net/vinodlouis/pb6EM/1/ shows the functionality I am going for with the little x button on the tabs.
If you want to insert a button in an anchor, the answer is you cannot (or rather you should not). The following two examples show how to get an html button to behave as a link; either by styling an anchor to look like a button (example 1), or using the onclick event of a button to trigger a JavaScript redirection as an anchor would (example 2).
<!DOCTYPE html>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<!-- Styling the anchor as a button -->
An anchor that looks like a button<br/>
<!-- Letting JavaScript do the redirection -->
<button type="button" class="btn btn-default" onclick="javascript:location.href='#'">A button with onclick JS redirection</button>
</body>
</html>
Edit: Your latest edit and comment make it clearer what you are after, but I don't understand why you would phrase it as "having a button in an anchor". Bootstrap tabs are neither anchors nor buttons, so I would say the OP is really not well formulated. And being able to close a tab does not require either.
Specifically to answer you question now, you should put the cross-icon into a span with left padding and use the onclick event to trigger the tab's deletion with JavaScript.
What is the right way to add a button to a bootstrap tab if it's not allowed to be inside the element?
Simply substitute it for an element that is allowed at that position …?
From (taken from the jsfiddle example you linked to)
<li><button class="close closeTab" type="button">×</button>Sent
to
<li><span class="close closeTab">×</span>Sent
and done.
That might still give you unexpected results when the user interacts with it, of course – after all, when they click that “button”, they are clicking the link as well. So whatever scripting gets attached to the close button, will have to take that into account, and stop event propagation or something like that.
The real proper way to do this would of course be to not nest those elements, that are supposed to have completely different functionality, in the first place, but make them separate, independent elements. Overlying one on top of the other is a matter of formatting.
I am having trouble with Knockout executing Javascript when a user clicks on a button. Unfortunately this is quite a complex page, and I cannot show the full content, but hopefully the small snippet below is enough.
I have tried to simplify this by not even calling the actual view model in the Knockout binding of data-bind, and instead I just simply alert.
<div data-bind="foreach: MyComputedStuff()">
...
<div class="popover-content">
<button onclick="alert('bar')">
This works!
</button>
<button data-bind="click: function(data, event){alert('foo')}">
THIS DOES NOT WORK
</button>
</div>
...
</div>
Is there something obvious that I am doing wrong here?
Why is it impossible for alert('foo') to be executed?
It might help to know that we use Bootstrap and this particular button is within a popover div.
Edit:
I see nothing in the console, and the rest of the page's Javascript continues to work as normal. I have tried this in Chrome and IE9.
I should have said that I am able to bind the click event on another element within the same foreach, to a function in the view model. This works, and this is what I expected to be able to duplicate. (If I replace the call to a function with alert('blah') then I see alert as expected here.) So why not on my button??
<a rel="tooltip"
title="Favourite App"
data-bind="click: function(data, event){$root.ToggleFavorite(data)}">
Thank you to haim770, Alexander, UweB and mhu for your help.
A colleague has pointed out the reason for Knockout not binding the click event: Bootstrap was modifying the DOM.
Through the use of the Knockout context debugger Chrome extention, my colleague pointed out that the div element that contained my buttons was not within an area where I had told Knockout to apply bindings to ... Bootstrap had moved it.
I was using the popovers feature of Bootstrap, and my button was within a popover that Bootstrap had moved out of the div that I was foreaching.
I am seeing this code in a PHP smarty template file *.tpl:
<span id="crmspanid" style="display:none;position:absolute;" onmouseover="show('crmspanid');">
<a class="link" href="javascript:;">{$APP.EDIT_BUTTON}</a>
</span>
$APP.EDIT_BUTTON is essentially an english workd Edit, hence the above line translates to:
<a class="link" href="javascript:;">Edit</a>
I'd think <a class="link" href="javascript:;">Edit</a> makes "Edit" appear as a link but does nothing when clicking on it.
The show function is like this:
function show(divId)
{
if(getObj(divId))
{
var id = document.getElementById(divId);
id.style.display = 'inline';
}
}
However in this page, if Edit is clicked, the page gets 'expanded' a bit, and a text box together with a couple of buttons are shown: (this is the text box and a Save button and Cancel link that appear after clicking on the Edit).
I am lost as to how to find where the code is which gets gone through after Edit is clicked. Any thoughts are welcomed! many thanks.
Someone attached an onclick handler to the link which contains the actual code that is executed. The href attribute seems to be just a dummy.
The click event handler is probably added with JavaScript code that runs on page load. Look through your JavaScript for the code that runs on page load, then you should be able to find the code that adds the click event handler.
It's not good practice to add event handlers in the HTML. This is something you should be doing in JavaScript. It's also bad practice to use href="javascript:" - links should have real destinations for reliability and accessibility reasons.
I'm having a problem simulating a click on a nested link within a nested div using jQuery. Can anyone help with the following? How would I simulate a click on the link with id=video2 in the code below?
<div id=tS2 class=outer>
<div class=middle>
<div class=inner>
<a href="#" id=video2 class=trigger><img src="imgs/thumbs/thumb_02.jpg" ></a>
</div>
</div>
</div>
Try: $("#video2").trigger("click"); if you have a click function attached using jQuery.
If you don't have a jQuery click event attached, and you just want to simulate a click and get the default behaviour. Use: document.getElementById("video2").click();, but with your current setup, doing this would just send you to the same page again, as you only have a # in your href attribute.
Even though things will work without them in this case, you should add double quotes around you HTML attributes to make your HTML valid.
I have seen the following href used in webpages from time to time. However, I don't understand what this is trying to do or the technique. Can someone elaborate please?
An <a> element is invalid HTML unless it has either an href or name attribute.
If you want it to render correctly as a link (ie underlined, hand pointer, etc), then it will only do so if it has a href attribute.
Code like this is therefore sometimes used as a way of making a link, but without having to provide an actual URL in the href attribute. The developer obviously wanted the link itself not to do anything, and this was the easiest way he knew.
He probably has some javascript event code elsewhere which is triggered when the link is clicked, and that will be what he wants to actually happen, but he wants it to look like a normal <a> tag link.
Some developers use href='#' for the same purpose, but this causes the browser to jump to the top of the page, which may not be wanted. And he couldn't simply leave the href blank, because href='' is a link back to the current page (ie it causes a page refresh).
There are ways around these things. Using an empty bit of Javascript code in the href is one of them, and although it isn't the best solution, it does work.
basically instead of using the link to move pages (or anchors), using this method launches a javascript function(s)
<script>
function doSomething() {
alert("hello")
}
</script>
click me
clicking the link will fire the alert.
There are several mechanisms to avoid a link to reach its destination. The one from the question is not much intuitive.
A cleaner option is to use href="#no" where #no is a non-defined anchor in the document.
You can use a more semantic name such as #disable, or #action to increase readability.
Benefits of the approach:
Avoids the "moving to the top" effect of the empty href="#"
Avoids the use of javascript
Drawbacks:
You must be sure the anchor name is not used in the document.
The URL changes to include the (non-existing) anchor as fragment and a new browser history entry is created. This means that clicking the "back" button after clicking the link won't behave as expected.
Since the <a> element is not acting as a link, the best option in these cases is not using an <a> element but a <div> and provide the desired link-like style.
is just shorthand for:
It's used to write js codes inside of href instead of event listeners like onclick and avoiding # links in href to make a tags valid for HTML.
Interesting fact
I had a research on how to use javascript: inside of href attribute and got the result that I can write multiple lines in it!
<a href="
javascript:
a = 4;
console.log(a++);
a += 2;
console.log(a++);
if(a < 6){
console.log('a is lower than 6');
}
else
console.log('a is greater than 6');
function log(s){
console.log(s);
}
log('function implementation working too');
">Click here</a>
Tested in chrome Version 68.0.3440.106 (Official Build) (64-bit)
Tested in Firefox Quantum 61.0.1 (64-bit)
It is a way of making a link do absolutely nothing when clicked (unless Javascript events are bound to it).
It is a way of running Javascript instead of following a link:
link
When there isn't actually javascript to run (like your example) it does nothing.
Refer to this:
Link to the website opened in different tab
Link to the div in the page(look at the chaneged url)
Nothing happens if there is no javaScript to render
javascript: tells the browser going to write javascript code
Old thread but thought I'd just add that the reason developers use this construct is not to create a dead link, but because javascript URLs for some reason do not pass references to the active html element correctly.
e.g. handler_function(this.id) works as onClick but not as a javascript URL.
Thus it's a choice between writing pedantically standards-compliant code that involves you in having to manually adjust the call for each hyperlink, or slightly non-standard code which can be written once and used everywhere.
Since it is a styling issue, instead of polluting the HTML with non valid syntax, you could/should use a W3 valid workaround:
Format the HTML properly, without href, following the W3 accessibility guide lines for buttons.
Use CSS to fix the initial goal of applying a clickable UX effect on a control.
Here's a live example for you to try the UX.
HTML
<a role="button" aria-pressed="false">Underlined + Pointer</a>
<a role="button" aria-pressed="false" class="btn">Pointer</a>
CSS
a[role="button"]:not([href]):not(.btn) { text-decoration: underline; }
a[role="button"]:not([href]) { cursor: pointer; }
I was searching for a solution that does not refresh pages but opens menu items on Ipads and phones.
I tried it on also mobile, It works well
Dr
1. Use that java script to Clear an HTML row Or Delete a row using the id set to a span and use JQuery to set a function to that span's click event.
2. Dynamically set the div html to a string variable and replace {id} with a 1 or 2 etc. cell of a larger div table and rows
<div class="table-cell">
<span id="clearRow{id}">
Clear
</span>
</div>
<div class="table-cell">
<span id="deleteRow{id}">
Delete
</span>
</div>
//JQuery - Clear row
$("#clearRow" + idNum).click(function(){
$("someIDOrWildcardSelector" + idNum).val("");
$("someIDOrWildcardSelector" + idNum).val("");
$("someIDOrWildcardSelector" + idNum).val("");
});
//JQuery to remove / delete an html row
$("#deleteRow" + idNum).click(function(){
//depending upon levels of parent / child use 1 to many .parent().parent().parent()
$(this).parent().remove();
});