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.
Related
I am new to Bootstrap, and I am trying to make a popover appear from clicking a button element. As far as I can tell I initialized bootstrap and the popover element correctly, but the popup element does not appear when I click my button.
I also do not see any errors or info in the console when I click the button, but the button itself gets a border around it when I click it which makes me think that the popover function is doing something and applying at least the bootstrap styles.
Here is my jQuery and Bootstrap initialization:
<!---JQuery Iniialization --->
<script src="/jquery/jquery.min.js"></script>
<script src="/jquery/libs/jqueryui/jquery-ui.min.js"></script>
<link rel="stylesheet" href="/jquery/libs/jqueryui/jquery-ui.theme.min.css"/>
<link rel="stylesheet" href="/jquery/libs/jqueryui/themes/smoothness/jquery-ui.min.css" />
<!---Bootstrap Iniialization --->
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
Here are my html elements and javascript function:
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover() ;
});
</script>
<button type="button" class="btn btn-secondary mx-2" data-container="body" data-toggle="popover" tabindex="0" title="Details" data-trigger="focus" title="Details" data-content="And here's some amazing content. It's very engaging. Right?">
<i class="fa-light fa-memo-circle-info"></i></button>
Am I missing something?
i added this cdn and it worked
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
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>
I've come back to web development after a lengthly lay off, I'm using bootstrap and creating a simple contact form. If there is an error with validation I want to add a couple of classes to make the form element turn red and put the little cross in the input.
I've used the examples from the bootstrap site and I get it to work fine. As soon as I put the content into a form the addClass doesn't stick. The input flashes red and goes back to the grey border. I've stripped back my whole html to check it isn't anything else I've done and have narrowed the error down to the tags.
Any help greatly appreciated. PS my first post on here, apologies if I've missed anything
<html>
<head>
<title>Form</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<style type="text/css">
#emailError{
display: none;
}
</style>
</head>
<body>
<div class="container">
<form>
<div id="emailDiv" class="form-group">
<label class="form-control-label" for="inputDanger1">Input with danger</label>
<input type="text" class="form-control" id="email">
<div class="form-control-feedback" id="emailError">Sorry, that username's taken. Try another?</div>
<small class="form-text text-muted">Example help text that remains unchanged.</small>
</div>
<div class="form-element">
<input type="submit" value="Sign Up" id="submitBtn">
</div>
</form>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<script type="text/javascript">
$("#submitBtn").click(function(){
$("#emailError").show();
$("#emailDiv").addClass("has-danger");
$("#email").addClass("form-control-danger");
});
</script>
</body>
</html>
Like #AlonEitan said, you need to disable the default action of the form, which is to submit the form and that will reload the page. You can disable the action with e.preventDefault() or return false. You can disable it conditionally if you find errors, or you can disable it by default, then manually submit once the form is validated. Here's an example.
$("#submitBtn").click(function(e){
e.preventDefault();
if (there are errors) {
$("#emailError").show();
$("#emailDiv").addClass("has-danger");
$("#email").addClass("form-control-danger");
} else {
$('#formId').submit();
}
});
I want to provide a set of additional information in my bootstrap template. I want to have a set of terms and conditions with a plain english popover for certain key terms.
I've included all the correct links to the CDN and I get a popup from just the below code but when I view it as a whole page this stops working and just sends me back to the top of the page. Is there something that I need to bear in mind when doing this? I've spent days trying to tweak this to work?
Thank you
<!-- jQuery -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="js/popover.js"></script>
<!-- Plugin JavaScript -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<aside class="bg-dark">
<div class="container text-center">
<h2>An example of what we will do</h2>
<hr class="light">
Toggle popover
</div>
</aside>
<script>
$(document).ready(function() {
$('[data-toggle="popover"]').popover();
});
</script>
You didn't set right the CDN file. Please set the right path to the jquery library and try to remove the file jquery.slim if it's not required.
Checkout the snippet
$('[data-toggle="popover"]').popover();
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<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>
<aside class="bg-dark">
<div class="container text-center">
<h2>An example of what we will do</h2>
<hr class="light">
Toggle popover
</div>
</aside>
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?