I have a bunch of popover buttons that will open the same form. Now I need the button id value as hidden field inside the form.
html buttons:
<a type="button" class="pop" data-toggle="popover" id="1">Button 1</a>
<a type="button" class="pop" data-toggle="popover" id="2">Button 2</a>
<a type="button" class="pop" data-toggle="popover" id="3">Button 3</a>
...
popover form:
<div id="popover-content" class="hide">
<form>
<input name="name" type="hidden" value="ButtonIDvalue">
...
popover js:
$('.pop').popover({
html : true,
content: function() {
return $("#popover-content").html();
}
});
You can access the element that triggered the popover as this within the function bound to content. So you could update your code to be:
$('.pop').popover({
html : true,
content: function() {
$('#hidden-input').val(this.id);
return $("#popover-content").html();
}
});
Of course using whatever the correct selector is for your hidden input field.
Related
Wanted to have cleave.js to format text input on the fly.
I have 2 text inputs
HTML text input and
also a pop over text input whenever search icon is clicked.
The issue is on popover text input where cleave text formating is not
working.
I believe it could be related to the element hasn't exist somehow? I have try to listen to listener but no luck so far. .on('shown.bs.popover)
My code as as per below
https://jsfiddle.net/fairul82/y3kf92oq/
Libraries used : cleave,js , bootstrap popover , jquery
HTML
<div class="container">
<h3>Bootstrap 3 Popover HTML Example</h3>
<input type="text" class="input-element"><br>
<ul class="list-unstyled">
<li><a data-placement="bottom" data-toggle="popover" data-
container="body" data-placement="left" type="button" data-html="true"
href="#" id="login"><span class="glyphicon glyphicon-search" style="margin:3px 0 0 0"></span></a></li>
<div id="popover-content" class="hide">
<form class="form-inline" role="form">
<div class="form-group">
<h1>
My Content
</h1>
<input type="text" class="input-element"><br>
</div>
</form>
</div>
//JS
$("[data-toggle=popover]").popover({
html: true,
content: function() {
return $('#popover-content').html();
}
});
$("[data-toggle=popover]").on('shown.bs.popover', function() {
// alert('called back');
const cleave = new Cleave('.input-element', {
numeral: true,
numeralThousandsGroupStyle: 'thousand'
});
});
const cleave = new Cleave('.input-element', {
numeral: true,
numeralThousandsGroupStyle: 'thousand'
});
Here is solution https://jsfiddle.net/ztkv8w60/19/
According to authority document https://github.com/nosir/cleave.js, it has a note .input-element here is a unique DOM element. If you want to apply Cleave for multiple elements, you need to give different css selectors and apply to each of them.
It is tricky question, because the bootstrap popover creates the same element as your specific div when the icon gets a click. Therefore there are two the same element, you have to point it out which element is in a popover.
I want to send data via jquery (jquery-3.2.1.min.js) and ajax from inside of a bootstrap popover.
The popover works fine, but I cannot get the submit to work.
I initialized the popover with
$(document).ready(function() {
$(function(){
$("[data-toggle=popover]").popover({
html : true,
content: function() {
var content = $(this).attr("data-popover-content");
return $(content).children(".popover-body").html();
},
title: function() {
var title = $(this).attr("data-popover-content");
return $(title).children(".popover-heading").html();
}
});
});
});
This is the html trigger:
<span tabindex="0" role="button" data-toggle="popover" data-placement="right" data-popover-content="#comment230" data-original-title="" title="">
<img src="/ds/img/comment.svg" alt="comment" height="16px">
</span>
And this is the html inside the popover:
<div id="comment225" style="display:none;">
<div class="popover-heading">Comments</div>
<div class="popover-body">
<div class="commentbody">
<div>
<fieldset>
<div class="input text">
<label for="comment">Comment</label>
<input name="comment" id="comment" type="text" />
</div>
</fieldset>
<button class="submittest" id="acomment225button">Test</button>
</div>
</div>
</div>
</div>
For testing reasons I did this:
$(".submittest").click(function(e) {
alert('test');
e.preventDefault();
});
The alert does not work from buttons inside the popover, but from buttons placed on the rest of the page.
How can I get this to work?
Those DOM elements are not present at the time you are subscribing to the event.
You need to hook up to events in this fashion:
$(document).on("click", ".submittest", function(e){
alert("test");
});
I am using twitter bootstrap to share my post on social media, i have made a link whose popover with some buttons content, but further when i click on buttons in popover, their popover function does not work.
<div class="well text-center">
<button id="but1" title='Popover' class="btn btn-success" rel='popover' data-placement="bottom" data-toggle='popover2'>Share</button>
</div>
<div class='container hide' id='cont'>
<a onclick="Facebook()"
class="btn btn-default">
Facebook
</a>
<a onclick="twitter()"
class="btn btn-default">
Twitter
</a>
<a class="btn btn-default"
data-placement="bottom" data-toggle="popover" data-title="Login" data-container="body"
type="button" data-html="true" href="#" id="login">
Email
</a>
</div>
<div id="popover-content" class="hide">
<form class="form-inline" role="form">
<div class="form-group">
<input type="text" placeholder="Name" class="form-control" maxlength="5">
<button type="submit" class="btn btn-primary" onclick="EmailToSomeOne();">Send</button>
</div>
</form>
</div>
and the js
$('#but1').popover({
html: true,
content: $('#cont').html()
});
$("[data-toggle=popover]").popover({
html: true,
content: function() {
return $('#popover-content').html();
}
});
function Facebook(){
alert('share on facebook');
}
function twitter(){
alert('share on twitter');
}
function EmailToSomeOne(){
alert('Email to send');
}
for more clearing i have created a fiddle also.
Your code works fine. Its just a jsFiddle setting issue.
In your fiddle select no wrap (head) in the dropdown on the left, click Run and it will work.
See example
When onLoad is selected your functions are defined within the closure of the $(document).ready(function() {}); only. Thats the reason it shows the error Uncaught ReferenceError: Facebook is not defined (see the console)
BTW, here's an equivalent example on plunkrenter link description here
You can simply bind the buttons with an id like
<a id="Facebook"class="btn btn-default">Facebook </a>
and access it using
$("#Facebook").on('click',function(){
alert('share on facebook');
})
EDIT:
You cannot have nested popover in bootstrap.However you can use the below two approaches
1)You can change the html inside the popover and display your email form
$('.popover-content').html($('#emailform').html())
Please refer to the fiddle attached for this appproach
https://jsfiddle.net/mohit181191/mxstLfnf/
2)You can open a modal on popover button click.
<a data-toggle="modal" data-target="#facebook"
class="btn btn-default">
Please refer to the below fiddle for this approach
http://jsfiddle.net/mohit181191/o35zqy7w/
Bootstrap not support the Nested popover
http://getbootstrap.com/javascript/#modals
Use this :
$('body').on('click',".btn-default", function(){
alert('share on facebook');
});
.btn-default change this to your button default id
I'm starting to think that this may not even be possible, but I'm trying to automate a backend management task for myself here by allowing multiple emails to be initiated at once.
I have a table with users. The last column of the table has a drop-down button with mailto links that initiate various emails to the user for that row. The column also has a checkbox next to the button. Here's a simplified snippet:
<table>
<tr>
<td>
User
</td>
<td>
<div class="btn-group individual-btn">
<a class="btn btn-default dropdown-toggle" href="#" data-toggle="dropdown">
Email User
<ul class="dropdown-menu">
<li>
<a class="no-open" href="mailto:user?subject=why&body=etc">
Why didn't you open?
</a>
<a class="no-open" href="mailto:user?subject=why&body=etc">
Why didn't you click?
</a>
<a class="no-open" href="mailto:user?subject=why&body=etc">
Why didn't you pay?
</a>
</ul>
</div>
<input type="checkbox" class="selected-row">
</td>
</tr>
<tr>
rinse and repeat...
At the end of the table I have a button with the same set of actions but the idea for this button is that clicking it will open an email for every selected user (as indicated by the checkbox).
<div class="btn-group master-btn">
<a class="btn btn-default dropdown-toggle" href="#" data-toggle="dropdown">
Email All Checked Users
<ul class="dropdown-menu">
<li class="email-items">
<a class="no-open" href="#">
Why didn't you open?
</a>
<a class="no-open" href="#">
Why didn't you click?
</a>
<a class="no-open" href="#">
Why didn't you pay?
</a>
</ul>
</div>
I thought the js might be this easy:
$(".master-btn .email-items a").click(function(e){
linkClass = "a." + $(this).attr("class").trim()
$(".selected-row:checked").prev(".individual-btn").find(linkClass)[0].click();
e.preventDefault();
});
But that only opened an email for the first selected row. So, I thought, well maybe the dom needs space between these clicks, so I'll iterate over each and put a delay in to simulate clicks; but same result: only the first selected row is emailed:
$(".master-btn .email-items a").click(function(e){
linkClass = "a." + $(this).attr("class").trim()
$(".selected-row:checked").each(function(i){
var self = this
setTimeout(function(){
$(self).prev(".individual-btn").find(linkClass)[0].click();
}, 2000*i);
});
e.preventDefault();
});
Any thoughts? Will the browser even allow this?
Working example: https://jsfiddle.net/gaboom/h81qov5g/
$("#send").on("click", function(event) {
event.preventDefault();
$("#iframes").empty();
$("#links a").each(function() {
setTimeout($.proxy(function() {
var popup = window.open($(this).attr("href"))
setTimeout($.proxy(function() {
this.close();
}, popup), 100);
}, this), 100)
})
})
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a id="send" href="#">CLICK TO SEND</a>
<div id="links" class="hidden">
John
Sarah
John
Sarah
John
Sarah
</div>
I think this is the fix:
$(".selected-row:checked").prev(".individual-btn").find(linkClass).each(function() {
$(this)[0].click();
});
When you use [0] on a jQuery object, it only returns the first DOM element in the collection, equivalent to .get(0). If you want an array of all DOM elements, you would have to use .get() (with no arguments it returns all the elements).
My HTML page contains:
<a id="show" href="monlien1" onclick="show()"> Facebook</a>
<a id="show" href="monlien2" onclick="show()"> Twitter</a>
<a id="show" href="monlien3" onclick="show()"> Google</a>
I want to show the href attribute for each click. For example if I click on "Facebook", it will show monlien1, on "Twitter" monlien2, etc.
I tried this but it shows only the value of the first link, monlien1, even if I click on "Twitter" or "Google".
function show(){
var lien=$('#show').attr('href');
alert(''+lien+'');
}
How can I do this?
Start using classes (you shouldn't have the same ID multiple times, it will cause issues) also, pass in this as an argument:
<a class="show" href="monlien1" onclick="show(this)"> Facebook</a>
<a class="show" href="monlien2" onclick="show(this)"> Twitter</a>
<a class="show" href="monlien3" onclick="show(this)"> Google</a>
function show(obj) {
var lien = obj.href;
alert(''+lien+'');
}
Edit: Thanks #FelixKling -- the equivalent to $('#show').attr('href') is obj.getAttribute('href'). obj.href will return a full URL not the actual value of the href attribute.
You cannot have multiple elements with same ID. $('#show') will always select the first elements with that ID.
Give the elements a class and use jQuery to bind the event handler:
<a class="show" href="monlien1"> Facebook</a>
<a class="show" href="monlien2"> Twitter</a>
<a class="show" href="monlien3"> Google</a>
and
$('.show').click(function() {
alert($(this).attr('href'));
});
Learn about jQuery and event handling: http://learn.jquery.com/events/.