When bootstrap popover is outputed in html() it doesn't work. Only the title is shown. Is there any fix to this?
You can also see the fiddle
$( "button" ).click(function() {
$("p").html('Hover over me');
});
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<p>Click the button to add popover</p>
<button class="btn">button</button>
</div>
The popover should be initiated after the button is clicked. The document ready will only load once when the page is loaded.
$("button").click(function() {
$("p").html('Hover over me');
$('[data-toggle="popover"]').popover();
});
https://jsfiddle.net/fLcz90q3/
$('[data-toggle="popover"]').popover(); call this code after updating html in <p> tag. you have to re-initiate after appending/over writing html. You have to add above code inside click event.
Code inside $(document).ready() will only works for when page loads. To achieve on dynamically created element, you have to initiate after creating/updating element.
$( "button" ).click(function() {
$("p").html('Hover over me');
$('[data-toggle="popover"]').popover();
});
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<p>Click the button to add popover</p>
<button class="btn">button</button>
</div>
Related
I am trying to get the status of a toggle button in semantic UI but am having issues. The state and isChecked properties are coming back as undefined.
Here is my sandboxed example:
<script src="https://code.jquery.com/jquery-3.1.1.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui#2.4.2/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/semantic-ui#2.4.2/dist/semantic.min.js"></script>
<button class="ui toggle button" id="tgl">Select All</button>
<script>
$('#tgl').click(function(){
$(this).toggleClass('active');
alert($(this).isChecked)
});
</script>
As you can see, this comes back as undefined.
With this code I want to show a jQuery UI dialog when I click on a button. However, the text of the dialog is shown for a brief time when the page loads. What is the right way to implement this?
My html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
</head>
<body>
.. html code ..
<button id="helpbutton" title="">Help</button>
<div id="helpdialog" title="Help dialog">
<p>Text in the dialog will be visible for a short time when the page loads</p>
</div>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<script type="text/javascript" src="myJsFile.js"></script>
</body>
</html>
as you can see, I call my external scripts just before the end of the for performance reasons.
myJsFile.js:
//Fire up the help dialog when the help button is pressed
jQuery(function() {
jQuery( "#helpdialog" ).dialog({
autoOpen: false
});
jQuery( "#helpbutton" ).click(function() {
jQuery( "#helpdialog" ).dialog( "open" );
});
});
Solution (thanks to krzmig): Use this CSS code in the CSS file or in the section
#helpdialog {
display: none;
}
Did you load UI jQuery JS and CSS? Like in this example:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#dialog" ).dialog();
});
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
</body>
</html>
source: https://jqueryui.com/dialog/
edit:
For not showing dialog box when site is loading put to your CSS file code:
#helpdialog {
display: none;
}
or add to <head> section if you don't have external CSS.
<style>
#helpdialog {
display: none;
}
</style>
First include jquery as well.
Second place your scripts before your dialog in html so that it loads and hides the dialog before it could show up itself on your page. Here's the code (keep your myJsFile.js intact):
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button id="helpbutton" title="">Help</button>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="myJsFile.js"></script>
<div id="helpdialog" title="Help dialog">
<p>Text in the dialog will NOT! be visible for a short time when the page loads</p>
</div>
</body>
</html>
You also need to include jquery main library. The required includes are jquery library, jquery ui js, and jquery ui css.
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<script type="text/javascript" src="myJsFile.js"></script
I want to open Reveal Modal Popup when page loads, without clicking anything
Here is what have:
<!DOCTYPE html>
<head>
<title>Modal PopUp</title>
<link type="text/css" rel="stylesheet" href="css/style.css">
<link type="text/css" rel="stylesheet" href="css/reveal.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script type="text/javascript" src="js/jquery.reveal.js"></script>
<script language="JavaScript">
$(function() {
$( "#myModal" ).dialog();
});
</script>
</head>
<body>
<!-- #reveal modal popup -->
<div id="myModal" class="reveal-modal">
<h1>Reveal Modal Goodness</h1>
<p>This is a default modal in all its glory, but any of the styles here can easily be changed in the CSS.</p>
<a class="close-reveal-modal">×</a>
</div>
<!-- #reveal modal popup -->
</body>
</html>
I don't want to use this trigger:
Click Me For A Modal
It should open automatically.
Try this
$(document).ready(function() { //or $(window).load(function(){
$('#myModal').reveal($(this).data());
});
you can hide the anchor tag and click it programmatically:
Click Me For A Modal
$('#clickMe').click();
it will open without clicking any link or button on page but on behind we programmatically click it.
you can also do:
$("#myModal").reveal();
I'm trying to grab a specific div container of an external source. But unfortunately there are also div IDs inside this div container, which aren't needed.
The grabbing works, but the blocking doesn't. FYI: I'm new to JavaScript and searched already for a solution.
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="LinkToExternal.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#article').load('ExternalURL #DIV_Container');
});
document.getElementsByClassName('NotNeededClass').style.visibility = 'hidden';
document.getElementById('NotNeededID').style.visibility = 'hidden';
</script>
</head>
<body>
<div id="container">
<div id="article"></div>
<div id="article2"></div>
</div><!--container-->
</body>
The code you have for hiding the elements is firing right after the load function. The likely cause is that the elements you are trying to hide have not been loaded into the DOM. Place your code in a callback function of the load function, this will ensure that your elements have been loaded into the DOM.
<script type="text/javascript">
$(document).ready(function(){
$('#article').load('ExternalURL #DIV_Container',function(){
$('.NotNeededClass, #NotNeededID').hide();
});
});
</script>
I have a page, i want it to display some content in a modal dialog (jquery UI dialog) as soon as the page is loaded.
$(document).ready(function(){
$("#example").dialog();
});
<div id="example" class="flora" title="This is my title">
I'm in a dialog!
</div>
Thanks
Your div tag isn't properly formatted and it needs to be closed. The following worked for me, but it needs proper CSS files.
<html>
<head>
<script type="text/javascript" language="javascript"
src="jquery/jquery.js"></script>
<script type="text/javascript" language="javascript"
src="jquery/jquery.ui.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("#example").dialog({modal: true});
});
</script>
</head>
<body>
<div id="example" class="flora" title="This is my title">
I'm in a dialog!
</div>
</body>
</html>
Wayne Khan is right in that
the default behavior is to open when you call dialog(), unless you set autoOpen to false.
and tvanfosson has it nearly correct, though the default dialog is not Modal. To display a modal window, you must set the modal option to true
To illustrate, here's a trimmed-down excerpt from a small project I was working on tonight:
...
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript" src="./jquery-ui-personalized-1.6rc6.min.js"></script>
<script type="text/javascript" src="./init.js"></script>
<link rel="stylesheet" href="./css.css" type="text/css" />
<script type="text/javascript">
$(function() {
$('#exampleNode').dialog({
modal: 'true'
});
});
</script>
...
For your reference:
The jQuery Dialog Documentation (see the bottom for a styling reference)
A Modal Dialog example
My small MIT licensed project, which has a modal dialog: inComeAgain?