I have several examples of the following.
A link like this with no real href:
<a href="#" id="add-item">
<i class="fa fa-plus"></i>
</a>
And some JS that does some magic:
id = $('#watch-path-group').children().length + 1
$('#watch-path-group').append '<input style="margin-top: 4px;" id=wp_"' + id + '" name=wp_"' + id + '" type="text" class="form-control" placeholder="New path...">'
After upgrading to turbolinks 5 the behaviour has changed. When I click the link turbolinks steps in and reloads the page and in this case the newly added element disappears...
I understand that this is probably more or less what turbolinks does. Taken from github:
Turbolinks intercepts all clicks on links to the same domain. When you click an eligible link, Turbolinks prevents the browser from following it. Instead, Turbolinks changes the browser’s URL using the History API, requests the new page using XMLHttpRequest, and then renders the HTML response.
But how do I accomplish what I am trying to do. Should I stop using link tags as described?
Thanks
Looking at the docs, to disable turbolinks on certain links, you need to add data-turbolinks="false" attribute to the element or any of its ancestors.
So the following should work:
<a href="#" id="add-item" data-turbolinks="false">
<i class="fa fa-plus"></i>
</a>
This of course assumes your own click handler is set up properly, your id's are unique, etc.
Related
I have a table being built via the map function of JavaScript (ReactJS).
On the last column, I should be having buttons that are meant to open a popover that will (eventually) hold some information. This cell is being done like this:
<td>
<div>
<button className="btn btn-primary"
tabIndex="0"
role="button"
data-toggle="popover"
data-trigger="focus"
title="Details"
data-content="Testing, Testing">
<b>IN PIT</b>
</button>
</div>
</td>
So far, the said button appears, but no popover whatsoever. I'm not using npm or anything of the sorts since I'm not a front-end-designer myself, and that doesn't seem trivial to setup. I just want something "good enough" for testing purposes.
What am I missing?
Looking at your https://pastebin.com/KuRHjWxr. Popovers won't work, you have to implement them other way.
You initiate
$('[data-toggle="popover"]').popover();
$('[data-toggle="tooltip"]').tooltip(); when there are no buttons in DOM.
Call .popover() and .tooltip() after your buttons are successfully rendered to the DOM.
The names of your attributes imply that you are expecting bootstrap (an external library) to be loaded and attach to the element to provide functionality, is bootstrap included in a script tag on the page? Those attributes don't do anything themselves, they are just tags to attach actions to. Add a bootstrap cdn tag inside the bottom of the body tag to address.
I'm attempting to register an ng-click event using a custom template to display items in an accordion but they do not get registered at all. I've tried everything, using a hideExpression/watcher, putting the ng-click event in the template, using ng-class/ng-init/ng-click to set the element to active, etc...nothing has worked. Even put an onClick function in the templateOptions. Still no luck...
It almost seems like the items are there but they are not there...never have had such an issue with getting a simple click to work. Basically I want the user to be able to click an item, and then that item becomes active and updates the model with the selection, while the previous item becomes inactive...I've got a very simple piece of jQuery code that works in other things but is not working here...
At my wit's end as to why any of these ways haven't worked...please help...
Here is the plunker;
http://plnkr.co/edit/d5kHjH?p=preview
template: '<a li class="list-group-item small" ng-click="active = !active" ng-init="active = true""><span class="glyphicon glyphicon-chevron-right"></span> {{to.label}}</li></a>'
Got it working with a few changes...
template: `<div ng-init= "active = false">
<label class="list-group-item small" onclick="$('.list-group-item').removeClass('active'); $(this).addClass('active')" ng-click="updateModel()" ><span class="glyphicon glyphicon-chevron-right"></span> {{to.label}}</label>
</div>`,
I'm creating a dynamic link on the last "column" of the jqGrid,and I'm putting an a tag inside this column,the value of "href" must be a link which is coming from my action and is an ftp address.
The problem is that despite the correct value of href,clicking the link navigates the user to the wrong url which is starting with "http"!!!
I wanna remove this extra "http"!!!
Here is the code to
'<a id="file" href="//' + rowobject.GeneratedFilePath + '" title="download"><div class="icon-details fa fa-external-link" style="display:inline-block"></div></a><span> </span>';
and here is the generated link <a> in runtime:
<a title="download" href="//ftp.test.com/Stat_On_150125_Daily.csv" id="file"><div style="display:inline-block" class="icon-details fa fa-external-link"></div></a>
and by clicking the link I'll be navigated to the following url:
http://ftp.test.com/Stat_On_150125_Daily.csv
The solution was really easy!!
I've found it,I have to add ftp:// in the beginning of href value
That's it.
<a title="download" href="ftp://ftp.test.com/Stat_On_150125_Daily.csv" id="file"><div style="display:inline-block" class="icon-details fa fa-external-link"></div></a>
Thanks a lot
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
The green "Blog" button on the top points to the right location, but when clicked, there is no response. It seems it's not a z-index issue. It seems to be a conflict with the jQuery nav, but the solution here is very unclear.
Here is the JS: http://pastebin.com/JuJwKdSZ
and JS #2: http://pastebin.com/VDpViTqP
Here is the HTML: http://pastebin.com/BYuehZnU
I think I may have found the answer. It is to do with the plugin you are using: OnePageNav
This handles all clicks on links on the page. There is a filter ability on that plugin though, when you initialize the instance of one page, you can include a filter of a class name and add that class name to your external link like so:
html
<a id="blog" class="btn button navbar-btn white external" href="/blog"><i class="fa fa-pencil"></i> Blog</a>
Change this in the first js file (line 44)
filter: '',
to this
filter: 'external',