I am new to javascript and jQuery, but I am trying to use the Chosen plugin. I have followed all the steps I can find, but it is not working. Here is what I have done so far.
index.blade.php:
<html lang="en" ng-app="wim">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>WIM(afy)</title>
<link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="css/wimmain.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="bower_components/chosen/chosen.css" rel="stylesheet">
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/lodash/lodash.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script src="bower_components/angular-local-storage/dist/angular-local-storage.min.js"></script>
<script src="bower_components/restangular/dist/restangular.min.js"></script>
<script src = "js/app.js"></script>
<script src = "js/services.js"></script>
<script src = "js/controllers.js"></script>
<style>
li {
padding-bottom: 8px;
}
</style>
</head>
<body style="background-color: lightgray;">
<div ng-view></div>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/chosen/chosen.jquery.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$(".chosen-select").chosen();
});
</script>
</body>
I have included the stylesheet at the top, and included chosen.jquery.js after I included jQuery and before my script. The actual HTML page is displayed at the point where it says <div ng-view></div>.
Here's the html:
<select class="chosen-select" id="interests" multiple="true" ng-model="interests">
<option value="Art">Art</option>
<option value="Biking">Biking</option>
<option value="Camping">Camping</option>
<option value="Coffee">Coffee</option>
<option value="Concerts">Concerts</option>
<option value="Dining">Dining</option>
<option value="Running">Running</option>
<option value="Shopping">Shopping</option>
</select>
Right now it is just displaying the normal HTML 5 multiple select list where you have to hold shift or use ctrl to select multiple things.
Do I need to move my code around differently? Can someone help me figure out what I'm doing wrong? Thanks.
Not sure if this is your issue, but I have had to trigger an update on chosen before. Try $("#interests").trigger("update")
Related
I can't seem to set this jquery datetimepicker. I believe I am following the instructions correctly. However, only the input box displays. After inspecting I saw these errors in the log
This the plugin I am trying to use.
https://xdsoft.net/jqplugins/datetimepicker/
previous code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="/jquery.datetimepicker.min.css"/>
<script type="text/javascript">
jQuery('#datetimepicker').datetimepicker();
</script>
</head>
<body>
<input id="datetimepicker" type="text" >
</body>
<script src="/jquery.js"></script>
<script src="/build/jquery.datetimepicker.full.min.js"></script>
</html>
So I found the original files hereenter link description here
and then changed my code to the following
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.3.7/jquery.datetimepicker.min.css"/>
<script type="text/javascript">
jQuery('#datetimepicker').datetimepicker();
</script>
</head>
<body>
<input id="datetimepicker" type="text" >
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js" integrity="sha512-AIOTidJAcHBH2G/oZv9viEGXRqDNmfdPVPYOYKGy3fti0xIplnlgMHUGfuNRzC6FkzIo0iIxgFnr9RikFxK+sw=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.js" integrity="sha512-9yoLVdmrMyzsX6TyGOawljEm8rPoM5oNmdUiQvhJuJPTk1qoycCK7HdRWZ10vRRlDlUVhCA/ytqCy78+UujHng=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</html>
but now I have a new error. Any ideas on what I am missing?
Mind the order and dependencies of your scripts and use eventlisteners:
To make it simple:
Load CSS first (DateTimePicker), load JS second (jQuery, Datetimepicker), initialize an eventlistener using $().ready().
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home</title>
<!-- Load CSS first -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.3.7/jquery.datetimepicker.min.css"/>
<!-- Load JS second -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js" integrity="sha512-AIOTidJAcHBH2G/oZv9viEGXRqDNmfdPVPYOYKGy3fti0xIplnlgMHUGfuNRzC6FkzIo0iIxgFnr9RikFxK+sw=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- Initialize JS, setup eventlistener(s) -->
<script type="text/javascript">
jQuery(document).ready($ => $('#datetimepicker').datetimepicker());
</script>
</head>
<body>
<input id="datetimepicker" type="text" >
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.3.7/jquery.datetimepicker.min.css"/>
</head>
<body>
<input id="datetimepicker" type="text" >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js" integrity="sha512-AIOTidJAcHBH2G/oZv9viEGXRqDNmfdPVPYOYKGy3fti0xIplnlgMHUGfuNRzC6FkzIo0iIxgFnr9RikFxK+sw=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.js" integrity="sha512-9yoLVdmrMyzsX6TyGOawljEm8rPoM5oNmdUiQvhJuJPTk1qoycCK7HdRWZ10vRRlDlUVhCA/ytqCy78+UujHng=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script> either this or the previous one not both-->
<script type="text/javascript">
jQuery('#datetimepicker').datetimepicker();
</script>
</body>
</html>
The code above will fix all your issues about where to put scripts and what to load (you where both loading the extended and minified version of the library)
See the following snippet:
jQuery('#datetimepicker').datetimepicker();
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.3.7/jquery.datetimepicker.min.css" />
<input id="datetimepicker" type="text">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js" integrity="sha512-AIOTidJAcHBH2G/oZv9viEGXRqDNmfdPVPYOYKGy3fti0xIplnlgMHUGfuNRzC6FkzIo0iIxgFnr9RikFxK+sw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.js" integrity="sha512-9yoLVdmrMyzsX6TyGOawljEm8rPoM5oNmdUiQvhJuJPTk1qoycCK7HdRWZ10vRRlDlUVhCA/ytqCy78+UujHng=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script> either this or the previous one not both-->
I'm using select2, When someone select value in select dropdown. select2 added data-select2-id in to all div that come before select2, not same data-select2-id value but increase each time.
have a look in below image
$(function () {
//Initialize Select2 Elements
$('.select2').select2()
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css">
</head>
<body>
<div class="row">
<div class="form-group">
<label>Minimal</label>
<select class="form-control select2" style="width: 100%;">
<option selected="selected">Alabama</option>
<option>Alaska</option>
<option>California</option>
<option>Delaware</option>
<option>Tennessee</option>
<option>Texas</option>
<option>Washington</option>
</select>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.full.min.js"></script>
</body>
</html>
its probably not what you are looking for, but if you use <input> instead of <select> this doesn't happen for me.
I also had to put the <input> inside a separate <div> on some pages.
So, I am creating a web app that uses Quill.js on Google Apps Script. This is my code (currently):
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Quotix</title>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Merriweather&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Fira+Mono&display=swap" rel="stylesheet">
<link href="https://cdn.quilljs.com/1.3.7/quill.snow.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.1/showdown.min.js"></script>
<script src="https://unpkg.com/turndown#6.0.0/dist/turndown.js"></script>
<script src="https://cdn.quilljs.com/1.3.7/quill.min.js"></script>
<script>
var converters = {
showdown: new showdown.Converter(),
turndown: new TurndownService()
};
var Delta = Quill.import('delta');
var quill = new Quill('#editor', {
modules: {
toolbar: {
container: '#toolbar'
}
},
theme: 'snow'
});
</script>
</head>
<body>
<div id="editor-container">
<div id="toolbar">
<select class="ql-font">
<option value="open-sans" selected>Open Sans</option>
<option value="merriweather">Merriweather</option>
<option value="fira-mono">Fira Mono</option>
</select>
</div>
<div id="editor"></div>
</div>
</body>
</html>
It is supposed to show a rich text editor, but instead I get this:
Can you please help me get the rich text editor to show up? I have looked up how to solve this problem many times!!!
I'm trying to incorporate select2 multi-select functionality in my application but can't seem to get it to work. I have included my code below. I have run through all of the basic issues that people usually face and my code should be loading in appropriate order.
View
#extends('layouts.layout')
#extends('layouts.navbar')
#section('content')
<fieldset>
<small class="errorMessage"></small>
<label for="tags">Tags</label>
<select name="tags" id="tagsList" class="select2-multi form-control" multiple="multiple">
#foreach($tags as $tag)
<option value="{{$tag->id}}">{{$tag->name}}</option>
#endforeach
</select>
</fieldset>
Layout file
<!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">
<meta name="csrf-token" content="{{ csrf_token() }}">
<!-- CSS -->
<link rel="stylesheet" href="{{asset('css/app.css')}}">
<link rel="stylesheet" href="{{asset('css/main.css')}}">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
<link rel="stylesheet" href="{{asset('css/select2.min.css')}}">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=ZCOOL+XiaoWei" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito|Raleway" rel="stylesheet">
<!-- JavaScript -->
<script src="/js/jquery.js"></script>
<script src="/js/bootstrap.js"></script>
<title>Plant Lab</title>
</head>
<body>
#include('includes.messages')
#yield('jumbotron')
#yield('content')
<script src="{{asset('js/custom.js')}}"></script>
<script src="{{asset('js/select2.min.js')}}"></script>
</body>
</html>
Custom JS file
// Select 2
$(document).ready(function() {
$('.jselect2-multi').select2();
});
My browser is just rendering a regular HTML select form and the Select2 is not being applied. Where am I going wrong? Thank you!
make your input field name array,
<select name="tags[]" id="tagsList" class="select2-multi form-control" multiple="multiple">
#foreach($tags as $tag)
<option value="{{$tag->id}}">{{$tag->name}}</option>
#endforeach
</select>
You make a type mistake,
// Select 2
$(document).ready(function() {
$('.select2-multi').select2(); // class name should be select2-multi not jselect2-multi
});
Why is the script below not working? The JavaScript file is in another folder and my function only works when I call it via the console.
$('#myOptions').change(function() {
var val = $("#myOptions option:selected").text();
alert(val);
});
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="description" content="Exos">
<meta name="viewport" content="width=device-width", initial-scale="1">
<link type="text/css" rel="stylesheet" href="css/exos.css">
<script type="text/javascript" src="js/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<select id="myOptions">
<option value='option1'>Gateway 1</option>
<option value='option2'>Gateway 2</option>
<option value='option3'>Gateway 3</option>
</select>
</body>
</html>
Image of my folder:
Image of inside the js folder:
Because you're trying to select an element before it exists on the page:
$('#myOptions')
Wrap your jQuery code in a document.ready handler so it executes after the DOM has fully loaded:
$(function () {
$('#myOptions').change(function() {
var val = $("#myOptions option:selected").text();
alert(val);
});
});
Conversely, you could move your script elements to the bottom of the page so they are referenced after the target DOM elements:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="description" content="Exos">
<meta name="viewport" content="width=device-width", initial-scale="1">
<link type="text/css" rel="stylesheet" href="css/exos.css">
</head>
<body>
<select id="myOptions">
<option value='option1'>Gateway 1</option>
<option value='option2'>Gateway 2</option>
<option value='option3'>Gateway 3</option>
</select>
<script type="text/javascript" src="js/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
You have to move the scripts to the bottom of your <body> or wrap the code in $(document).ready function.