I am trying to do a Bootstrap switch, by default it's set to off but when I click on it does not change?
I grabbed the codes of this site where it works fine: http://www.bootply.com/92189
Maybe I'm missing something? I'm really not sure.
EDIT:
Why does it not work with the javascript in the script tags, but instead it works in JSFiddles javascript container?
http://prntscr.com/47xuqk
http://prntscr.com/47xuy6
thanks
JSFiddle HERE
Javascript:
$('.btn-toggle').click(function() {
$(this).find('.btn').toggleClass('active');
if ($(this).find('.btn-primary').size()>0) {
$(this).find('.btn').toggleClass('btn-primary');
}
if ($(this).find('.btn-danger').size()>0) {
$(this).find('.btn').toggleClass('btn-danger');
}
if ($(this).find('.btn-success').size()>0) {
$(this).find('.btn').toggleClass('btn-success');
}
if ($(this).find('.btn-info').size()>0) {
$(this).find('.btn').toggleClass('btn-info');
}
$(this).find('.btn').toggleClass('btn-default');
});
$('form').submit(function(){
alert($(this["options"]).val());
return false;
});
HTML:
<h4>Tiny</h4>
<div class="btn-group btn-toggle">
<button class="btn btn-xs btn-default">ON</button>
<button class="btn btn-xs btn-primary active">OFF</button>
</div>
You haven't included jQuery, which is a required dependency for certain Bootstrap elements. You're also referencing the default global jQuery variable ($).
Add the jQuery framework and you should be good to go:
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Related
I'm trying to trigger the click event of a button inside a form using jQuery.
$(".switchLang").on("click", function(e) {
console.log("Clicked!")
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="form-inline" action="">
<button type="button" class="btn mr-3 btn-link transparent switchLang">${{index.keys.lng}}$</button>
<button type="button" class="btn mr-3 btn-outline-light">${{index.keys.login}}$</button>
<button type="button" class="btn btn-primary">${{index.keys.getStarted}}$</button>
</form>
The function above is not invoked!
After research, I tried many solution but nothing's work. Like adding e.preventDefault(); inside the function also remove .click and replaced with .on and so on, but nothing works!
I have referred to this question: here.
Thanks.
Solved
I double checked my code. the html is written inside script of type text/template and this template is rendered before the jquery code. Thanks.
You could try
$(document).on("click",".switchLang",function (e) {
console.log("Clicked!")
});
Try this might help
$(document).on('click', '.switchLang', function (e) {
console.log("Clicked!")
});
You need to wait for the document to be ready before adding the click handler, like so:
$(document).ready(function () {
$('.switchLang').on('click', function (e) {
console.log("Clicked!")
});
});
I cannot make the vOffset working in Foundation. I followed the documentation but I am failing in this simple task. In foundation we can either specify data-v-offset attribute on html or pass vOffset to options while initializing.
Fiddle I made:
https://jsfiddle.net/amir734jj/exyy4eLz/
Code for completeness:
<div class="container">
<button class="button" type="button" data-toggle="example-dropdown">Top Aligned</button>
<div class="dropdown-pane right" id="example-dropdown" data-dropdown>
Just some junk that needs to be said. Or not. Your choice.
</div>
</div>
$(document).ready(function() {
var element = new Foundation.Dropdown($("#example-dropdown"), {
hover: true,
vOffset: 150
});
$("#example-dropdown").foundation();
});
Update: my final goal is to make the bottom of Dropdown be at the same level as the button (i.e. use vOffset by $("#example-dropdown").height())
You have to use data-option attribute like this to achieve the results. Refrence here .
How to use data-option method in the html:
1. To use any attribute just dont use any hyphen and data text in the initializaion.
2. To use multiple attributes use semicolon as separator.
<div class="dropdown-pane right" id="example-dropdown" data-dropdown data-options="vOffset:100; hover: true;">
Just some junk that needs to be said. Or not. Your choice.
</div>
$(document).foundation();
.container {
margin: 15rem;
margin-top:0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/js/foundation.js"></script>
<div class="container">
<button class="button" type="button" data-toggle="example-dropdown">Top Aligned</button>
<div class="dropdown-pane " id="example-dropdown" data-dropdown data-options="vOffset:100;hOffset:80; hover:true; ">
Just some junk that needs to be said. Or not. Your choice.
</div>
</div>
I want to bind a function to a button with the .on method. Here is my button:
<button class="btn btn-primary col-md-offset-2 col-md-4" type="button" id="reg">Register</button>
And here is my script.
$(document).ready(function(){
$("#reg").on("click", function(){
alert("Its working!!!");
});
});
I know that my code is not wrong, but I still can't make it work.... I have include all the libraries in my <head>. But the button does nothing.
You are not wrong your code is working fine
$(document).ready(function(){
$("#reg").on("click", function(){
alert("Its working!!!");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<button class="btn btn-primary col-md-offset-2 col-md-4" type="button" id="reg">Register</button>
If button adding dynamically try to use:
$(document).ready(function(){
$("body").on("click", "#reg", function(){
alert("Its working!!!");
});
});
Please add the jquery library in head tag and it will work fine.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
I have blocks of HTML & JS and want to compile it all in to one JS file so I can use a one line embed on external client sites. Like <script src="http://example.com/assets/js/myembed.min.js"></script>
Sample Code
<div class="page-container">
<div class="container">
<br />
<button class="btn launchConfirm">Launch Confirm</button>
</div>
</div>
<div id="confirm" class="modal hide fade">
<div class="modal-body">
Do you want to continue?
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-primary" data-value="1">Continue</button>
<button type="button" data-dismiss="modal" class="btn" data-value="0">Cancel</button>
</div>
</div>
<script>
$('.launchConfirm').on('click', function (e) {
$('#confirm')
.modal({ backdrop: 'static', keyboard: false })
.one('click', '[data-value]', function (e) {
if($(this).data('value')) {
alert('confirmed');
} else {
alert('canceled');
}
});
});
</script>
Should I wrap it all in document.write or is the a better method to achieve this? And if this is the best way, what is the best way to do this automatically, I.e. Using Grunt/Gulp?
E.g.
document.write("<div class=\"page-container\">");
document.write(" <div class=\"container\">");
document.write(" <br \/>");
document.write(" <button class=\"btn launchConfirm\">Launch Confirm<\/button>");
document.write(" <\/div>");
document.write("<\/div>");
Thanks in advance.
Do not use document.write.
var x = '<div> All your html code store in variable </div>';
$("#InsertHere").html(x); // insert where you want
or document.getElementById("InsertHere").innerHTML = x;
// continue your actual code once those elements are ready
$('.launchConfirm').on('click', function (e) { }
It is quite not possible to embbed html code without using DOM insertion methods which always requires selector. You could create a unique class name
and the tag that has that class name will be inserting this code. This is what jQuery does too.
<div class=".innerHTML"></div> // you have to ask them to create such element
Quick and dirty would be to copy the HTML to text-editor of choice, replace newlines and indentation, then add all html as one line. And use single quotes so you dont have to escape the double-quotes
Whenever I remove a dom element that precedes an element that has a ng-click attribute specified, it will no longer call the function that the ng-click references.
Here is an example of it not working. Note: if you change if(true) to if(false) and click save it will properly call the function.
function MainCtrl($scope) {
$scope.submit = function() {
alert('submitted');
}
function load() {
if(true){
$('#resetPassword').remove();
}
}
load();
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app>
<div ng-controller="MainCtrl">
<div class="btn-group m-b-20 pull-right" role="group">
<button type="button" id="resetPassword" class="btn btn-success">Reset Password</button>
<button type="button" class="btn btn-success" ng-click="submit();">Save</button>
</div>
</div>
</div>
I don't know why this is happening, but you should not use jQuery. Use ng-if to add or remove the button on condition. That's the way to go with Angular. jQuery's remove here looks dirty. ng-show just show or hides, but ng-if adds or removes the element from the DOM. It's what you want, and by far the simplest solution.
You should try to accomplish this with a custom directive. E.g:
JS
app.directive("removeClick", function() {
return {
link:function(scope,element,attrs)
{
element.bind("click",function() {
element.remove();
});
}
}
});
HTML
<div ng-app>
<div ng-controller="MainCtrl">
<div class="btn-group m-b-20 pull-right" role="group">
<button type="button" id="resetPassword"class="btn btn-success">Reset Password</button>
<button remove-click type="button" class="btn btn-success" ng-click="submit();">Save</button>
</div>
</div>
</div>
You are free to use getElementbyId at this point, although you should probably try to pass the correct element to your directive. This will probably give you a basic understanding of angular directives.
https://docs.angularjs.org/guide/directive