That's my first question here, I've searched on stackoverflow but couldn't succeed to find the proper answer.
So, I've implemented a bootstrap popover which content is showing up only at the first click.
My problem happen when I open this popover a second time : the content is not showing up.
Here is the html code:
<a href="#" data-toggle="popover" data-placement="bottom" data-trigger="focus">
yolo
</a>
<div id="clickGoogle" style="display:none;" class="open_modal">
Change banner<hr>
Change avatar<hr>
Edit profile
</div>
Followed by the JS code:
$(function() {
$('[data-toggle="popover"]').popover({
html:true,
content : function() {
$('#clickGoogle').css({'display':'block'});
return $('#clickGoogle');
}
});
});
I con't figure out WHY the #clickGoogle doesn't show up when I want to open the popover a second time...??
I hope I'm sufficiently clear in my explanations, if no, tell me!
Thank you for your help on that ;)
<!doctype html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script>
$(function() {
$('[data-toggle="popover"]').popover({
html:true,
content : function() {
$('#clickGoogle').css({'display':'block'});
return $('#clickGoogle');
}
});
});
</script>
</head>
<body>
<a href="#" data-toggle="popover" data-placement="bottom" data-trigger="focus">
yolo
</a>
<div id="clickGoogle" style="display:none;" class="open_modal">
Change banner<hr>
Change avatar<hr>
Edit profile
</div>
</body>
</html
EDIT:
The solution provided is working but is at the same time deactivating the links, so I’m looking for another solution
I'm not sure why, but it seams that your popup is removing the content element from the DOM on popup destroy. Since you are passing your element via reference, that might be why it is removed aswell.
To fix that, I've simply returned the HTML of the element, using the Jquery function html() rather than the element itself.
Note here that you don't need to change the css anymore.
<!doctype html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script>
$(function() {
$('[data-toggle="popover"]').popover({
html:true,
content : function() {
return $('#clickGoogle').html();
}
});
});
</script>
</head>
<body>
<a href="#" data-toggle="popover" data-placement="bottom" data-trigger="focus">
yolo
</a>
<div id="clickGoogle" style="display:none;" class="open_modal">
Change banner<hr>
Change avatar<hr>
Edit profile
</div>
</body>
</html
Related
I have set up a html page to display a timeline using jquery.timeline.min.js library.
I get the timeline displayed but no events are added to it.
Its the basic example given at the help page on the github of this library at https://ka2.org/getting-started/
What am i missing, my code is the following
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='dist/jquery.timeline.min.css'>
<script type='text/javascript' src='script/jquery-3.3.1.min.js'></script>
<script src='dist/jquery.timeline.min.js'></script>
</head>
<body>
<!-- Timeline Block -->
<div id="myTimeline">
<ul class="timeline-events">
<li data-timeline-node="{ start:'2019-02-26 10:00',end:'2019-02-26 13:00',content:'<p>Event Body...</p>' }">Event Label</li>
<li data-timeline-node="{ start:'2019-03-01 23:10',end:'2019-03-02 1:30' }">
<span class="event-label">Event Label</span>
<span class="event-content"><p>Event Body...</p></span>
</li>
</ul>
</div>
<!-- Timeline Event Detail View Area (optional) -->
<div class="timeline-event-view"></div>
<script>
$("#myTimeline").Timeline();
</script>
</body>
</html>
You need to make two changes.
initialize timeline inside jquery on-ready event.
set startDatetime of your timeline while initializing.
please see below
<script>
$(function () {
$("#myTimeline").Timeline({
startDatetime: "2019-02-25 00:00"
})
})
</script>
hope it helps.
thanks
I want to create a tab UI element with Semantic UI.
I have the following code in my html file:
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.1.min.js"></script>
</head>
<h1>Braitenberg Playground</h1>
<div class="ui top attached tabular menu">
<a class="active item" data-tab="first">One</a>
<a class="item" data-tab="second">Two</a>
<a class="item" data-tab="third">Three</a>
</div>
<div class="ui bottom attached tab segment" data-tab="first">First</div>
<div class="ui bottom attached tab segment" data-tab="second">Second</div>
<div class="ui bottom attached tab segment" data-tab="third">Third</div>
<script>
$('.menu .item')
.tab()
;
</script>
</html>
The Tab UI is created but unfortunately, they are not activated when clicked. I can't figure out why that is
Your code works fine. https://jsfiddle.net/85mm5uq7/
The issue is that you have a typo. :(
<script src="https://code.jquery.com/jquery-3.1.1.1.min.js"></script>
should be
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
I solved the problem by altering the js script.
It now explicitly adresses the tabs, setting it active/unactive on click:
$(document).ready(function(){
$('.ui .item').on('click', function() {
$('.ui .item').removeClass('active');
$(this).addClass('active');
var tab = $(this).attr("data-tab");
$(".tab.segment").removeClass("active");
$(".tab.segment[data-tab=\"" + tab + "\"]").addClass("active");
});
});
thanks for pointing out the typo in the beginning and for investing your time!
A bit late but perhaps can help someone. I get it working changing the order of jquery and semantic scripts. The jquery script must be imported first:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui#2.4.2/dist/semantic.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui#2.4.2/dist/semantic.min.js"></script>
Ive created a simple tooltip using bootstrap and JQuery. But the delay time for the tooltip simply doesn't work for me. Its taking obviously longer than 100 milliseconds.
HTML:
<p class="myHover" onclick="jobFunction()" data-toggle="tooltip" title="Hooray!" data-delay=100>GIS Researcher</p>
JavaScript:
$(document).ready(function(){
$(".myHover").tooltip();
});
Ive properly referenced bootstrap and jQuery in my head tag.
Works fine for me. Your fiddle didn't load any of the required libraries.
I changed your paragraph to a span and set the tooltip placement to bottom to make it show up in a more sensible location.
$(document).ready(function() {
$(".myHover").tooltip();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<span class="myHover" data-toggle="tooltip" title="Hooray!" data-delay="100" data-placement="bottom">GIS Researcher</span>
Using JQuery, I need to write a function, called on click for any of the two buttons (edit0, edit1).
I have the following code:
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$('[id^=edit]').click(function() {
alert("1111");
});
</script>
</head>
<body>
<button id="edit0" class="edit"> edit </button>
<button id="edit1" class="edit"> edit </button>
</body>
</html>
When I run it, nothing happens on button click.
I tried to replace the script with:
$('button[class="edit"]').click(function() {
alert('1111');
});
But the result is the same.
You can simply use CSS3 [attribute^=value] Selector to implement 'click event on all buttons with id starting with custom text' as you wish, like below.
$('button[id^="edit"]').click(function() {
alert('111');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<button id="edit0" class="edit"> edit </button>
<button id="edit1" class="edit"> edit </button>
<script type="text/javascript">
$('[id^=edit]').click(function() {
alert("1111");
});
</script>
</body>
</html>
And also, put your code just before the closure </body> tag to ensure your dom is ready when the code runs.
I normally see that syntax for addressing custom attributes, try this.
$('button.edit').click(function() {
alert('1111');
});
Also put your script below your HTML. Or use a jQuery on document ready. Remember JavaScript/JQuery are executed sequentially.
I do something like this:
$("#id1").html(data);
I refill a div with html but when I try to get the html of a child of this refilled div I get an empty string although it has, it's like the old child is still there but without html.
Edit:
I tried to reproduce my problem, here is the html: (click 2x times on refill and after click open you will see that nothing is going to happen)
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/dot-luv/jquery-ui.css"/>
</head>
<body>
<script type="text/javascript">
$(function(){
$("#r1").click(function(){
var x = $("#main").html();
$("#main").html(x);
});
});
</script>
refill
<div id="main">
<a id="a1" href="#" >open</a>
<script type="text/javascript">
$(function(){
$("#a1").click(function(){$("#forDialog").dialog();});
$("#a2").click(function(){$("#forDialog").dialog('close');});
});
</script>
<div id="forDialog">
hi
<a id="a2" href="#" >close</a>
</div>
</div>
</body>
</html>
I'm generating this javascript dynamically so the scripts that register a1.click and a2.click need to be inside the main div
I'm not quite sure as to the exact goal of your code, but I can make 3 general suggesions:
Use .delegate() to attach to once and future elements.
You can .hide() the HTML for you dialog box.
You can prevent the page from refreshing when a link is clicked using event.preventDefault(); in the click handler of that link.
Applying those suggestions to your code results in the following working code:
<script type="text/javascript">
$("body").delegate("#a1", "click", function(){
$("#forDialog").dialog();
});
$("body").delegate("#a2", "click", function(){
$("#forDialog").dialog('close');
});
$(function(){
// Hide HTML for the dialog.
$("#forDialog").hide();
$("#r1").click(function(event){
var x = $("#main").html();
$("#main").html(x);
// If you don't want the page to refresh by clicking
// on this A element, use the following:
event.preventDefault();
});
});
</script>
refill
<div id="main">
<a id="a1" href="#" >open</a>
<div id="forDialog">
hi
<a id="a2" href="#" >close</a>
</div>
</div>
jsFiddle example
The old sub-DOM under the element will be gone after you reset its content with .html(stuff). It may exist floating around in memory somewhere, but it's detached from the DOM and you can't get at it.