I am using JsonForm library ( https://github.com/jsonform/jsonform ) to describe a form in html and I have defined the schema and form of the JsonForm structure, but "onSubmit" function that enables the send button does not work. The button does not appear.
My code in javascript is the following (data.js) :
$('#myForm').jsonForm({
schema: {
Min: {
type: 'integer',
title: 'Minimo(%):',
minimum: 0,
maximum: 100,
},
Max: {
type: 'number',
title: 'Máximo (%):',
minimum: 0,
maximum: 100,
}
},
form: [
{
key:'Min',
type:'number',
htmlClass: 'col-md-2'
}
],
onSubmit: function (errors, values){
if (errors) {
alert(errors);
}
else {
document.getElementById("selectedComponents").innerHTML = "it works";
}
}
});
My html is defined as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>web</title>
<link rel="stylesheet" style="text/css" href="css/bootstrapCss/bootstrap.css" />
<link rel="stylesheet" style="text/css" href="css/newCss.css" />
</head>
<body onLoad="createInitOptions()">
<br>
<div class="row">
<div class="col-md-3 text-center" id="selectedComponents">
</div>
<div class="row">
<div class="col-md-5 text-center">
</div>
<div class="col-md-4" id="component">
<div class="form-group">
<form id="myForm"></form>
<div id="res" class="alert">
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/underscore.js"></script>
<script type="text/javascript" src="js/jsv.js"></script>
<script type="text/javascript" src="js/jsonform.js"></script>
<script type="text/javascript" src="js/data.js"></script>
<script type="text/javascript" src="js/common.js"></script>
</body>
</html>
What could be the reason?
You need to put a definition for the submit or "*" in the "form" section, and move the "onSubmit" outside to the root.
{
"schema": {
"email": {
"type": "string",
"title": "Email",
"required": true,
"maxLength": 128
},
"password": {
"type": "string",
"title": "Password",
"required": true,
"maxLength": 128
},
"remember": {
"type": "boolean",
"default": true
}
},
"form": [
{
"key": "email",
"type": "email"
},
{
"key": "password",
"type": "password"
},
{
"key": "remember",
"inlinetitle": " Remember me",
"notitle": true
},
{
"type": "submit",
"title": "Login"
}
],
"onSubmit": (errors, values) => {
console.info(errors, values);
}
}
I use that to my advantange, storing the form setup in a json file (without the "onSubmit") and then adding the onSubmit via javascript.
var schema = await $.get("/parts/model.login.json");
schema.onSubmit = (errors, values) => {
LoginResults = values;
LoginNext = true;
};
Related
I am using the jquery sim tree plugin to show tree categories. Sim Tree
I have added a search bar to the filter tree data. What I want is to expand the inner ul li elements.
Working Fiddle --> https://jsfiddle.net/dnetk0s9/
The issue is when I search the text second it does not work. (the panel is not expanding).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://www.jqueryscript.net/demo/Checkable-Hierarchical-Tree/dist/simTree.css">
<link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<title>sim-tree: Checkable Hierarchical Tree Demo</title>
<style>
body { min-height: 100vh; background-color: #fafafa;}
.container { margin: 150px auto; max-width: 640px; }
</style>
</head>
<body>
</script>
<div class="container">
<input type="text" name="search" class="form-control" value="" id="demo_2" placeholder="" autofocus style="margin-top:10px;"/>
<br/><br/>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" class="ul-laspe" data-parent="#accordion" href="#collapse1">
One
</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">
<div class="tree">
<div id="tree"></div>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" class="ul-laspe" data-parent="#accordion" href="#collapse2">
Two
</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<div class="tree">
<div id="tree2"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://www.jqueryscript.net/demo/Checkable-Hierarchical-Tree/dist/simTree.js"></script>
<script>
var list = [{
"id": '1',
"pid": '',
"name": "hi foo bar",
},
{
"id": '11',
"pid": '1', // parent ID
"name": "bye tar"
},
{
"id": '12',
"pid": '1',
"name": "welcome rat"
},{
"id": '13',
"pid": '1',
"name": "why this"
},{
"id": '14',
"pid": '1',
"name": "match this"
},
{
"id": '2',
"pid": '',
"name": "raw input"
},
{
"id": '21',
"pid": '2',
"name": ""
}
];
var list2 = [{
"id": '1',
"pid": '',
"name": "X JavaScript",
},
{
"id": '11',
"pid": '1', // parent ID
"name": "X Angular"
},
{
"id": '12',
"pid": '1',
"name": "X React"
},{
"id": '13',
"pid": '1',
"name": "X Vuejs"
},{
"id": '14',
"pid": '1',
"name": "XY jQueryScript.Net"
},
{
"id": '2',
"pid": '',
"name": "X HTML5"
},
{
"id": '21',
"pid": '2',
"name": ""
}
];
var tree = simTree({
el: '#tree',
data: list,
check: true,
linkParent: true,
//check: true,
onClick: function (item) {
console.log(item)
},
onChange: function (item) {
console.log(item)
}
});
var tree = simTree({
el: '#tree2',
data: list2,
check: true,
linkParent: true,
//check: true,
onClick: function (item) {
console.log(item)
},
onChange: function (item) {
console.log(item)
}
});
$('.sim-tree li').each(function(){
$(this).attr('data-search-term', $(this).text().toLowerCase());
});
$('#demo_2').on('change', function() {
//$('.panel-collapse').collapse('hide');
var searchVal = $(this).val().toLowerCase();
var searchTerm = $(this).val().toLowerCase();
if (searchVal != '') {
$('.sim-tree li').each(function() {
var currentLiText = $(this).text().toLowerCase();
showCurrentLi = currentLiText.indexOf(searchVal) !== -1;
if (showCurrentLi) {
$(this).closest('.panel-collapse').collapse('show');
$(this).children("i").click();
$(this).find("ul").addClass("show"); //show ul inside li
} else {
$(this).closest('.panel-collapse').collapse('hide');
$('.panel-collapse').collapse('hide');
$(this).children("i").addClass("layui-icon-r").removeClass("layui-icon-d")
$(this).find("ul").removeClass("show");
}
});
} else {
// $('.panel-collapse').collapse('hide');
$(".sim-tree").find("ul").removeClass("show") //find any ul has show class remove it
$(".sim-tree").children("li").children("i").addClass("layui-icon-r").removeClass("layui-icon-d") //find li children `i` change icon
}
});
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</body>
</html>
I'm creating a Django site, on a certain template i added an Ajax form and i would like to add an autocomplete feature, in order to make navigation easier.
My main problem is that the data i should search is a JSON array of objects, while most of the solutions i found work with normal arrays.
Here is what i have now:
<script>
$(document).ready(function(){
// Defining the local dataset
$.getJSON('http://127.0.0.1:8000/myapi/', function(data) {
console.log(data)
//Autocomplete
});
});
</script>
<input type="text" id='firstfield' name='input_val'>
This is what the data looks like, it's around 700 records; here are the first three:
"results": [
{
"item": "First",
"id": "1847",
},
{
"item": "Second",
"id": "4442",
},
{
"item": "Third",
"id": "3847",
}]
I need this to be as fast as possible. Is there a JQuery/Ajax native solution for this? Or is there a specific library to do this? Any advice or solution is appreciated, thanks in advance!
You could use the jQuery Typeahead Search plugin. Just set-up your form to use the proper nesting of classes as seen below.
$(() => {
//$.getJSON('http://127.0.0.1:8000/myapi/', function(data) {
let data = {
"results": [
{ "item": "First", "id": "1847" },
{ "item": "Second", "id": "4442" },
{ "item": "Third", "id": "3847" }
]
};
$('#first-field').typeahead({
source: {
data: data.results.map(record => record.item)
},
callback: {
onInit: function($el) {
console.log(`Typeahead initiated on: ${$el.prop('tagName')}#${$el.attr('id')}`);
}
}
});
//})
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-typeahead/2.11.0/jquery.typeahead.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-typeahead/2.11.0/jquery.typeahead.min.js"></script>
<h1>jQuery Typeahead</h1>
<form>
<div class="typeahead__container">
<div class="typeahead__field">
<div class="typeahead__query">
<input id="first-field" name="first-field" placeholder="Search" autocomplete="off">
</div>
<div class="typeahead__button">
<button type="submit"><i class="typeahead__search-icon"></i></button>
</div>
</div>
</div>
</form>
Try this one:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(document).ready(function(){
// Defining the local dataset
$.getJSON('http://127.0.0.1:8000/myapi/', function(data) {
console.log(data)
$( "#tags" ).autocomplete({
source: data
});
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
</body>
</html>
You can use Jquery autocomplete() function
Here is the link
https://jqueryui.com/autocomplete/
$( "#tags" ).autocomplete({
source: availableTags
});
} );
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure"}
I'm not able to use gantt.section. You can see the picture below that the width of the section is zero, it seems that I miss some files. I imported in my html file :
<link rel="stylesheet" type="text/css" href="node_modules/angular-gantt/dist/angular-gantt.css" />
<link rel="stylesheet" type="text/css" href=node_modules/angular-gantt/dist/angular-gantt-plugins.css"/> <link rel="stylesheet" type="text/css" href="node_modules/angular-gantt/dist/angular-gantt-core.css" />
<link rel="stylesheet" type="text/css" href="node_modules/angular-ui-tree/dist/angular-ui-tree.min.css" />
<link rel="stylesheet" type="text/css" href="node_modules/angular-gantt/src/plugins/sections/sections.css" />
All the plugins that I use work fine except sections.
data:
[
{
"name": "Create concept",
"tasks": [
{
"name": "Create concept",
"priority": 20,
"content": "<i class=\"fa fa-cog\" ng-click=\"scope.handleTaskIconClick(task.model)\"></i> {{task.model.name}}",
"color": "#F1C232",
"from": moment(1568800800000),
"to": moment(1568808000000),
"progress": 100,
"sections": {
"items": [
{
"name": "Section #1",
"classes": [
"section-1"
],
"from": moment(1568800800000),
"to": moment(1568811600000)
},
{
"name": "Section #2",
"classes": [
"section-2"
],
"from": moment(1568811600000),
"to": moment(1568808000000)
}
]
},
"id": "10c452b2-618b-f694-b0b6-b33ebfaac4fb"
}
],
"id": "1477337d-0c9a-0174-2d08-b45befb0fe32"
}
]
the html part :
<div class="row">
<div class="col-sm-12"
gantt data="data"
filter-row="{'name': ganttOptions.filterRow}"
>
<gantt-tree></gantt-tree>
<gantt-sections disable-magnet="true"></gantt-sections>// When I leave the default disable-magnet, I find in console an error says that Cannot read property 'getMagnetDate' of undefined
<gantt-dependencies enabled="true" read-only="true" js-plumb-defaults="jsPlumbDefaults" fallback-endpoints="fallbackEndpoints"></gantt-dependencies>
</div>
I'm a Java developer,I want to set value:symbol dynamically,but div("tradingview-widget-container__widget") always not work,can you help me?
<html>
<head>
<meta name='viewport'
content='width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no'>
</head>
<body>
<input type="hidden" value="COINBASE:BTCUSD" id="symbol"/>
<script type="text/javascript">
var symbol = document.getElementById("symbol").value;
</script>
<div class="tradingview-widget-container" style="background-color:#2A2D38">
<div class="tradingview-widget-container__widget"></div>
<div class="tradingview-widget-copyright"><a
href="https://www.tradingview.com/" rel="noopener"
target="_blank"><span class="blue-text">Data</span></a> by TradingView
</div>
<script type="text/javascript"
src="https://s3.tradingview.com/external-embedding/embed-widget-single-quote.js" async="">
console.log("wdiget:"+symbol);
{
"symbol"
:
symbol,
"width"
:
"100%",
"colorTheme"
:
"dark",
"isTransparent"
:
false,
"locale"
:
"en"
}
</script>
<!-- </div> -->
<!-- <div class="tradingview-widget-container" style="background-color:#2A2D38"> -->
<div id="tradingview_b59ae" style="background-color:#2A2D38"></div>
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
<script type="text/javascript">
console.log("chart:"+symbol);
new TradingView.widget(
{
"autosize": true,
"symbol": symbol,
"interval": "D",
"timezone": "Etc/UTC",
"theme": "Dark",
"style": "3",
"locale": "en",
"toolbar_bg": "#f1f3f6",
"enable_publishing": false,
"withdateranges": true,
"save_image": false,
"container_id": "tradingview_b59ae"
}
);
</script>
</div>
<!-- TradingView Widget END -->
</body>
</html>
when I run it in chrome,console does not log console.log(symbol);,but div("tradingview_b59ae") get the symbol value.So how to deal with this problem with async div?
I use SpringBoot thymeleaf(Java) to modify "<input type="hidden" value="COINBASE:BTCUSD" id="symbol"/>"'s value,when client need this page,Java will set the value and post page to client,but "console.log("wdiget:"+symbol);"not work,"console.log("chart:"+symbol);" is work.
I've been able to get a JSON file to load into a table fine, but I want to have multiple JSON files and change which one is loaded into the table based on which button has been pressed. I thought I could just make it change the variable data, but then the table still stays the same (I'm assuming you have to make it refresh some how?).
Also, on a side note, is it possible to have the prices have a space between them?
test.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<meta name="description" content="Hello World">
<!-- Latest compiled and minified CSS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://rawgit.com/wenzhixin/bootstrap-table/master/dist/bootstrap-table.min.css">
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/dist/bootstrap-table.min.js"></script>
<script src="data1.json"></script>
<script src="data2.json"></script>
<script>
$(function () {
$('#table').bootstrapTable({
data: data_one
});
$('#data1').on('click', function(event) {
$('#table').bootstrapTable({
data: data_one
});
});
$('#data2').on('click', function(event) {
$('#table').bootstrapTable({
data: data_two
});
});
});
</script>
</head>
<body>
<header>
<div class="jumbotron">
<div class="container">
<h3>Test</h3>
</div>
</div>
</header>
<div class="container">
<div class="row">
<div class="text-center">
<a class="btn btn-large btn-success" id="data1">Data 1</a>
<a class="btn btn-large btn-success" id="data2">Data 2</a>
</div>
</div>
</div>
<div class="container">
<div class="row">
<table id="table" class="table table-bordered" data-search="true" data-show-toggle="true">
<thead>
<tr>
<th data-field="id" data-sortable="true">ID</th>
<th data-field="name" data-sortable="true">Name</th>
<th data-field="prices" data-sortable="true">Price</th>
</tr>
</thead>
</table>
</div>
</div>
<footer>
<div class="container">
<hr>
<p><small>Google didn't help me</small></p>
</div>
</footer>
</body>
</html>
data1.json:
var data_one = [
{
"id": 0,
"name": "test0",
"prices": [
"$0",
"$5"
]
},
{
"id": 1,
"name": "test1",
"prices": [
"$4",
"$1"
]
},
{
"id": 2,
"name": "test2",
"prices": [
"$2",
"$3"
]
},
];
data2.json:
var data_two = [
{
"id": 4,
"name": "test4",
"prices": [
"$1",
"$2"
]
},
{
"id": 5,
"name": "test5",
"prices": [
"$6",
"$5"
]
},
{
"id": 6,
"name": "test6",
"prices": [
"$9",
"$7"
]
},
];
You need to specify the 'load' method when updating the data in the table:
<script>
$(function () {
$('#table').bootstrapTable({ data: data_one });
$('#data1').on('click', function(event) {
$('#table').bootstrapTable('load', { data: data_one });
});
$('#data2').on('click', function(event) {
$('#table').bootstrapTable('load', { data: data_two });
});
});
</script>
For some reason you cannot initially load the data with load method, only update. You can also append data with "append" method and do lot of cool stuff. Check out the documentation here: Bootstrap Table Documentation
1) You don't need all the ready functions, just one (the functions that look like $(function () {..}).
2) Also, you're not calling the plugin on that element again when you click a button - you have to explicitly do that.
3) Finally, you've not added an event listener to your second button - you added a duplicate listener to your first button.
4) You should remove the inline onclick="data1()" and onclick="data2()" from your HTML buttons.
$(function () {
$('#table').bootstrapTable({
data: data_one
});
$('#data1').on('click', function(event) {
$('#table').bootstrapTable({
data: data_one
});
});
$('#data2').on('click', function(event) {
$('#table').bootstrapTable({
data: data_two
});
});
});
You are not integrating data2() function. You can write your code as below.
$(function () {
$('#table').bootstrapTable({
data: data_one
});
});
function data1(){
$('#table').bootstrapTable({
data: data_one
});
}
function data2(){
$('#table').bootstrapTable({
data: data_two
});
}