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.
Related
On an xpage I have an editbox control and xe:namepicker nicely grouped beside each other with a Bootstrap add-on component.
However I would like to trigger the xe:namepicker when the cursor enters the editbox.
In the DOM I see that for the namepicker an anchor link is generated such as:
a class="glyphicon glyphicon-user xspPickerLink" href="javascript:;"
And I could trigger the click event via csjs
$("a.xspPickerLink").trigger('click');
But I happen to have multiple xe:namepicker-s on my xpage.
Does anyone have a clue how I can trigger a SPECIFIC xe:namepicker ?
You can work with wrapper elements:
<div id="namePicker1Wrapper">
<xe:namePicker id="namePicker1" pickerText="Select..."></xe:namePicker>
</div>
<div id="namePicker2Wrapper">
<xe:namePicker id="namePicker2" pickerText="Select..."></xe:namePicker>
</div>
Now you have the opportunity to select a SPECIFIC xe:namepicker:
$("#namePicker1Wrapper a.xspPickerLink").trigger('click');
How can I use IntroJs for different groups of element. Actually I want to use it for multiple part at same page. As per their documentation
For example introJs(".introduction-farm").start(); runs the
introduction only for elements with class='introduction-farm'
Now I tried with static id or dynamic Id but this part is not working. if I use introJs().start(); then It will work but now if on page I want to create three separate introduction then this method combine them into one. So anybody here able to successfully implement this. Then please share with me.
just add data-step, data-intro and data-position attributes to the grouped divs
e.g.
<div class="span6" data-step="2" data-intro="Ok, wasn't that fun?" data-position='right'></div>
and then onclick just do introJs().start();
e.g.
<a class="btn btn-large btn-success" href="javascript:void(0);" onclick="javascript:introJs().start();">Show me how</a>
for details:
https://github.com/usablica/intro.js/blob/master/example/hello-world/index.html
I've made the next html code -
<a class="list-group-item">
<p class="list-group-item-text"></p>
<p class="btn btn-info" href="javascript:;" ng-click="onclick(alert('Hello world!'));">Hi world</p>
</a>
How can I make the with the 'btn' class be clickable? (meaning see the hello word alert)
Thanks for any kind of help
From your sample it looks like you're trying to use an anchor element to have a list of text and following buttons? Why not just put the ng-click on the Anchor element and apply the bootstrap class of btn to that?
I do believe the issue you have with your sample is that the anchor is catching the click event as opposed to the nest element, as they're not meant to be used as containers.
Task Overview
I'm using the Code Igniter Framework to build a small client management system.
Part of the functionality would be to delete records from the database, before deleting I need to check with the user their okay to delete that record as a precaution. I'd like to do this via a modal window.
Frameworks I'm using
CodeIgniter MVC Framework (PHP, MYSQL)
Foundation HTML/CSS Boilerplate
Foundation's Javascript Libraries (In particular reveal.js)
What I would like to achieve
I'd like to have the user click on the delete link:
Delete
As you can see, the href tag is currently saying, go to the delete_domain function in the main class, and it's passing in the clients ID into the URL, this is used of course on the otherside of the application to delete the record that matches that ID.
Further on in the tag we have:
data-reveal-id="deleteModal"
This refers to the same [id=deletemodal] found in the modal window div that has to reside at the bottom of the page just before the closing body tag.
This is the DIV for the Modal window that resides at the bottom of the page?
<div id="deleteModal" class="reveal-modal small">
<h2>Are you sure you want to DELETE?</h2>
<p class="lead">Random Text</p>
<a href="" ></a>
<a class="close-reveal-modal">×</a>
</div>
The Issue
I'm not really sure if or how it will work, because at the moment the delete link is inside a table row, each one of these rows is generated by a foreach function, so they're multiple of these inside the DOM each with a different /$clientID value.
If I could I'd like to pass that value to a modal window, then of course to the option to finally delete the row.
Can anyone help?
You can grab the data you want from the pressed button and throw it in the modal. There are probably a few ways to do it; here's one of them: http://jsfiddle.net/b37s3/
Delete
<div id="deleteModal" class="reveal-modal">
<h2>Are you sure you want to DELETE?</h2>
<p class="lead">Random Text</p>
<a class="deleteUrl" href="#"></a>
<a class="close-reveal-modal">×</a>
</div>
and js:
$(document).foundation();
$('a.deleteLink').click(function(){
var link = $('.deleteUrl');
$(link).attr('href', this.href);
$(link).html(this.href);
});
This will throw the href from the Delete button pressed into the modals' a href and as the links text.
I am looking for a way to open a modal as well as the underlying hyperlink.
So if my code looks like this:
<a class="btn pull-right" target="_blank" href="http://www.example.com" data-toggle="modal" data-target="#modal_div" data-remote="false">something</a>
I want to open the Modal as well as the link to "www.example.com"...
Does anybody have an idea of how to accomplish this?
Thanks for your advice!
You should define the .click handler for your link, remove data- attributes and toggle .modal() with javascript.
I think that bootstrap handler for clicking on anchors with data- attributes for modals and other plugins uses preventDefault(), that is why you just can't use href="http://www.example.com".
FIDDLE DEMO