I am trying to run a function in the HTML file when the Select Template item is clicked. I have tried 2 different way but they don't seem to work. I got it to run with the onclick="google.script.run.selectTemplate" but I want to run the local function first.
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
</head>
<body>
<div class="content">
<div class="card mb-4 box-shadow">
<div class="card-body">
<h5 class="card-title">Welcome!</h5>
<p class="card-text">Please select the template that you'd like to fill with form responses!</p>
<div class="list-group mb-4">
<div id="select-template" onclick="runSelectTemplate();" class="list-group-item list-group-item-action">Select Template
<i class="fas fa-circle-notch fa-spin float-right" style="font-size:24px"></i>
</div>
</div>
<button type="button" id="get-started" class="btn btn-lg btn-block btn-primary" disabled>Get Started</button>
</div>
</div>
</div>
<script>
$(function() {
log("Setting up sidebar clicking...");
$('#select-template').click(runSelectTemplate);
});
function runSelectTemplate(){
log("Select Template clicked... run selectTemplate()");
//Do stuff here first, then;
google.script.run.selectTemplate(); //success: change icon to green -> enable getstarted button //error: icon to X then back to file
}
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
</body>
</html>
Update: I've tried updating the select-template element to a button, but it doesnt work either... The <script> section doesnt seem to run at all.
<button type="button" id="select-template" class="btn btn-med btn-block btn-outline-primary mt-4 mb-4">1. Select Template
<i class="far fa-file-alt float-right" style="font-size:24px"></i>
</button>
<button type="button" id="get-started" class="btn btn-lg btn-block btn-primary" disabled>Get Started</button>
Looks like I made a silly mistake... My jQuery script tag was at the bottom of the Body tag so it wasn't loaded right away.
<head>
<base target="_top">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"</script>
<script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
</head>
Related
Hi guys so I am making this project that retrieves a tweet from the president account and displaying it inside a card like the one shown in the picture. My problem is that I only know how to display just one card for one tweet but how do you display multiple cards for each tweet ?
In the javascript (first block) code I extract the tweets and insert them into the DOM or in this case the card. This is done inside Promise.
In HTML(second block) under <'!-->Card code block<--> has the block of code where I create the Card.
in case you were wondering I intend to visualize some data thats why I have d3 code in there. And all of this is running through a server if that changes anything
tweetData=d3.json("/tweets").then(function(data){
return data;});
Promise.all([tweetData]).then(function(values){
data=values[0];
console.log(data.length)
document.querySelector(".btn-jan").addEventListener('click',function(){
for (var x=3;x<=3;x++){
document.querySelector("#full_text").textContent=data[x].full_text;
document.querySelector("#created_at").textContent=data[x].created_at;}
});
// document.getElementById('#lk').setAttribute('href','https://twitter.com/statuses/?id=' + data.id_str);
});
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<title>Twitter app</title>
<!-- Bootstrap -->
<!-- Custom styling -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" type=text/css href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
<!-->img class="img-fluid" alt="Responsive image" src="{{ url_for('static', filename='head.jpg') }}"-->
<div class="text-center primary">
<h2>Trump</h2>
</div>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Month 2018
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<button class="btn-jan text-center"><li><a>January</a></li></button>
</ul>
</div>
<!-->Card code block<-->
<div class="card" style="width: 30rem;">
<div class="card-body">
<h6 class="card-subtitle mb-2 text-muted" id="created_at">Card subtitle</h6>
<p class="card-text" id="full_text"></p>
Card link
</div>
</div>
<!-- External JS libraries -->
<script src="http://d3js.org/d3.v5.min.js"></script>
<script src="https://d3js.org/d3-color.v1.min.js"></script>
<script src="https://d3js.org/d3-interpolate.v1.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="{{ url_for('static', filename='app.js') }}"></script>
<script src="{{ url_for('static', filename='style.css') }}"></script>
<!-- Custom JS -->
</body>
I was wondering if there may be a conflict between JQuery's and Boostrap 4's popover. When try to add a popover and load the page nothing is displayed when I click on the button element. See code example below:
<link href='https://use.fontawesome.com/releases/v5.0.10/css/all.css' rel='stylesheet'>
<link href='/css/fullcalendar.min.css' rel='stylesheet' />
<link href='/css/fullcalendar.print.min.css' rel='stylesheet' media='print' />
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css' />
<script src='/js/lib/moment.min.js'></script>
<script src='/js/lib/jquery.min.js'></script>
<script src='/js/fullcalendar.min.js'></script>
<script src='/js/gcal.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js'></script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
<div class="fc-right">
<div class="btn-group">
<button class="btn btn-primary" title="My Popover" data-toggle="popover" data-trigger="focus" data-placement="top" data-content="My popover content">?</button>
</div>
</div>
Adding the following noConflict code above the popover script does not appear to work either:
var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
Any assistant would be appreciated.
With the assistance of Smit I managed to resolve the issue by simplifying and using the following fiddle:
https://jsfiddle.net/ridgedale/xpbynn9w/#&togetherjs=80xVyj4TRc
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='https://use.fontawesome.com/releases/v5.0.10/css/all.css' rel='stylesheet'>
<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css' rel='stylesheet' />
<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.print.min.css
' rel='stylesheet' media='print' />
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css' />
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.0/locale/en-gb.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/gcal.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js'></script>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
</head>
<body>
<div id='cal-filters' class="fc-toolbar fc-header-toolbar">
<div class="fc-left">
<div class="btn-group">
<button class="btn btn-primary asl-events">Btn1</button>
<button type="button" class="btn btn-primary hnu-events">Btn2</button>
<button type="button" class="btn btn-primary hps-events">Btn3</button>
</div>
</div>
<div class="fc-right">
<div class="btn-group">
<button class="btn btn-primary" id="btnPopover"
title="Help List"
data-content="Help information"
data-trigger="click"
data-toggle="popover">Help</button>
</div>
</div>
<div class="fc-clear"></div>
<hr />
</div>
</body>
</html>
This question already has answers here:
Bootstrap 4 Dropdown Menu not working?
(14 answers)
Closed 4 years ago.
So I want to make a dropdown using Bootstrap 4 for my Spring MVC Aplication.
I'm also using Thymeleaf template engine.
I 'imported' popper.js and jQuery in my html page.Also I have included Bootstraps's Css and Javascript to static direcotory as separate files in my project
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
And it's still not working.
Here the full code of my html page
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Footer</title>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
</head>
<body>
<div th:fragment="footer">
<div>
<a th:href="#{/notebook/add}" class="btn btn-outline-primary" role="button">Add Note</a>
</div>
<div class="dropdown">
<button class="btn btn-outline-primary dropdown-toggle" type="button" data-toggle="dropdown">Sort</button>
<div class="dropdown-menu">
<a class="dropdown-item" th:href="#{/notebook/sort(method='Date_ASC')}">Date Ascending</a>
<a class="dropdown-item" th:href="#{/notebook/sort(method='Date_DESC')}">Date Descending</a>
<a class="dropdown-item" th:href="#{/notebook/sort(method='Done')}">Done</a>
<a class="dropdown-item" th:href="#{/notebook/sort(method='Not_Done')}">Not Done</a>
</div>
</div>
</div>
</body>
</html>
For the drop-down to work, you must load the following 3 JavaScript files
and load them in that particular order (first jQuery, then popper.js and then bootstrap.js):
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
You also need to include Bootstrap's CSS and Javascript files in order for it to work.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
Updated your snippet.
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.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>
</head>
<body>
<div th:fragment="footer">
<div>
<a th:href="#{/notebook/add}" class="btn btn-outline-primary" role="button">Add Note</a>
</div>
<div class="dropdown">
<button class="btn btn-outline-primary dropdown-toggle" type="button" data-toggle="dropdown">Sort</button>
<div class="dropdown-menu">
<a class="dropdown-item" th:href="#{/notebook/sort(method='Date_ASC')}">Date Ascending</a>
<a class="dropdown-item" th:href="#{/notebook/sort(method='Date_DESC')}">Date Descending</a>
<a class="dropdown-item" th:href="#{/notebook/sort(method='Done')}">Done</a>
<a class="dropdown-item" th:href="#{/notebook/sort(method='Not_Done')}">Not Done</a>
</div>
</div>
</div>
</body>
</html>
Hope it will helps you
Can anyone tell me what is wrong with the drop-down button. It is not working in my chrome.
Here is my html code-
<!DOCTYPE html>
<html lang="en">
<head>
<title>IconMaker</title>
<meta charset=utf-8">
<meta name= "viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron text-center">
<h1>My Bootstrap Page</h1>
<p>Resize the page to understand Responsiveness</p>
</div>
<div class="container">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Post Ideas
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Work 1</li>
<li>Work 2</li>
<li>Work 3</li>
<li>Work 4</li>
</ul>
</div>
<div class="row">
<div class="col-sm-2">
<p>If you want to use Paypal</p>
<i class="fa fa-cc-paypal" style="font-size:36px"></i>
</div>
<div class="col-sm-2">
<p>If you want to use Mastercard</p>
<i class="fa fa-cc-mastercard" style="font-size:36px"></i>
</div>
<div class="col-sm-2">
<p>If you want to use Visa</p>
<i class="fa fa-cc-visa" style="font-size:36px"></i>
</div>
<div class="col-sm-2">
<p>If you want to use Google Wallet</p>
<i class="fa fa-google-wallet" style="font-size:36px"></i>
</div>
<div class="col-sm-2">
<p>If you want to use American Express</p>
<i class="fa fa-cc-amex" style="font-size:36px"></i>
</div>
</div>
</div>
</body>
</html>
when I click on drop-down, nothing drops down. I see no errors on my console.I have added bootstrap.js in html. Does i have to use JavaScript file for that?
Use this link
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
instead of
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
Cuz you use version 4.0.0-beta in css and another version in javascript
You forgot to add the below css
.show > .dropdown-menu {
display: block;
}
How to disable a bootstrap div which uses button class. Button to be disabled using javascript based on some conditions
This is my code for button which is to be disabled using js:
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-info col-sm-3">
<i class="glyphicon glyphicon-send" ></i>
<br>
Send
</a>
</div>
The div can be hidden in this way---
$('.zz').css('display', 'none');
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="btn-group btn-group-justified zz" id="btn-disable">
<a href="#" class="btn btn-info col-sm-3">
<i class="glyphicon glyphicon-send" ></i><br>
Send
</a>
</div>
</body>
</html>
If you want to hide the div with onclick event you can do it in this way--
$('.zz').click(function(){
$('.zz').css('display', 'none');
});
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="btn-group btn-group-justified zz" id="btn-disable">
<a href="#" class="btn btn-info col-sm-3" >
<i class="glyphicon glyphicon-send" ></i><br>
Send
</a>
</div>
</body>
</html>
NOW IN THIS WAY YOU CAN DISABLE IT
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="btn-group btn-group-justified zz" id="btn-disable">
<a href="#" class="btn btn-info col-sm-3" >
<i class="glyphicon glyphicon-send" ></i><br>
Send
</a>
<script type="text/javascript">
$('.zz').click(function(){
$(".zz *").attr("disabled", "disabled").off('click');
});
</script>
</div>
</body>
</html>
As you are just beginning with js and xml.
This example can be helpful
Now if you want to disable the button based on some value do it like this--
NOTE
this just a rough way to give you some idea.
In this example you have two value hi and bye which are coming from your xml and getting displayed on the HTML page. So based on that value you are disabling the div.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="btn-group btn-group-justified zz2" id="btn-disable2">
<a href="#" class="btn btn-info col-sm-3" >
<i class="glyphicon glyphicon-send" ></i><br>
bye
</a>
</div>
<div class="btn-group btn-group-justified zz1" id="btn-disable1">
<a href="#" class="btn btn-info col-sm-3" >
<i class="glyphicon glyphicon-send" ></i><br>
hi
</a>
</div>
<script type="text/javascript">
var node = document.getElementById('btn-disable2');
textContent = node.textContent;
alert($.trim(textContent));
if ($.trim(textContent) == 'bye') {
$(".zz2 *").attr("disabled", "disabled").off('click');
}
var node1 = document.getElementById('btn-disable1');
textContent1 = node1.textContent;
alert($.trim(textContent1));
if ($.trim(textContent1) == 'bye') {
$(".zz1 *").attr("disabled", "disabled").off('click');
}
</script>
</body>
</html>
Try this :
document.getElementsByClassName("btn")[0].style.pointerEvents = "none";
var timestampArray = document.getElementsByClassName("btn");
for(var i = (timestampArray.length - 1); i >= 0; i--)
{
timestampArray[i].style.pointerEvents = "none";
}
Working fiddle