Simplest example of Select2 doesnt working - javascript

i'm trying to use Select2 select boxes, but it doesnt work on my page. My js skills is poor, so I try to do simplest example. I'm using bootstrap library. Whole code looking like:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8_polish_ci">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<link href="../inc/bipro.css" rel="stylesheet" type="text/css">
<title>Test</title>
</head>
<body>
<br>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6">
<div class="card">
<div class="card-header">
select2
</div>
<div class="card-body text-center">
<select class="aaaa form-control">
<option value="">wybierz</option>
<option value="1">banany</option>
<option value="2">cytryny</option>
<option value="3">jabłka</option>
</select>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$('.aaaa').select2();
});
</script>
</body>
</html>
What am I doing wrong

You aren't including jQuery which is required for both Bootstrap and Select2.
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
Make sure jQuery is imported before Bootstrap and Select2
You're missing the name="" property on your select. I'd also rename that class to something that makes sense, like js-select
<select class="js-select form-control" name="fullnames">
<option value="0">wybierz</option>
<option value="1">banany</option>
<option value="2">cytryny</option>
<option value="3">jabłka</option>
</select>
Then your script will look like this:
<script type="text/javascript">
$(document).ready(function() {
$('.js-select').select2();
});
</script>

Related

How do i use coreui?

I am trying to use coreui for a project im starting but for somereasson it dosent work I tried using the template the site gives and I cant get it to work. Am I doing something wrong or am I forgeting something?
`
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CoreUI CSS -->
<link rel="stylesheet" href="https://unpkg.com/browse/#coreui/coreui#2.1.16/dist/css/coreui.min.css">
<title>Hello, world!</title>
</head>
<body class="app">
<h1>Hello, world!</h1>
<div class="container">
<div class="row">
<div class="col">
1/2
</div>
<div class="col">
1/2
</div>
</div>
<div class="row">
<div class="col">
1/3
</div>
<div class="col">
1/3
</div>
<div class="col">
1/3
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, Bootstrap, then CoreUI -->
<script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" 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://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script src="https://unpkg.com/browse/#coreui/coreui#2.1.16/dist/js/coreui.min.js"></script>
</body>
</html>
`
I tried following the tutorial on the page but i couldnt get coreui to work.

How to use bootstrap datetime picker with custom HTML form in Google sheets?

I have Google sheet. I made custom HTML form with bootstrap datetime picker
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker3.min.css" integrity="sha256-FAOaXTpl90/K8cXmSdsskbQN3nKYulhCpPbcFzGTWKI=" crossorigin="anonymous" />
<title>Hello, world!</title>
</head>
<body>
<form>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
<button type="submit" class="btn btn-primary">Подтвердить</button>
</form>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.26.0/moment-with-locales.min.js" integrity="sha256-4HOrwHz9ACPZBxAav7mYYlbeMiAL0h6+lZ36cLNpR+E=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js" integrity="sha256-bqVeqGdJ7h/lYPq6xrPv/YGzMEb6dNxlfiTUHSgRCp8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/locales/bootstrap-datepicker.ru.min.js" integrity="sha256-iGDUwn2IPSzlnLlVeCe3M4ZIxQxjUoDYdEO6oBZw/Go=" crossorigin="anonymous"></script>
</body>
</html>
I included libraries which was required. But it does not work for me.
Unfortunately, I do not understand where I'm wrong.
How to fix it?
Put the following script after </body> in your Html. It ensures the code to run after the document loaded and being ready for binding datepicker to the element. Besides, it is .datepicker() but not .datetimepicker().
<script>
$(document).ready(function(){
$('#datetimepicker1').datepicker();
})
</script>
If you just want to build a DATE picker, bootstrap-datepicker is NOT necessary. Just use bootstrap built-in input type:
<input type="date" class="form-control">

External jquery is not working at load time

I am working in one task in that I want to create online visiting card in html. Now, at load times it looks like this in which I have draw the different shaped.
As per you see the first image I have draw the different shaped
In this second image when I am selecting a picture at that time shaped toolkit was hide and so from that I unable to create a shaped over an image.
So as per I research in my code I realized that jquery "initialize: function()" is not load after the selecting picture. So it can be said that at load time jquery is not excuting.
Here is my code,
<script type='text/javascript' src='js/jquery.min.js'></script>
<script src="js/kinetic-v3.9.3.js"></script>
<script type="text/javascript" src="js/version1.js"></script>
<link href="css/layout.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="css/menu.css" type="text/css" media="screen" />
<!-- Menu -->
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="css/ie/ie.css" />
<![endif]-->
<link rel="stylesheet" href="styles/global.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/mobile.js"></script>
<script type="text/javascript" src="js/form.js"></script>
<script type="text/javascript" src="./lib/jquery.1.10.2.min.js"></script>
<!-- jquery -->
<script type="text/javascript" src="./Pixanova_files/jquery.min.1.9.0.js"></script>
<!-- backbone -->
<script type="text/javascript" src="./Pixanova_files/underscore.min.1.4.4.js"></script>
<script type="text/javascript" src="./Pixanova_files/backbone.min.0.9.10.js"></script>
<!-- wColorPicker -->
<link rel="stylesheet" type="text/css" href="./Pixanova_files/wColorPicker.css">
<script type="text/javascript" src="./Pixanova_files/wColorPicker.js"></script>
<!-- wPaint -->
<script type="text/javascript" src="./Pixanova_files/jquery.ui.core.min.js"></script>
<script type="text/javascript" src="./Pixanova_files/jquery.ui.widget.min.js"></script>
<script type="text/javascript" src="./Pixanova_files/jquery.ui.mouse.min.js"></script>
<script type="text/javascript" src="./Pixanova_files/jquery.ui.draggable.min.js"></script>
<link rel="stylesheet" type="text/css" href="./Pixanova_files/wPaint.css">
<script type="text/javascript" src="./Pixanova_files/wPaint.js"></script>
<!-- pixanova -->
<script type="text/javascript" src="./Pixanova_files/pixanova.js"></script>
<link rel="stylesheet" type="text/css" href="./Pixanova_files/pixanova.css">
<div id="wrapper">
<!--header-->
<div id="content">
<!-- container is the div id from where the image is display -->
<div id="container" style="width:600px; height:600px; float:right"> </div>
<script type="text/javascript">
var pixanova = new PixanovaView321();
</script>
<div id="editor">
<ul id="text" style="float: left; margin-right:10px;">
<!--<div id="spinner" class="spinner" style="display:none;margin-left:80px;margin-bottom:20px;"> Image Uploading<img src="images/ajax.png" alt="loading">
</div>-->
<div id="container2" style="width:140px;"> </div>
<li>
<label> </label>
<input type="submit" id="textsubmit" value="Add Text"/>
<select name="Choice" onchange="setImage(this);">
<option value="images/blue.jpg">Photo 1</option>
<option value="images/black.jpg">Photo 2</option>
<option value="images/red.jpg">Photo 3</option>
<option value="images/redplan.jpg">Photo 4</option>
</select>
<input type='file' />
</li>
</ul>
<p class="clearing" /></p>
</div>
</div>
</div>
<!--container-->
</body>
here the external pixanova.js code from where the toolkit has calling
//This variable is calling the PixanovaView321 function in pixanova.html
var PixanovaView321 = Backbone.View.extend(
{
initialize: function()
{
alert();
//Menu option
$('#container').wPaint({
menuOffsetX: 50,
menuOffsetY: 50,
menuOrientation: 'horizontal',
strokeStyle: "yellow"
});
},
});

how to make fullPage.js plugin to work?

I'm so newbie in javascript !
I need your help, guys (pretty please).
I need to initialize fullPage.js plugin into my webpage, but I don't know what is missing. I've read the tutorial for this but I'm doing something wrong and I don't know what.
This is my html code:
<head>
<title>Title</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href='css/style.css' type='text/css' media='all' />
<link rel="stylesheet" type="text/css" media="all" href="css/animate.css">
<link rel="shortcut icon" href='img/favicon.ico' type='image/x-icon'/ >
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css" /> <!-- fullPage.js plugin -->
<script src="js/script.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="js/jquery.easings.min.js"></script> <!-- fullPage.js plugin -->
<script type="text/JavaScript" src="js/jquery.fullPage.min.js"></script> <!-- fullPage.js plugin -->
<script type="text/javascript" src='js/jquery-migrate.min.js'></script>
<script type="text/javascript">
$(document).ready(function() {
$('#fullpage').fullpage({
anchors: ['first-section', 'second-section', 'third-section', 'fourth-section', 'fifth-section', 'lastPage'],
scrollingSpeed: 1000
});
});
</script>
</head>
<body>
<div class="container-fluid" id="fullpage">
<div class="section">
<div class="row first-section"> Some text.
</div>
</div>
<div class="section">
<div class="row first-section"> Some text.
</div>
</div>
<div class="section">
<div class="row first-section"> Some text.
</div>
</div>
<div class="section">
<div class="row first-section"> Some text.
</div>
</div>
<div class="section">
<div class="row first-section"> Some text.
</div>
</div>
<div class="section">
<div class="row first-section"> Some text.
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- fullPage.js plugin -->
</body>
Many thanks,
Sandra P.
I think this can help you.
And I recommend to try to replace it:
<link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css" />
<script type="text/JavaScript" src="js/jquery.fullPage.min.js"></script>
to this
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.min.css" />
<script type="text/JavaScript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.min.js"></script>
This should correct the error TypeError:. $(...).Fullpage.
Just look at the live example.
I changed your example and it works, see this.
Update
Properly include in that order:
Styles;
jQuery;
jQuery Migrate (I think you do not need it);
jQuery FullPage and other jQuery
plugins;
you code.
it should look like this
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.min.css" />
<link rel="stylesheet" type="text/css" href="youCSS" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/JavaScript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.min.js"></script>
<!--other jQuery plugins-->
<script type="text/JavaScript" src="youJS"></script>
Update 2
Replace youJS :)
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/JavaScript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#fullpage').fullpage({
anchors : ['first-section', 'second-section', 'third-section', 'fourth-section', 'fifth-section', 'lastPage'],
scrollingSpeed : 1000
});
});
</script>
</head>
<body>
<div class="container-fluid" id="fullpage">
<div class="section">
<div class="row first-section"> Some text.
</div>
</div>
<div class="section">
<div class="row first-section"> Some text.
</div>
</div>
<div class="section">
<div class="row first-section"> Some text.
</div>
</div>
<div class="section">
<div class="row first-section"> Some text.
</div>
</div>
<div class="section">
<div class="row first-section"> Some text.
</div>
</div>
<div class="section">
<div class="row first-section"> Some text.
</div>
</div>
</div>
</body>

Semantic UI doesn't work at all

I know I must missed something because none of the example of works in my computer.
Take the simplest first example at the website.
I copied the code AS IS and it doesn't work at all for me. I included the semantic.min.css and semantic.min.js also just in case I included the jQuery using google CDN.
Following is my html code.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.min.css">
<script src="semantic/dist/semantic.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
</head>
<body>
<script>
$('.ui.dropdown')
.dropdown()
;
</script>
<div class="ui dropdown">
<input type="hidden" name="gender">
<i class="dropdown icon"></i>
<div class="default text">Gender</div>
<div class="menu">
<div class="item" data-value="male">Male</div>
<div class="item" data-value="female">Female</div>
</div>
</div>
</body>
</html>
The output is like this..
Thank you! I am pretty new to JavaScript and semantic UI.
i use this order of linking js files and work fine
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../bower_components/jquery/dist/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="../bower_components/semantic/dist/semantic.min.css">
<script src="../bower_components/semantic/dist/semantic.min.js"></script>
</head>
<body>
<select name="gender" class="ui dropdown" id="select">
<option value="">Gender</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
<script type="text/javascript">
$('#select')
.dropdown()
;
</script>
</body>
</html>
I need to include jQuery before including .js and .css

Categories