This is the input I want to add my project https://select2.org/tagging but it's show like this:
I added Select2 installation links but it doesn't work. What am I doing wrong?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/js/select2.min.js"></script>
<title>Document</title>
</head>
<body>
<select class="form-control">
<option selected="selected">orange</option>
<option>white</option>
<option>purple</option>
</select>
<script>
$(".js-example-tags").select2({
tags: true
});
</script>
</body>
</html>
The class name in your script doesn't occur in your markup. It needs to be on the select element.
Also, you don't seem to be loading jQuery, on which Select2 depends.
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/js/select2.min.js"></script>
</head>
<body>
<select class="form-control js-example-tags">
<option selected="selected">orange</option>
<option>white</option>
<option>purple</option>
</select>
<script>
$(".js-example-tags").select2({
tags: true
});
</script>
</body>
Related
I am facing a problem using mathjax. the equations already available are formatted but the equations that I put by myself are not being formatted.
here is my code:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script async="true" src="https://cdn.jsdelivr.net/npm/mathjax#2/MathJax.js?config=AM_CHTML">
</script>
</head>
<body>
<input type="text" id="eq">
<button onclick="amb()">equation</button>
<p id="amb"></p>
<p>`x^3`</p>
<script>
function amb() {
eq = document.getElementById('eq').value;
document.getElementById('amb').append("`" + eq + "`");
}
</script>
</body>
</html>
First, I suggest use a form and a type=submit button for a better UX.
I found the solution you need to queue an action to rescan the page: MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script async="true" src="https://cdn.jsdelivr.net/npm/mathjax#2/MathJax.js?config=AM_CHTML">
</script>
</head>
<body>
<form onsubmit="amb(); return false">
<input type="text" id="eq">
<input type="submit" value="equation">
</form>
<p id="amb"></p>
<p>`x^3`</p>
<script>
function amb() {
eq = document.getElementById('eq').value;
document.getElementById('amb').innerText = ("`" + eq + "`");
MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
}
</script>
</body>
</html>
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 have pandas df, exported to html the result is..
<table border="1" class="dataframe">
<thead>
<tr style="text-align: right;">
<th>Flop</th>
<th>BET 1610 Freq</th>
<th>BET 1218 Freq</th>
<th>BET 575 Freq</th>
<th>CHECK Freq</th>
</tr>
</thead>
<tbody>
<tr>
<td>2s 2d 2c</td>
<td>2.90</td>
<td>11.91</td>
<td>36.90</td>
<td>48.30</td>
</tr>
...5k lines...
And i'm trying to import on html normal file and create a filter latter
Any ways to make it please?
Is possible with JS?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<button class="go">Search</button>
<link rel="import" href="3BP-OOP-PFR.html" />
</body>
</html>
Include
in php import "file.php";.
save both file with .php extension.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<button class="go">Search</button>
<?php
import "3BP-OOP-PER.php"; // import "3BP-OOP-PER.html";
?>
<link rel="import" href="3BP-OOP-PFR.html" />
</body>
</html>
I think this code help you!
I am new to AngularJS and currently, I am doing controllers in AngularJS, but I don't know I got an error angular is not defined Line number 21 if someone knows the issue inform me.
<!DOCTYPE html>
<html lang="en" ng-app="myLangApp">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.2/angular.min.js" integrity="sha512-7oYXeK0OxTFxndh0erL8FsjGvrl2VMDor6fVqzlLGfwOQQqTbYsGPv4ZZ15QHfSk80doyaM0ZJdvkyDcVO7KFA==" crossorigin="anonymous" referrerpolicy="no-referrer" async></script>
</head>
<body>
<div ng-controller="language">
Select your favorite language:
<button ng-click="selectLanguage('PHP')">PHP</button>
<button ng-click="selectLanguage('javascript')">javascript</button>
<button ng-click="selectLanguage('cpp')">cpp</button>
<button ng-click="selectLanguage('java')">java</button>
<p>You have selected: {{ myFavLang }}</p>
</div>
<script>
var app = angular.module('myLangApp', []);
app.controller('language',($scope)=>{
$scope.myFavLang = 'None';
})
</script>
</body>
</html>
just add simple script to load the angular
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.2/angular.min.js" ></script>
I upgraded from Angular 7.2 to Angular 8 and now all the Angular scripts are inserted at the very start of the HTML (before !DOCTYPE).
Is this a bug? Does anyone know what might be causing it?
<script src="runtime.js" defer></script><script src="polyfills-es5.js" nomodule defer></script><script src="polyfills.js" defer></script><script src="styles.js" defer></script><script src="scripts.js" defer></script><script src="vendor.js" defer></script><script src="main.js" defer></script><!DOCTYPE html>
<html>
<head>
<base href="/my-app/" />
<title>My App</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/x-icon" href="favicon.ico?v=2" />
<script src="./ng-app-settings.js"></script>
</head>
<app>Loading...</app>
<script type="text/javascript" src="//use.typekit.net/abcdefg.js"></script>
<script type="text/javascript">try { Typekit.load(); } catch (e) { }</script>
</html>
My original HTML is pretty standard. The only oddities are an ng-app-settings.js script that loads some JSON for app config and the use of the TypeKit service for fonts. Neither of these caused a problem for Angular 7.
<!DOCTYPE html>
<html>
<head>
<base href="/" />
<title>My App</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/x-icon" href="favicon.ico?v=2" />
<script src="./ng-app-settings.js"></script>
</head>
<app>Loading...</app>
<script type="text/javascript" src="//use.typekit.net/abcdefg.js"></script>
<script type="text/javascript">try { Typekit.load(); } catch (e) { }</script>
</html>
Thanks for any help
Try adding body tags to your HTML.
<!DOCTYPE html>
<html>
<head>
<base href="/" />
<title>My App</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/x-icon" href="favicon.ico?v=2" />
<script src="./ng-app-settings.js"></script>
</head>
<body>
<app>Loading...</app>
<script type="text/javascript" src="//use.typekit.net/abcdefg.js"></script>
<script type="text/javascript">try { Typekit.load(); } catch (e) { }</script>
</body>
</html>