I'm trying to use autocomplete inside a jstree but can't figure out why it doesn't work when both bindings are done in document ready. It works if the autocomplete binding is done after the jstree binding via windows load or a user triggered script.
This is a simplified example of the issue. (code at JSFiddle)
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jsTree v.1.0 - Demo</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://static.jstree.com/v.1.0pre/jquery.cookie.js"></script>
<script type="text/javascript" src="http://static.jstree.com/v.1.0pre/jquery.hotkeys.js"></script>
<script type="text/javascript" src="http://static.jstree.com/v.1.0pre/jquery.jstree.js"></script>
<link type="text/css" rel="stylesheet" href="http://static.jstree.com/v.1.0pre/_docs/syntax/!style.css"/>
<link type="text/css" rel="stylesheet" href="http://static.jstree.com/v.1.0pre/_docs/!style.css"/>
<script type="text/javascript" src="http://static.jstree.com/v.1.0pre/_docs/syntax/!script.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script>
function autocomplete(element) {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$(element).autocomplete({
source: availableTags
});
};
</script>
</head>
<body id="demo_body">
<div id="container">
<h1 id="dhead">jsTree v.1.0</h1>
<h1>DEMO</h1>
<div>
<label for="tags">Tags: </label>
<input id="tags" />
</div>
<h2>Autocomplete inside jsTree</h2>
<div id="description">
<!-- autocomplete inside a tree works when the user adds autocomplete manually -->
<button type="button" onclick="autocomplete('#tagstree')">add autocomplete manually (comment out other autocomplete bindings)</button>
<div id="demo1" class="demo" style="height:100px;">
<ul>
<li id="phtml_1">
<label for="tagstree">Tags: </label>
<input id="tagstree" />
<ul>
<li id="phtml_2">
Child node 1
</li>
<li id="phtml_3">
Child node 2
</li>
</ul>
</li>
<li id="phtml_4">
Root node 2
</li>
</ul>
</div>
<script type="text/javascript">
$(function () {
/* just to demonstrate an autocomplete field by itself works */
autocomplete('#tags');
/* adding autocomplete on an element in the tree doesn't work */
autocomplete('#tagstree');
$("#demo1")
.jstree({
"plugins" : ["themes","html_data","ui","crrm","hotkeys"],
"core" : { "initially_open" : [ "phtml_1" ] }
})
.bind("loaded.jstree", function (event, data) {
});
});
/* autocomplete inside a tree works when it gets added via windows load instead of document ready */
//$(window).load(function () {
// autocomplete('#tagstree');
//});
</script>
</div>
</body>
</html>
Related
I am trying to make from an array of scrambled sentences unordered lists to apply sortable JS in the following format
<ul id="sortable" class="div3">
<li id = 'number'> </li>
<li id="1" class="ui-state-default">The</li>
<li id="2" class="ui-state-default">piano</li>
<li id="3" class="ui-state-default">play</li>
<li id="4" class="ui-state-default">I</li>
</ul>
<script>
So far I have come up with the following which does not give the correct format
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>my array to list attempt</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<style>
li {
list-style:none;
display: inline;
}
</style>
</head>
<body>
<script>
function makeQuest() {
var quest=['I play piano the can', 'tired I am', 'are seven there week in a days'];
for (var i=0; i< quest.length; i++){
document.write('<ul class ="div3">')
document.write('<li id = "number">' + (i + 1) + ' '+ '</li>')
for (var j=0; j < quest[i].length; j++){
document.write('<li>' + quest[i][j] + '</li>')
document.write('</ul>')
}
}
};
$(function makeSort() {
$( ".div3" ).sortable({
items: "li:not(#number)"
});
$( ".div3" ).disableSelection();
});
</script>
<script>
makeQuest()
makeSort()
</script>
</body>
</html>
I am not a programmer : just trying to make a language tutor for personal use. Thank you for any help
This is working for me, and is sortable
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>my array to list attempt</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<style>
li {
list-style:none;
display: inline;
}
</style>
</head>
<body>
<ul id="sortable" class="div3">
<li id = 'number'> </li>
<li id="1" class="ui-state-default">The</li>
<li id="2" class="ui-state-default">piano</li>
<li id="3" class="ui-state-default">play</li>
<li id="4" class="ui-state-default">I</li>
</ul>
<script>
$(function makeSort() {
$( ".div3" ).sortable({
items: "li:not(#number)"
});
$( ".div3" ).disableSelection();
});
</script>
</body>
</html>
tab-dashboard.html
<ion-content class="padding" ng-controller="DashboardCtrl">
<div class="card">
<div class="item item-divider">
A line chart
</div>
<div class="item item-text-wrap">
<canvas id="line" class="chart chart-line" data="data" labels="labels" legend="true" series="series" options="{showTooltips: false}"></canvas>
</div>
</div>
<div class="card">
<div class="item item-divider">
A bar chart
</div>
<div class="item item-text-wrap">
<canvas id="bar" class="chart chart-bar" data="data" labels="labels" legend="true" series="series" options="{showTooltips: false}"></canvas>
</div>
</div>
</ion-content>
</ion-view>
app.js
angular.module('starter', ['ionic', 'chart.js', 'starter.controllers', 'starter.services', 'ngCordova'])
.state('tab.dashboard', {
url: '/dashboard',
views: {
'tab-dashboard': {
templateUrl: 'templates/tab-dashboard.html',
controller: 'DashboardCtrl'
}
}
})
controller.js
.controller('DashboardCtrl', function($scope){
$scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
$scope.series = ['Series A', 'Series B'];
$scope.data = [
[65, 59, 80, 81, 56, 55, 40],
[28, 48, 40, 19, 86, 27, 90]
];
})
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link rel="manifest" href="manifest.json">
<!-- un-comment this code to enable service worker
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.log('Error', err));
}
</script>-->
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<!--CHART CSS-->
<link rel="stylesheet" href="lib/ionic/css/angular-chart.css">
<!--/CHART CSS-->
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body ng-app="starter">
<!--
The nav bar that will be updated as we navigate between views.
-->
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<!--
The views will be rendered in the <ion-nav-view> directive below
Templates are in the /templates folder (but you could also
have templates inline in this html file if you'd like).
-->
<!--Chart -->
<script src="lib/ionic/js/Chart.min.js"></script>
<script src="lib/ionic/js/angular-chart.min.js"></script>
<!--barcode-->
<script src="js/ng-cordova.min.js"></script>
<ion-nav-view></ion-nav-view>
I have just paste a part of my code that is relevant to this dashboard only. However, after debugging and realizing there is no error in the code itself, i still couldn't manage to display my chart. Is it true that i am missing some JS file or is it that i am missing a few lines of code. Thanks
Where you define your chart canvas, you need to use the correct directives, which are prefixed with chart-:
<canvas id="bar" class="chart chart-bar"
chart-data="data"
chart-labels="labels"
legend="true"
chart-series="series"
chart-options="{showTooltips: false}"></canvas>
See the documentation
I've created a simple "helloworld" web component, in that I put a "button" tag and I want that button to be clicked by triggering it but i'm unable to trigger it. What am I doing wrong?
Here is my code for "Index.html" file in which i've called my Own component and values for my button:
<!doctype html>
<html>
<head>
<title>First Polymer component</title>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<script src="bower_components/lib/jquery-1.11.2.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap_theme/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="bootstrap_theme/css/bootstrap-theme.css" />
<script src="bootstrap_theme/js/bootstrap.js"></script>
<link rel="import" href="hello-world.html">
<script>
var button_data = [{
"name": "litrary vocabulary",
"span_id": "mostbasic",
"description": "This is a sample description about litrary vocabulary"
}, {
"name": "no contractions",
"description": "This is a sample description about no contractions"
}];
window.addEventListener('WebComponentsReady', function(e) {
var element = document.querySelector('hello-world');
element.buttonsdata = button_data;
});
</script>
</head>
<body>
<hello-world> </hello-world>
<script>
$('.answerButtons').trigger("click");
function k12() {
window.open("http://www.w3schools.com");
}
</script>
</body>
</html>
And the 2nd file contain code for my web component:
<link rel="import" href="bower_components/polymer/polymer.html">
<dom-module id="hello-world">
<style>
p {
color: red;
}
</style>
<template>
<template is="dom-repeat" items="{{buttonsdata}}" as="button_data">
<button type="button" class="btn btn-info answerButtons" onclick = "k12()">{{_getButtonName(button_data)}} </button>
</template>
<p>This is my first own component </p>
<p>This is my first ....... </p>
<p>Kumaran is IDIOT </p>
</template>
<script>
Polymer({
is: 'hello-world',
_getButtonName: function(buttondata) {
return buttondata.name;
}
});
</script>
</dom-module>
button_data should be a property in hello-world
onclick should be on-click for Polymer binding https://www.polymer-project.org/1.0/docs/devguide/events.html
I have the following problem.
If I put he JavaScript code into the head or body tag, I need to click twice the submit button and then the Ajax form or whatever I need to do it does correctly, but I need to click twice.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>XXXX</title>
<!--Este es el JS que hace que funcione Phonegap-->
<script type="text/javascript" charset="utf-8" src="js/cordova.js"></script>
<!--JS específicos de Jquery Mobile-->
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery.mobile-1.4.2.min.js"></script>
<!--Estos son script creados para la aplicacion-->
<script src="js/md5.js"></script>
<script src="js/login.js"></script>
<!--CSS del tema que he creado para apotecalia-->
<link rel="stylesheet" href="themes/XXXX.css" />
<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="css/jquery.mobile.structure-1.4.2.min.css" />
</head>
<div id="login">
<div data-role="header" data-position="fixed">
</div>
<div data-role="content">
<form id="check-user" data-ajax="false">
<fieldset>
<div data-role="fieldcontain">
<label> Usuario </label>
<input type="text" id="correo" name="correo">
</div>
<div data-role="fieldcontain">
<label> Contraseña </label>
<input type="password" id="pwd" name="pwd" >
</div>
<input type="submit" data-role="button" value="Acceder" name="enviar" id="enviar">
</fieldset>
</form>
</div>
<div data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
Login.js
$(function () {
$('#enviar').click( function() {
if($('#correo').val().length > 0 && $('#pwd').val().length > 0){
alert($('#correo').val() + $('#pwd').val());
}
});
});
But if I put the script code into the tag page where I need to use it, I don't need to click twice, but I cannot get the data form to do my Ajax request.
The same code, but if I put the script code into data-role="page" I have to put this code into all the tags... The alert in this case is empty.
<div id="login">
<script src="js/login.js"></script>
<div data-role="header" data-position="fixed">
</div>
<div data-role="content">
Please I don't know how to do it, I tried two weeks fixing this, I need your help.
Add simple type="button" instead of type="submit" .
<input type="button" data-role="button" value="Acceder" name="enviar" id="enviar">
$(function () {
$('#enviar').click( function() {
if($('#correo').val().length > 0 && $('#pwd').val().length > 0){
alert($('#correo').val() + $('#pwd').val());
// Add code here submit form data using Ajax
var ajax_call = your_serviceURL;
var str = $('#check-user').serialize();
$.ajax({
type: "POST",
url: ajax_call,
data: str,
dataType: "json",
success: function(response){
// It's success json response
}
}).done(function() {
})
}
});
});
Include your script in the head tag.
Declare your page container <div data-role="page" id="login">.
Change your code in login.js to:
$(document).on("pageinit", "#login", function(event, ui)
{
$(document).on("click", "#enviar", function(event)
{
if ($('#correo').val().length > 0 && $('#pwd').val().length > 0)
alert($('#correo').val() + $('#pwd').val());
});
});
Any idea how to add charts using Telerik Kendo UI DataViz to an iPhone web application. Thanks in advance. Here is what I am trying to do, but the chart does not show up!
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<script src="../../../../Scripts/jquery.min.js" type="text/javascript"></script>
<script src="../../../../Scripts/kendo.all.js" type="text/javascript"></script>
<script src="../../../../Scripts/console.js" type="text/javascript"></script>
<link href="../../../../Content/Mobile/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="../../../../Content/Mobile/kendo.mobile.all.min.css" rel="stylesheet"
type="text/css" />
<div data-role="view" data-title="Views">
<header data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
<a data-align="right" data-role="button" class="nav-button" href="#index">Index</a>
</div>
</header>
<ul data-role="listview" data-style="inset">
<li>Local View</li>
</ul>
<ul data-role="listview" data-style="inset">
<li>Remote View</li>
</ul>
</div>
<div data-role="view" id="secondview" data-layout="mobile-view" data-title="Local View">
<div id="chart">
</div>
<script>
function createChart() {
$("#chart").kendoChart({
title: {
text: "Kendo Chart Example"
},
series: [
{ name: "Example Series", data: [200, 450, 300, 125] }
]
});
}
$(document).ready(function () {
setTimeout(function () {
createChart();
$("#example").bind("kendo:skinChange", function (e) {
createChart();
});
}, 400);
});
</script>
</div>
<div data-role="layout" data-id="mobile-view">
<header data-role="header">
<div data-role="navbar">
<a class="nav-button" data-align="left" data-role="backbutton">Back</a>
<span data-role="view-title"></span>
<a data-align="right" data-role="button" class="nav-button" href="#index">Index</a>
</div>
</header>
</div>
<script>
window.kendoMobileApplication = new kendo.mobile.Application(document.body);
</script>
Thanks in advance
KendoUI DataViz components work in Webkit-based mobile browsers, including Safari on iOS (source), in addition to Android Browser v3 and above.
If you just want to know how to implement a KendoUI chart, here is a simple one I did to answer another question, about how to force KendoUI to plot across missing values: http://jsfiddle.net/LyndsySimon/KJuDe/
categoryAxis: {
categories: [
'test<tspan dx="-20px" dy="1em">label</tspan>', 2006, 2007, 2008, 2009]
}
You can find a complete reference to the DataViz library on KendoUI's site: http://www.kendoui.com/documentation/dataviz/chart/overview.aspx