Why is boostrap.js not loading? - javascript

I tried the following code in JSfiddle - it works, however, this does not work on my own local computer.
What could be the reason?
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script href='http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js'></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<input type="button" id="loading-example-btn" data-loading-text="Loading..." class="btn btn-primary" value = "loading state">
<script>
$('#loading-example-btn').click(function () {
var btn = $(this)
btn.button('loading')
});
</script>

script tag does not have href attribute. It contains src attribute.
so
<script src='http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js'> </script>
will work.

You have to write your jQuery script inside doucment.ready function also you have loaded jQuery library after booststrap.js, this should be loaded before
try this :
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src='http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js'></script>
<input type="button" id="loading-example-btn" data-loading-text="Loading..." class="btn btn-primary" value = "loading state">
<script>
$(document).ready(function()
{
$('#loading-example-btn').click(function () {
var btn = $(this)
btn.button('loading')
});
});
</script>

Related

Button loader using bootstrap

I am trying to replicate this codepen example
https://codepen.io/jmalatia/pen/eYLzBg?editors=1111
However, it doesn't work in my Visual Studio Code as in the site. I have included all the css and js files spicified there but I can't see anything else more than the button. I can't display the loader animation. Am I missing anything? I included these sources as indicated in the codepen example. I am not sure if I am missing any library, maybe.
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script type="text/javascript" src="script.js"></script>
Maybe they are not in the right order. Please, I need some help figuring this out.
$('.btn').on('click', function() {
var $this = $(this);
$this.button('loading');
setTimeout(function() {
$this.button('reset');
}, 8000);
});
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div style="margin:3em;">
<button type="button" class="btn btn-primary btn-lg " id="load1" data-loading-text="<i class='fa fa-circle-o-notch fa-spin'></i> Processing Order">Submit Order</button>
<br>
<br>
<button type="button" class="btn btn-primary btn-lg" id="load2" data-loading-text="<i class='fa fa-spinner fa-spin '></i> Processing Order">Submit Order</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
Did you link all the assets currently? I have checked the code it's worked perfectly on my side. right now I don't have your code to check where the problem is. make sure all CSS files are linked in a head tag. and script files are before the body stage is over. check browser console, if there is an error in the browser console please share a screenshot. thank you
Try running this script at the end of the Js links.
<script>
$('.btn').on('click', function() {
var $this = $(this);
$this.button('loading');
setTimeout(function() {
$this.button('reset');
}, 8000);
});
</script>

Remove disabled class onclick

I'm using jQuery function to add disabled class onclick, it is working fine. But I want to remove the class by clicking on other button, that is not working can anyone help me with this? This is code...
//Delay add disabled class on cart
$('.fa-shopping-cart').on('click',function(){
var $this = $(this).addClass('finsihed');
window.setTimeout(function(){
$this.addClass('disabled-button');
}, 1500); //<-- Delay in milliseconds
});
function reEnableBtn(prodId) {
alert(prodId);
// var $this = $(this).removeClass('finsihed');
// window.setTimeout(function(){
// $this.removeClass('disabled-button');
// }, 1500); //<-- Delay in milliseconds
$('.festi-cart-remove-product').removeClass('disabled-button');
};
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<i class="fa fa-shopping-cart finsihed disabled-button"></i>
Re-enable button
I hope you guys understand my question..
In the function reEnableBtn, $('.festi-cart-remove-product') doesn't exist.
Change :
$('.festi-cart-remove-product').removeClass('disabled-button');
To :
$('.fa-shopping-cart').removeClass('disabled-button');
As I came to understand your question, please check given link or snippet if this is what you want...
var $this = '#cart';
$(document).on('click','#blockr,'+$this,function(){
$($this).addClass('disabled');
})
$(document).on('click','#openr',function(){
$('#cart').removeClass('disabled');
})
.disabled{
color:#333;
}
<!DOCTYPE html>
<html>
<head>
<link data-require="font-awesome#4.7.0" data-semver="4.7.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link data-require="bootstrap#3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script data-require="bootstrap#3.3.7" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script data-require="jquery#3.1.1" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<button class="btn btn-default" id="cart">
<i class="fa fa-shopping-cart finsihed disabled-button"></i>
</button>
<br /> <br />
<a class="btn btn-default" id="blockr" href="#!">Disabled button</a>
<a class="btn btn-default" id="openr" href="#!">Re-enable button</a>
</body>
</html>
link: http://plnkr.co/edit/3m9mKo8EQkGnjpqs54U6?p=preview
or you can comment if you want something modified in it. Hope it helps you.

How to detect which button is clicked in Jquery

i have code like this :
#foreach(....)
<div class="col-md-3">
<div class="thumbnail">
<!-- content --!>
<button class="btn btn-success btnEdit">Edit</button>
</div>
</div>
#endforeach
and i tried like this in my jquery
$(".btnEdit").on("click", function(){
alert("clicked");
});
but if i clicked the button, the alert never showed up, how to solve my case??
*note : sorry if question like this was discuss before
thanks
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" media="screen" />
</head>
<body>
<div class="col-md-3">
<div class="thumbnail">
<button class="btn btn-success btnEdit">Edit</button>
</div>
</div>
</body>
<script>
$(".btnEdit").on("click", function(){
alert("clicked");
});
</script>
The alert works fine.Have you added jquery plugins to your code?
Have you included jquery? Try to wrap it using $(document).ready(function(){})
$(document).ready(function(){
$(".btnEdit").on("click", function(){
alert("clicked");
});
});
Answer for headline question:
How to detect which button is clicked in jQuery
<tr><td>...<button class="btn btn-success btnEdit">Edit</button>...</td></tr>
<tr><td>...<button class="btn btn-success btnEdit">Edit</button>...</td></tr>
<tr><td>...<button class="btn btn-success btnEdit">Edit</button>...</td></tr>
$(document).ready(function(){
$(".btnEdit").on("click", function(){
var $button = $(this);
});
});
Can be used for handling listed parts (rows ...)

assign value to a text box from jQuery

In the form, I have put a textbox and a button as:
<input type="text" class="form-control" id="txtCustomerId" placeholder="Customer ID">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button" data-toggle="modal" data-target="#LovCustomer"><i class="fa fa-list"></i></button>
</span>
when this button is pressed, a modal form (bootstrap) is popped up. I have placed a button on the modal form as:
<td><button id="LSSL" value="LSSL" class="btn btn-info btn-xs"><i class="fa fa-caret-right"></i></button></td>
I have below jQuery in <head>:
$(function(){
$('#LSSL').click(function(){
$('#txtCustomerId').val($(this).val());
});
});
My requirement is to obtain the value of the button being pressed (in the modal form) and assign it to the txtCustomerId of the parent form. But when I press the button, page gets refreshed and the text filed is blank (since it is refreshed).
I think the value is assigned but since the page is refreshed, assigned value vanishes.
I would like to know either to stop the page refresh or any other way of getting this achieved.
Thanks in advance.
Below is my <head> section for your reference:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(function(){
$('button').click(function(e){
e.preventDefault();
var value = $(this).val();
$('#txtCustomerId').val(value);
});
});
</script>
</head>
Your button should be like this,
<td><button type="button" id="LSSL" value="LSSL" class="btn btn-info btn-xs"><i class="fa fa-caret-right"></i></button></td>
And in Js part, you can do preventDefault(),
$(function(){
$('#LSSL').click(function(e){
e.preventDefault();
var value = $(this).attr('value');
$('#txtCustomerId').val(value);
});
});
//You can also use $(document).ready(function(){}) as well.
$(document).ready(function(){
$('#LSSL').click(function(e){
e.preventDefault();
var value = $(this).attr('value');
$('#txtCustomerId').val(value);
});
});
Use
preventDefault() to stop the default behavior of button
$(function(){
$('#LSSL').click(function(e){
e.preventDefault();
alert($(this).val());
});
});
or use
<input id="LSSL" type="button" value="Click" onclick="doSomething(this)">
function doSomething(obj) {
alert(obj.value);
}

Can't get Bootstrap Plugin to work

http://jsfiddle.net/jzhang172/s83yt1L6/
I'm having trouble getting the button to work. It should work like here on the bootstrap site:
http://getbootstrap.com/javascript/#buttons
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
Loading state
</button>
<script>
$(function(){
$('#myButton').on('click', function () {
var $btn = $(this).button('loading')
// business logic...
$btn.button('reset')
});
});
</script>
you reset the button immediately after it changed to 'loading' so you can't see it changed.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
Loading state
</button>
<script>
$(function(){
$('#myButton').on('click', function () {
var $btn = $(this).button('loading');
setTimeout(function(){$btn.button('reset');}, 1000);
// business logic...
});
});
</script>

Categories