I would like to update a specific field in slideout from database(websql), to show the current user and he can access to his profil.
The targert is : title: log1, for that I used save:function (), and I have one record in database.
I spent many days searching but until now no solution.
Someone can help please.
Index
//...
<script type="text/javascript">
$(function() {
slideOut.app.navigate();
});
slideOut.Home = function (params) {
return {};
};
</script>
</head>
<body>
<div data-options="dxView : { name: 'Home', title: 'Slide Out' } " >
<div data-options="dxContent : { targetPlaceholder: 'content' } " >
</div>
</div>
</body>
</html>
App.config:
window.slideOut = $.extend(true, window.slideOut, {
var log1;
save:function (){
var db = openDatabase("dossierpatient", "1.0", "BD patient", 32678);
db.transaction(function(transaction){
transaction.executeSql("SELECT * FROM patient;", [], function(transaction,result){
for (var i=0; i< result.rows.length; i++) {
log1 = result.rows.item(i).login;
console.log(log1 + "\n ");
}
});
});
return log1;
}
"config": {
"navigationType": "slideout",
"navigation": [
{
"title": log1,
"action": "#",
"icon": "todo"
},
{
"title": "Item 2",
"action": "#",
"icon": "tips"
},
{
"title": "Item 3",
"action": "#",
"icon": "card"
},
{
"title": "Item 4",
"action": "#",
"icon": "map"
}
]
}
});
app.js
window.slideOut = window.slideOut || {};
$(function() {
// Uncomment the line below to disable platform-specific look and feel and to use the Generic theme for all devices
// DevExpress.devices.current({ platform: "generic" });
slideOut.app = new DevExpress.framework.html.HtmlApplication({
namespace: slideOut,
commandMapping: slideOut.config.commandMapping,
navigationType: "slideout",
navigation: getNavigationItems()
});
slideOut.app.router.register(":view", { view: "Home"});
function getNavigationItems() {
return slideOut.config.navigation; // cherche le contenu du slideOut
}
});
Seems like you have a mistake in app.config.js. The declaration of var log1 should be above extending code. The $.extend should have parameters as valid js objects:
var log1;
$.extend(true, window.slideOut, {
save: ...,
...
}
Move over I wouldn't advice you to add such a code in app config file.
To customize the view title (or whatever you have in your view) use viewModel with observables. For example:
slideOut.Home = function (params) {
var title = ko.observable("title");
var viewModel = {
title: title,
viewShowing: function() {
// TODO: put code fetching title from db and set it on done to observable
title("value");
}
};
return viewModel;
};
The code above will set the title of the view.
Related
I am having some trouble grasping my head around recursive components and I believe for what I am trying to accomplish, this may be the best way of doing so. Here is a Fiddle of where I am at so far, will explain below.
https://jsfiddle.net/wp0hon7z/2/
I am attempting to traverse through a nested JSON, it essentially mimics a DOM. Each “node” looks like this. You can open the fiddle to see a more nested JSON and
"tagName": "section",
"classes": ["container", "mx-auto"],
"attrs": {"id":"main"},
"textNode": "",
"children": [{}]
Currently I am able to recursively go through and create each node into a component and put them into a Component array which I populate in the Vue Instance.
The issue is, the children components need to be shown inside the parent component. I am thinking maybe create an object with component objects and then use a recursive component to parse these, but I have no idea how to go about it.
The other thought is maybe create a flat array of components with parent ids? And then possible use this somehow?
Some guidance on how to go about this would be great, I think the recursive component will help but not sure how I can use that in addition to the Create Element/Render Functions. Each node will need to have 2 way binding with the class list, attribute list, on, etc. I plan on keeping track of these and editing using states/stores, possibly vuex.
Currently the code seen in the Fiddle will display all the components in the JSON but without nesting, so just one after another.
const jsonData = [
{
"tagName": "section",
"classes": ["container","mx-auto"],
"attrs": {},
"textNode": "",
"children": [
{
"tagName": "div",
"classes": ["flex","flex-wrap"],
"attrs": {},
"textNode": "",
"children": [
{
"tagName": "div",
"classes": ["w-1/2"],
"attrs": {},
"textNode": "Hello"
},
{
"tagName": "div",
"classes": ["w-1/2"],
"attrs": {},
"textNode": "Goodbye"
}
]
}
]
}
];
let Components = [];
let uuid = 0;
function recurse() {
recursiveInitialize(jsonData)
}
function recursiveInitialize(j) {
if (Array.isArray(j)) {
return j.map((child) => recursiveInitialize(child))
}
if (j.children && j.children.length > 0) {
initializeComponent(j)
console.log("Hi I am " + j["tagName"] + " and a parent")
j.children.forEach((c) => {
console.log("Hi I am " + c["tagName"] + " and my parent is " + j["tagName"])
recursiveInitialize(c)
});
}
else {
console.log("Hi, I dont have any kids, I am " + j["tagName"])
initializeComponent(j)
}
}
function initializeComponent(jsonBlock){
let tempComponent = {
name: jsonBlock["tagName"]+ uuid.toString(),
methods: {
greet() {
store.setMessageAction(this)
}
},
data: function() {
return {
tagName: jsonBlock["tagName"],
classes: jsonBlock["classes"],
attrs: jsonBlock["attrs"],
children: jsonBlock["children"],
textNode: jsonBlock["textNode"],
on: {click: this.greet},
ref: uuid,
}
},
beforeCreate() {
this.uuid = uuid.toString();
uuid += 1;
},
render: function(createElement) {
return createElement(this.tagName, {
class: this.classes,
on: {
click: this.greet
},
attrs: this.attrs,
}, this.textNode);
},
mounted() {
// example usage
console.log('This ID:', this.uuid);
},
}
Components.push(tempComponent);
return tempComponent
}
const App = new Vue({
el: '#app',
data: {
children: [
Components
],
},
beforeCreate() {
recurse();
console.log("recurseRan")
},
mounted() {
this.populate()
},
methods: {
populate() {
let i = 0;
let numberOfItems = Components.length;
for (i = 0; i < numberOfItems; i++) {
console.log("populate: " + Components[i])
this.children.push(Components[i]);
}
},
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<template v-for="(child, index) in children">
<component :is="child" :key="child.name"></component>
</template>
</div>
Have you tried doing something along the lines of
// MyRecursiveComponent.vue
<template>
<div>
<!-- node content -->
<div v-for="childNode" in jsonData.children">
<MyRecursiveComponent :jsonData="childNode" />
</div>
</div>
<template
const jsonData = [
{
"tagName": "section",
"classes": ["container","mx-auto"],
"attrs": {},
"textNode": "",
"children": [
{
"tagName": "div",
"classes": ["flex","flex-wrap"],
"attrs": {},
"textNode": "",
"children": [
{
"tagName": "div",
"classes": ["w-1/2"],
"attrs": {},
"textNode": "Hello"
},
{
"tagName": "div",
"classes": ["w-1/2"],
"attrs": {},
"textNode": "Goodbye"
}
]
}
]
}
];
let Components = [];
let uuid = 0;
function recurse() {
recursiveInitialize(jsonData)
}
function recursiveInitialize(j) {
if (Array.isArray(j)) {
return j.map((child) => recursiveInitialize(child))
}
if (j.children && j.children.length > 0) {
initializeComponent(j)
console.log("Hi I am " + j["tagName"] + " and a parent")
j.children.forEach((c) => {
console.log("Hi I am " + c["tagName"] + " and my parent is " + j["tagName"])
recursiveInitialize(c)
});
}
else {
console.log("Hi, I dont have any kids, I am " + j["tagName"])
initializeComponent(j)
}
}
function initializeComponent(jsonBlock){
let tempComponent = {
name: jsonBlock["tagName"]+ uuid.toString(),
methods: {
greet() {
store.setMessageAction(this)
}
},
data: function() {
return {
tagName: jsonBlock["tagName"],
classes: jsonBlock["classes"],
attrs: jsonBlock["attrs"],
children: jsonBlock["children"],
textNode: jsonBlock["textNode"],
on: {click: this.greet},
ref: uuid,
}
},
beforeCreate() {
this.uuid = uuid.toString();
uuid += 1;
},
render: function(createElement) {
return createElement(this.tagName, {
class: this.classes,
on: {
click: this.greet
},
attrs: this.attrs,
}, this.textNode);
},
mounted() {
// example usage
console.log('This ID:', this.uuid);
},
}
Components.push(tempComponent);
return tempComponent
}
const App = new Vue({
el: '#app',
data: {
children: [
Components
],
},
beforeCreate() {
recurse();
console.log("recurseRan")
},
mounted() {
this.populate()
},
methods: {
populate() {
let i = 0;
let numberOfItems = Components.length;
for (i = 0; i < numberOfItems; i++) {
console.log("populate: " + Components[i])
this.children.push(Components[i]);
}
},
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<template v-for="(child, index) in children">
<component :is="child" :key="child.name"></component>
</template>
</div>
this is tree view on my website based on jquery org chart plugin, this tree created dynamically and also create children.
code is :
$(function() {
var datascource = {
'name': 'Kirby Cochran',
'title': '5061',
'children': [
{
"name": "Sharon Edwards",
"title": "11454",
"children": [
{
"name": "Kirby Cochran",
"title": "5061-kr",
"children": [
{
"name": "Michael Wach",
"title": "5063"
}
]
},
{
"name": "Phil Ungricht",
"title": "6189",
"children": [
{
"name": "Elaine 2 Cochran",
"title": "10238"
}
]
},
{
"name": "Roberto Montero",
"title": "5371"
}
]}]};
var oc = $('#chart-container').orgchart({
'data' : datascource,
'nodeContent': 'title',
'draggable': true,
'dropCriteria': function($draggedNode, $dragZone, $dropZone) {
if($draggedNode.find('.content').text().indexOf('manager') > -1 && $dropZone.find('.content').text().indexOf('engineer') > -1) {
return false;
}
return true;
}
});
oc.$chart.on('nodedropped.orgchart', function(event) {
console.log('draggedNode:' + event.draggedNode.children('.title').text()
+ ', dragZone:' + event.dragZone.children('.title').text()
+ ', dropZone:' + event.dropZone.children('.title').text()
);
});});
here requirement is if clicked any boxes open the popup and show details of customers. org chart
Here is some code snippet to load a pop-up
$(.node).click(function(){
var id = $(this).attr('id');
// use ajax here and getdata using id then display a modal and populate it
});
I have following module which defines my angular app.
var ang = angular.module('mainapp', ['ngRoute']);
ang.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider.
when("/home", {
templateUrl: "homepage.html",
controller: "homeController"
}).
when("/quiz", {
templateUrl: "quizpage.html",
controller: "quizController"
}).
when("/", {
templateUrl: "index.html",
controller: "indexController"
});
//otherwise({ redirectTo: '/' });
}]);
ang.controller('indexController', function ($scope) {
$scope.btn = "Welcome"
$scope.Login = function () {
alert("Thanks ");
$location.path("home");
};
});
ang.controller('homeController', function ($scope) {
// initialize if you can
window.history.go(-1);
$scope.salutations = [{ name: "Mr", id: 1 }, { name: "Mrs", id: 2 }, { name: "Ms", id: 3 }, { name: "Jr", id: 4 }, { name: "Mister", id: 5 }, { name: "Dr", id: 6 }];
$scope.profile = {
name: "",
email: "",
contact: "",
division: "",
feedback: "",
};
$scope.submitInfo = function (profile) {
alert("Thanks " + profile.name + ". Lets get to the Quiz now.");
$location.path("quiz");
};
});
ang.controller('quizController', function ($scope) {
//initialize if you can
window.history.go(-1);
$scope.questions = [
{
"questionText": "Why is the sky blue?", "answers": [
{ "answerText": "blah blah 1", "correct": true },
{ "answerText": "blah blah 2", "correct": false },
{ "answerText": "blah blah 3", "correct": false }
]
},
{
"questionText": "Why is the meaning of life?", "answers": [
{ "answerText": "blah blah 1", "correct": true },
{ "answerText": "blah blah 2", "correct": false },
{ "answerText": "blah blah 3", "correct": false }
]
},
{
"questionText": "How many pennies are in $10.00?", "answers": [
{ "answerText": "1,000.", "correct": true },
{ "answerText": "10,000.", "correct": false },
{ "answerText": "A lot", "correct": false }
]
},
{
"questionText": "What is the default program?", "answers": [
{ "answerText": "Hello World.", "correct": true },
{ "answerText": "Hello Sunshine.", "correct": false },
{ "answerText": "Hello my ragtime gal.", "correct": false }
]
}
];
$scope.answers = {};
$scope.correctCount = 0;
$scope.showResult = function () {
$scope.correctCount = 0;
var qLength = $scope.questions.length;
for (var i = 0; i < qLength; i++) {
var answers = $scope.questions[i].answers;
$scope.questions[i].userAnswerCorrect = false;
$scope.questions[i].userAnswer = $scope.answers[i];
for (var j = 0; j < answers.length; j++) {
answers[j].selected = "donno";
if ($scope.questions[i].userAnswer === answers[j].answerText && answers[j].correct === true) {
$scope.questions[i].userAnswerCorrect = true;
answers[j].selected = "true";
$scope.correctCount++;
} else if ($scope.questions[i].userAnswer === answers[j].answerText && answers[j].correct === false) {
answers[j].selected = "false";
}
}
}
//console.log($scope.answers);
};
$scope.submitQuiz = function (quiz) {
alert("Congrats.");
$location.path("index");
};
});
I want to land user on index page with welcome button and upon clicking i want to take user to the homepage and when user fills info on home page it should go to quiz page.
But the app doesn't bind the controller to index page at all.
<!DOCTYPE html>
<html data-ng-app="mainapp">
<head>
<title>WinPrizes</title>
</head>
<body >
<div data-ng-controller="indexController">
<button ng-click="Login()">{{btn}}</button>
</div>
<script src="Scripts/angular.min.js"></script>
<script src="app/app.module.js"></script>
<script src="app/main.js"></script>
</body>
</html>
When the index page is opened it shows button text as {{btn}}. These are not partial templates . I just want to switch to different html pages as part of the navigation user clicks on a button in each page.
You're using ngRoute but you've not added the plugin library in index.html after the angulat.min.js In version 1.2 later angular-route.js has to be added separately it doesn't come inside main library. e.g.
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular-route.js">
</script>
Also, you're using $location service in all the controllers, so you've to pass that in controller function as a dependency.
You need ng-view directive on index.html to make routing work. And be careful that your views are partial views (containing partial html code). Also why you added window.history.go(-1); on initialisation of controller? Because it'll always go back to previous page onload o controller. You should add such code only inside some function which you're going to call on specific action/event.
Here's working plunker for your version of code:
https://plnkr.co/edit/ADWf012Q7mTVBR3svPYb?p=preview
So question says by themselves. I did an example here
or or look on this code:
html
<div id="jstree">
<ul>
<li>Root
<ul>
<li>Parent1
<ul>
<li>Child1</li>
<li>Child2</li>
</ul>
</li>
<li>Parent2
<ul>
<li>Child1</li>
<li>Child2</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div class="form-group">
<input id="left" type="file" class="file" data-upload-url="/upload">
</div>
js
var array = [
{
"name": "Parent1",
"id": "1",
"description": "An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features. (supports twitter bootstrap v2 and v3) "
},
{
"name": "Parent2",
"id": "2",
"description": "A jQuery plugin to select multiple elements with checkboxes :)"
},
{
"name": "Parent1",
"id": "3",
"description": "Show/hide password plugin for twitter bootstrap."
}
];
var array2 = [
{
"subname": "Parent101",
"subid": "101",
"description": "An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features. (supports twitter bootstrap v2 and v3) "
},
{
"subname": "Parent202",
"subid": "202",
"description": "A jQuery plugin to select multiple elements with checkboxes :)"
},
{
"subname": "Parent101",
"subid": "303",
"description": "Show/hide password plugin for twitter bootstrap."
}
];
var $table = $('#table');
var $study = $('#jstree');
$(function () {
$table.bootstrapTable({
formatNoMatches: function () {
return "This table is empty...";
}
});
$('#jstree')
.on('select_node.jstree', function(event, data){
// ===== Initialize parent =====
var loMainSelected = data;
uiGetParents(loMainSelected);
function uiGetParents(node) {
try {
var level = node.node.parents.length;
var elem = $('#' + node.node.id);
var parent = node.node.text;
for (var ln = 0; ln <= level - 1; ln++) {
elem = elem.parent();
var child = elem.children()[-1];
if (child != undefined) {
parent = child.text;
}
}
console.log(parent);
}
catch (err) {
console.log('Error in uiGetParents');
}
}
// ===== Click event on node =====
for(var i = 0; i < data.selected.length; i++) {
var node = data.instance.get_node(data.selected[i]).text;
if (node == "Child1") {
$(function () {
$table.bootstrapTable('refreshOptions',
{
data: array,
columns: [
{
title:"Name",
field:"name"
},
{
title:"Id",
field:"id"
},
{
title:"Description",
field:"description"
}
]
});
});
}
else if (node == "Child2"){
$(function () {
$table.bootstrapTable('refreshOptions',
{
data: array2,
columns: [
{
title:"Subname",
field:"subname"
},
{
title:"Subid",
field:"subid"
},
{
title:"Description",
field:"description"
}
]
});
});
}
}
})
.jstree({
"core" : {
"themes": {
"url": true,
"icons": true,
"dots": true
}
}
});
});
I want to create drag and drop node, so user could drag it and drop it into to the droppable window and he'll see the table with data. Separately everything works fine. Jstree is loading, eventHandler on click works well and you can see table by clicking and even drag and drop window works fine and display every file which user will drop into it but how to connect all of this stuff, has anyone idea?
For that you will have to use the dnd plugin and listen to drag-drop event as below. Check demo - Fiddle.
$(document).on('dnd_stop.vakata', function(e, data) {
for (var i = 0; i < data.data.nodes.length; i++) {
var node = $('#jstree').jstree().get_node(data.data.nodes[i]).text;
if (node == "Child1") {
$table.bootstrapTable('refreshOptions', {
data: array,
columns: [{
title: "Name",
field: "name"
}, {
title: "Id",
field: "id"
}, {
title: "Description",
field: "description"
}]
});
} else if (node == "Child2") {
$table.bootstrapTable('refreshOptions', {
data: array2,
columns: [{
title: "Subname",
field: "subname"
}, {
title: "Subid",
field: "subid"
}, {
title: "Description",
field: "description"
}]
});
}
}
});
Demo
I am using this solution to load dynamic data in to Data Table. I have to use the Array of Array since I am getting dynamic data from user on font end selection (NO DATABASE Selection).
I am using following code to upload data into the table
<table cellpadding="0" cellspacing="0" border="0" class="dataTable" id="example"></table>
and JS:
$(document).ready(function () {
var counter = 0;
var compareTable = [];
var compareRow = [];
var check = "Test";
var compModelName = "Test";
var selectedType = "Test";
var selectedTarget = "Test";
var selectedROR = "Test";
var selectedSpecies = "Test";
var historicDis = "Test";
var projectsNumber = "Test";
var projectsCost = "Test";
var projectsRoads = "Test";
var projectsPowerline = "Test";
var projectsPenstock = "Test";
var mapshow = "Test";
$("#load").on("click", function () {
loader();
});
function loader() {
compareRow.push(check);
compareRow.push(compModelName);
compareRow.push(selectedType);
compareRow.push(selectedTarget);
compareRow.push(selectedROR);
compareRow.push(selectedSpecies);
compareRow.push(historicDis);
compareRow.push(projectsNumber);
compareRow.push(projectsCost);
compareRow.push(projectsRoads);
compareRow.push(projectsPowerline);
compareRow.push(projectsPenstock);
compareRow.push(mapshow);
}
$('#example').dataTable( {
"data": compareTable,
"columns": [
{ "title": "Compare" },
{ "title": "Model Name" },
{ "title": "Model Type" },
{ "title": "Energy Target" },
{ "title": "ROR Attribute" },
{ "title": "Species", "class": "center" },
{ "title": "Disturbance", "class": "center" },
{ "title": "Projects" },
{ "title": "Cost (M$)" },
{ "title": "Roads (Km)" },
{ "title": "Powerlines (Km)", "class": "center" },
{ "title": "Penstock (m)", "class": "center" },
{ "title": "Map" }
]
} );
});
});
but as you can see in the Demo it is not functioning when we click on the "#load". Can you please let me know why this is happening and how I can fix it?