this problem has got me almost depressed..
not so long ago this whole app worked but recently (probably more than 3 months, perhaps 6) one of my routes refuses to render any handlebars template I pass it, including ones that are rendering successfully via other routes.
this is the offending route:
app.get('/ListContentItems', function (req, res, next) {
try{
getAuthToken().then(authToken =>{
axios({
method:"get",
// url: "https://"+cmsEnvironment+"/content-repositories/"+respositoryId+"/content-items?page="+req.params.page+"&size="+req.params.size,
url: "https://"+cmsEnvironment+"/content-repositories/"+respositoryId+"/content-items?page=0&size=2",
headers:{
"Authorization": "Bearer " + authToken
}
})
.then(response => {
var contentGraph = response.data;
var stringContent = JSON.stringify(response.data,null,'\t');
console.log(stringContent);
res.render("list-content-items",{
static_path:'/static',
theme:process.env.THEME || 'flatly',
pageTitle : "List Content Items",
pageDescription : "List Content Items",
reqParams : req.query,
contentGraph : contentGraph._embedded,
stringContent : stringContent
})
// res.render('list-content-items',{static_path:'/static','pageTitle':'List Content Items - Success','contentGraph': contentGraph._embedded, 'stringContent' : stringContent, 'reqParams': req.query});
})
.catch(error => {
console.log(error);
res.render('list-content-items',{'pageTitle':'List Content Items - Fail','reqParams': req.query, 'error':error});
});
})
.catch(error => {
console.log(error);
next(error);
})
}
catch (e) {
next(e)
}
/* res.render('list-content-items',{title:"List Content Items",error:"figure out how to authorize so that i can list the content items and create links.."}) */
})
this is the template:
{{> header }}
{{#each contentGraph }}
{{#each this}}
{{log this}}
{{this.id}}
{{#each this}}
{{#if (eq this._meta.schema 'http://www.coops.net/draping-config')}}
{{this.label}}<br />
{{else if (eq this._meta.schema 'http://c1-qa.adis.ws/c/cmslabs/content-stack')}}
{{this.label}}<br />
{{else}}
{{this.label}}<br />
{{/if}}
{{/each}}
{{/each}}
</div>
{{/each}}
{{> footer }}
this is the log output:
{ id: '3fae61b6-56ef-4c31-9c53-40f45131b435',
contentRepositoryId: '5c5c64adc9e77c0001d73a22',
folderId: null,
body:
{ _meta:
{ name: 'Image Block 2',
schema: 'http://c1-qa.adis.ws/c/cmslabs/image-block' },
image:
{ _meta: [Object],
id: 'b7a1bced-e921-42ab-baef-b5aa43cd3701',
name: 'Fashion_Womens_Collection_SSS',
endpoint: 'bccdemo',
defaultHost: 'i1.adis.ws' },
editorial:
{ callToAction: [Object],
useParentAsCtaHotspot: false,
title: 'This coat is far too big',
text: 'but it\'s trendy',
overlayAlignment: 'Top Left',
overlayTheme: 'Darken',
alignCopyText: 'center' },
aspectRatio: { w: 4, h: 3 } },
version: 1,
label: 'Image Block 2',
status: 'ACTIVE',
createdBy: '2f38a1a9-c76d-4f34-91fa-652d09b6eede',
createdDate: '2020-08-11T13:45:50.420Z',
lastModifiedBy: '2f38a1a9-c76d-4f34-91fa-652d09b6eede',
lastModifiedDate: '2020-08-12T19:39:12.261Z',
lastPublishedVersion: 1,
lastPublishedDate: '2020-08-12T19:39:11.301Z',
deliveryId: '3fae61b6-56ef-4c31-9c53-40f45131b435',
_links:
{ self:
{ href:
'https://api.amplience.net/v2/content/content-items/3fae61b6-56ef-4c31-9c53-40f45131b435' },
'content-item':
{ href:
'https://api.amplience.net/v2/content/content-items/3fae61b6-56ef-4c31-9c53-40f45131b435{?projection}',
templated: true },
publish:
{ href:
'https://api.amplience.net/v2/content/content-items/3fae61b6-56ef-4c31-9c53-40f45131b435/publish' },
planned:
{ href:
'https://api.amplience.net/v2/content/content-items/3fae61b6-56ef-4c31-9c53-40f45131b435/planned{?epoch,time}',
templated: true },
update:
{ href:
'https://api.amplience.net/v2/content/content-items/3fae61b6-56ef-4c31-9c53-40f45131b435' },
'restore-version':
{ href:
'https://api.amplience.net/v2/content/content-items/3fae61b6-56ef-4c31-9c53-40f45131b435/restore' },
'content-repository':
{ href:
'https://api.amplience.net/v2/content/content-repositories/5c5c64adc9e77c0001d73a22' },
'content-item-version':
{ href:
'https://api.amplience.net/v2/content/content-items/3fae61b6-56ef-4c31-9c53-40f45131b435/versions{/version}',
templated: true },
'content-item-versions':
{ href:
'https://api.amplience.net/v2/content/content-items/3fae61b6-56ef-4c31-9c53-40f45131b435/versions{?page,size,sort}',
templated: true },
'content-item-history':
{ href:
'https://api.amplience.net/v2/content/content-items/3fae61b6-56ef-4c31-9c53-40f45131b435/history{?page,size,sort}',
templated: true },
copy:
{ href:
'https://api.amplience.net/v2/content/content-repositories/{id}/content-items?sourceContentItemId=3fae61b6-56ef-4c31-9c53-40f45131b435',
templated: true },
unarchive:
{ href:
'https://api.amplience.net/v2/content/content-items/3fae61b6-56ef-4c31-9c53-40f45131b435/unarchive' },
archive:
{ href:
'https://api.amplience.net/v2/content/content-items/3fae61b6-56ef-4c31-9c53-40f45131b435/archive' },
'set-locale':
{ href:
'https://api.amplience.net/v2/content/content-items/3fae61b6-56ef-4c31-9c53-40f45131b435/locale' },
'create-localizations':
{ href:
'https://api.amplience.net/v2/content/content-items/3fae61b6-56ef-4c31-9c53-40f45131b435/localize' },
localizations:
{ href:
'https://api.amplience.net/v2/content/content-items/3fae61b6-56ef-4c31-9c53-40f45131b435/localizations{?page,size,sort}',
templated: true },
'localization-jobs':
{ href:
'https://api.amplience.net/v2/content/localization-jobs/search/findByRootContentItem?id=3fae61b6-56ef-4c31-9c53-40f45131b435{&page,size,sort}',
templated: true },
'edition-slot-associations':
{ href:
'https://api.amplience.net/v2/content/content-items/3fae61b6-56ef-4c31-9c53-40f45131b435/edition-slot-associations' },
'edit-workflow':
{ href:
'https://api.amplience.net/v2/content/content-items/3fae61b6-56ef-4c31-9c53-40f45131b435/workflow' },
'content-item-with-children':
{ href:
'https://api.amplience.net/v2/content/content-items/search/findByIdWithChildren?id=3fae61b6-56ef-4c31-9c53-40f45131b435' } } }
{ id: '66436a40-eea3-414e-9036-98580220787a',
contentRepositoryId: '5c5c64adc9e77c0001d73a22',
folderId: null,
body:
{ _meta:
{ name: 'draping---sofa',
schema: 'http://c1-qa.adis.ws/c/cmslabs/draping-demo' },
SVG:
{ _meta: [Object],
id: '1200180d-7332-4228-8e88-1919906e44b8',
name: 'test_sofa',
endpoint: 'bccdemo',
defaultHost: 'i1.adis.ws' },
Textures: [ [Object], [Object], [Object] ] },
version: 1,
label: 'Draping - Sofa',
status: 'ACTIVE',
createdBy: '2f38a1a9-c76d-4f34-91fa-652d09b6eede',
createdDate: '2019-03-12T23:20:41.925Z',
lastModifiedBy: '2f38a1a9-c76d-4f34-91fa-652d09b6eede',
lastModifiedDate: '2019-03-12T23:20:41.925Z',
deliveryId: '66436a40-eea3-414e-9036-98580220787a',
_links:
{ self:
{ href:
'https://api.amplience.net/v2/content/content-items/66436a40-eea3-414e-9036-98580220787a' },
'content-item':
{ href:
'https://api.amplience.net/v2/content/content-items/66436a40-eea3-414e-9036-98580220787a{?projection}',
templated: true },
publish:
{ href:
'https://api.amplience.net/v2/content/content-items/66436a40-eea3-414e-9036-98580220787a/publish' },
planned:
{ href:
'https://api.amplience.net/v2/content/content-items/66436a40-eea3-414e-9036-98580220787a/planned{?epoch,time}',
templated: true },
update:
{ href:
'https://api.amplience.net/v2/content/content-items/66436a40-eea3-414e-9036-98580220787a' },
'restore-version':
{ href:
'https://api.amplience.net/v2/content/content-items/66436a40-eea3-414e-9036-98580220787a/restore' },
'content-repository':
{ href:
'https://api.amplience.net/v2/content/content-repositories/5c5c64adc9e77c0001d73a22' },
'content-item-version':
{ href:
'https://api.amplience.net/v2/content/content-items/66436a40-eea3-414e-9036-98580220787a/versions{/version}',
templated: true },
'content-item-versions':
{ href:
'https://api.amplience.net/v2/content/content-items/66436a40-eea3-414e-9036-98580220787a/versions{?page,size,sort}',
templated: true },
'content-item-history':
{ href:
'https://api.amplience.net/v2/content/content-items/66436a40-eea3-414e-9036-98580220787a/history{?page,size,sort}',
templated: true },
copy:
{ href:
'https://api.amplience.net/v2/content/content-repositories/{id}/content-items?sourceContentItemId=66436a40-eea3-414e-9036-98580220787a',
templated: true },
unarchive:
{ href:
'https://api.amplience.net/v2/content/content-items/66436a40-eea3-414e-9036-98580220787a/unarchive' },
archive:
{ href:
'https://api.amplience.net/v2/content/content-items/66436a40-eea3-414e-9036-98580220787a/archive' },
'set-locale':
{ href:
'https://api.amplience.net/v2/content/content-items/66436a40-eea3-414e-9036-98580220787a/locale' },
'create-localizations':
{ href:
'https://api.amplience.net/v2/content/content-items/66436a40-eea3-414e-9036-98580220787a/localize' },
localizations:
{ href:
'https://api.amplience.net/v2/content/content-items/66436a40-eea3-414e-9036-98580220787a/localizations{?page,size,sort}',
templated: true },
'localization-jobs':
{ href:
'https://api.amplience.net/v2/content/localization-jobs/search/findByRootContentItem?id=66436a40-eea3-414e-9036-98580220787a{&page,size,sort}',
templated: true },
'edition-slot-associations':
{ href:
'https://api.amplience.net/v2/content/content-items/66436a40-eea3-414e-9036-98580220787a/edition-slot-associations' },
'edit-workflow':
{ href:
'https://api.amplience.net/v2/content/content-items/66436a40-eea3-414e-9036-98580220787a/workflow' },
'content-item-with-children':
{ href:
'https://api.amplience.net/v2/content/content-items/search/findByIdWithChildren?id=66436a40-eea3-414e-9036-98580220787a' } } }
this is visually what appears:
and the HTML output:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Amplience Demo: List Content Items">
<meta name="author" content="">
<meta http-equiv="Accept-CH" content="DPR,Width,Viewport-Width">
<title>Amplience Demo - List Content Items </title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="/static/css/custom.css"/>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="/?id=&store=">
<span class="d-lg-block d-none">Amplience - Content Simplified</span>
<span class="d-block d-lg-none">Amplience</span>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown"><a class="nav-link" href="/showJSON?id=&store=">ShowJSON</a></li>
<li class="nav-item"><a class="nav-link" href="/carousel?id=&store=">Carousel</a></li>
<li class="nav-item"><a class="nav-link" href="/panels?id=&store=">Panels</a></li>
<li class="nav-item"><a class="nav-link" href="/ListContentItems/5/1">List Content Items</a></li>
</ul>
</div>
</nav>
<main role="main" class="container">
</main><!-- /.container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script> </body>
</html>
I think it's quite clear that the body of the template simply isn't rendering.
but other more complex routes render as expected..
let me know if you need further information.
After starting a brand new project and pulling this one route in I had a moment of enlightenment - here's the answer for anybody who hits a similar problem:
I was using the express-handlebars package which defaulted to main.hbs as it's layout.
I'd written a bunch of conditionals in there (bit of a noob error on reflection) which was preventing the body ever rendering - must've been a bit of a fluke that only this route was broken.
Lesson: don't put any complicated logic in your main.hbs file if your using express-handlebars.
Related
I am trying to set up a basic Tabulator table in Vue.JS and I see the table but the styling is broken.
I set up a new(basic) VueJS project and followed the instructions for Vue setup listed here: http://tabulator.info/docs/4.1/frameworks#vue
I added some sample data and the ran the app (npm run dev)
Here is my code:
Testpage.vue
<script>
var Tabulator = require('tabulator-tables')
export default {
name: 'Test',
data: function () {
return {
tabulator: null, // variable to hold your table
tableData: [
{name: 'Billy Bob', age: '12'},
{name: 'Mary May', age: '1'}
] // data for table to display
}
},
watch: {
// update table if data changes
tableData: {
handler: function (newData) {
this.tabulator.replaceData(newData)
},
deep: true
}
},
created: function () {
console.log('Test', this.$refs)
},
mounted () {
// instantiate Tabulator when element is mounted
this.tabulator = new Tabulator(this.$refs.table, {
data: this.tableData, // link data to table
columns: [
{title: 'Name', field: 'name', sorter: 'string', width: 200, editor: true},
{title: 'Age', field: 'age', sorter: 'number', align: 'right', formatter: 'progress'}
]
})
},
template: '<div ref="table"></div>'
}
</script>
App.vue:
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
Main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
Router(index.js)
import Vue from 'vue'
import Router from 'vue-router'
import Test from '#/components/TestPage'
import HelloWorld from '#/components/HelloWorld'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{ path: '/test', name: 'Test', component: Test }
]
})
I expect to see a styled table like the demo shows in the documentation.
A table with no styling appears on the page. (No borders, colors, etc)
you need to include the /dist/css/tabulator.css file from the Tabulator directory in your project with the rest of your CSS to bring in the table styling.
How you do that will depend on the evironment you are developing in
I tried to set up the described minimal Vue.JS Project on my own but encountered the following message in the console
> [Vue warn]: You are using the runtime-only build of Vue where the
> template compiler is not available. Either pre-compile the templates
> into render functions, or use the compiler-included build.
To avoid this message, it was necessary to modify the Testpage.vue. In my case it worked to move the key 'template' with its value from script section to its own 'template' section.
<template>
<div ref="table"></div>
</template>
<script>
const Tabulator = require('tabulator-tables');
export default {
name: 'Test',
data() {
return {
tabulator: null, // variable to hold your table
tableData: [
{ name: 'Billy Bob', age: '12' },
{ name: 'Mary May', age: '1' },
], // data for table to display
};
},
watch: {
// update table if data changes
tableData: {
handler(newData) {
this.tabulator.replaceData(newData);
},
deep: true,
},
},
created() {
// console.log('Test', this.$refs);
},
mounted() {
// instantiate Tabulator when element is mounted
this.tabulator = new Tabulator(this.$refs.table, {
data: this.tableData, // link data to table
columns: [
{
title: 'Name', field: 'name', sorter: 'string', width: 200, editor: true,
},
{
title: 'Age', field: 'age', sorter: 'number', align: 'right', formatter: 'progress',
},
],
});
},
};
</script>
I'm building an Node/Express/EJS app, and most pages that display data being passed through my EJS templates get stuck in "Waiting for localhost..."
var express = require("express");
var app = express();
var data = require("./data/info.json");
app.set("view engine", "ejs");
app.use(express.static(__dirname + "/public"))
//Index Route
app.get("/", function(req, res){
res.render("index");
});
//Profile Route
app.get("/profiles", function(req, res){
res.render("profiles");
});
//Indivual Routes
app.get("/profiles/test", function(req, res){
res.render("template", {data: data})
});
app.get("/idea", function(req, res){
res.render("idea", {data: data})
});
app.listen(3000, function(){
console.log("Server Has Started on Port 3000");
});
Currently the Index and Profile page load fine, but 9/10 times the 'idea' and 'test' page get stuck on the "Waiting for localhost..."
Any advice/suggestions would be very appreciated.
EDIT: Included Data JSON and Idea Template
Data JSON
{ Character:
{ LastChanged: '2018-04-06T10:28:14.857',
NotPersisted: 'false',
FileName: 'Char4.xml',
Name: '',
Key: 'c521cd46-ab33-431a-8b04-a110f59e4968',
Description:
{ CharName: 'Next PC',
PlayerName: 'Next PC',
GenderValue: 'cdgMale',
Age: '37',
Height: '6\'0"',
Build: 'Slim',
Hair: 'Long Black',
Eyes: 'Brown',
Gender: 'Male' },
Characteristics: { CharCharacteristic: [Array] },
Motivations: { CharMotivation: [Object] },
Specializations: { CharSpecialization: [Object] },
ForcePowers: '',
SigAbilities: '',
Skills: { CharSkill: [Array] },
ObOptions: { StartingSize: '10', Plus10XP: 'true' },
Obligations: { CharObligation: [Array] },
DutOptions: { StartingSize: '5' },
Duties: '',
Experience: { ExperienceRanks: [Object], UsedExperience: '100' },
Attributes:
{ SoakValue: [Object],
WoundThreshold: [Object],
StrainThreshold: [Object],
DefenseRanged: '',
DefenseMelee: '',
ForceRating: '' },
Species:
{ SpeciesKey: 'KYUZO',
SubSpeciesKey: '',
SelectedOptions: [Object] },
Career:
{ CareerKey: 'SOLDIER',
StartingSpecKey: 'SHARPSHOOTER',
CareerSkills: [Object],
CareerSpecSkills: [Object] },
Class: { ClassKey: 'PRIVFEW' },
Hook: { HookKey: 'OPP' },
Attitude: { AttitudeKey: 'ANCIENTRELIGION' },
Weapons: { CharWeapon: [Array] },
Armor: { CharArmor: [Object] },
Gear: '',
Vehicles: '',
NPCs: '',
SummaryPriorities: '',
Story: '',
Credits: '500',
Morality: { MoralityValue: '50' },
Grants: { UseGrants: 'false' },
Rigger:
{ VehicleKey: '',
WeaponIndex: '-1',
custRigger: '',
MaxSilhouette: '0' },
Schematics: '',
UseGrants: 'false',
AutoRecalc: 'true',
'_xmlns:xsi': 'http://www.w3.org/2001/XMLSchema-instance',
'_xmlns:xsd': 'http://www.w3.org/2001/XMLSchema' } }
Idea Template
<% include ./partials/header %>
<% var json = data['Character']['Skills']['CharSkill'] %>
<div class="containter">
<div class="row">
<div class="col-md-4">
<table>
<tbody>
<th>Skill</th>
<th>Rank</th>
<% for(var i = 0; i < json.length; i++ ){ %>
<tr>
<td><%= data['Character']['Skills']['CharSkill'][i]['Key'] %></td>
</tr>
<tr>
<td>
<% var skillstr = JSON.stringify(data['Character']['Skills']['CharSkill'][i]['Rank']); %>
<% var skill = skillstr.replace(/\D/g, ''); %>
<% var skillsum = 0;%>
<% while (skill) { skillsum += skill % 10; sw = Math.floor(skill / 10); } %>
<%= skillsum %>
</td>
</tr>
<% } %>
</tbody>
</table>
</div>
</div>
</div>
<% include ./partials/footer %>
Edit2: I've been testing it and the problem only arises when I add
<% var skillsum = 0;%>
<% while (skill) { skillsum += skill % 10; sw = Math.floor(skill / 10); } %>
Before I add that everything works as intended.
Try rendering without passing data. If it fails, problem is with data.
I am trying to create a grid with the help of Telerik Kendo UI which will show SharePoint data. To fetch data I am using SharePoint oData service.
I got an example of similer functionality here http://demos.telerik.com/kendo-ui/grid/remote-data-binding
And tried below code
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/grid/remote-data-binding">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.226/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.226/styles/kendo.material.min.css" />
<script src="//kendo.cdn.telerik.com/2016.1.226/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.1.226/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://server/_api/Web/Lists(guid'guid of list')/Items"
},
schema: {
model: {
fields: {
Title: { type: "string" }
}
}
},
pageSize: 20,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
height: 550,
filterable: true,
sortable: true,
pageable: true,
columns: [{
field:"Title"
}
]
});
});
</script>
</div>
</body>
</html>
And got below error
Refused to execute script from
'http://server/_api/Web/Lists(guid'listguid50387715207_1459178447636&%24inlinecount=allpages&%24format=json&%24top=20'
because its MIME type ('application/atom+xml') is not executable, and
strict MIME type checking is enabled.
You might want to change the transport-property to
transport: {
read: {
url: "http://server/_api/Web/Lists(guid'guid of list')/Items",
beforeSend: function (xhr) {
xhr.setRequestHeader("Accept", "application/json; odata=verbose")
}
}
}
in order to force sharepoint to return json-data instead of atom+xml (which is the default if you ommit the accept-header).
I'm trying to make form with button inside js, because formly directive rendered form isn't correct. I decided push my button and render that button by template but button has lost access to the controller and validation form. Where i have missed here?
controller.js
.controller('X', ['$log', 'Api', function($log, Api) {
var _self = this;
_self.model = {};
_self.formParts = [{
className: 'row',
fieldGroup: [
{
className: 'col-xs-3',
key: 'q',
type: 'select',
templateOptions: {
required: true,
valueProp: "id",
labelProp: "name",
options: [
{name: '0', id: 0},
{name: '1', id: 1},
],
}
},
{
className: 'col-xs-7',
key: 'n',
type: 'input',
templateOptions: {
required: true,
type: 'text',
placeholder: 'name'
}
}
{
className: 'col-xs-2',
templateUrl: 'button.html'
}
]
}];
_self.save(model) {
$log.info(model);
};
}]);
main.html
<formly-form model="f.model"
fields="f.formFields"
form="formForm">
</formly-form>
button.html
<button type="submit" class="btn btn-success"
ng-disabled="formForm.$invalid"
ng-click="f.save(f.model)">Save
</button>
I have an application using infragistics asp.net web grid. In the main page, Grid is displayed no problem. user can select a row from main grid, from there a dialog box pops up where a second grid is. The second grid just display the details of user-selected grid one's row.
Now I have a problem in the second grid, where user couldn't modify any existing values. I counld't find out anything I did differently in the second grid from first grid. see my code:
<script type="text/javascript">
$(document).ready(function () {
$.ig.loader({
scriptPath: "js/",
cssPath: "css/",
resources: "igGrid.*"
});
$.ajax({
type: "POST",
url: "Default.aspx/LoadA",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
error: function (result) {
alert(result.d); }
});
function OnSuccess(result) {
$.ig.loader(
function () {
var jsonLocal = new $.ig.JSONDataSource({ dataSource: result.d, responseDataKey: "d" });
$("#tblMain").igGrid({
dataSource: jsonLocal,
autoGenerateColumns: false,
renderCheckboxes: true,
width: "100%",
height: "100%",
primaryKey: "ColA",
columns: [
{ key: "ColA", headerText: "ColA", dataType: "number" },
{ key: "ColB", headerText: "ColB",ataType: "string" }],
features: [
{ name: "Updating",
editMode: "row",
columnSettings: [
{ columnKey: "ColA", readOnly: true } ]
},
{ name: "Resizing",
deferredResizing: false,
allowDoubleClickToResize: true
},
{
name: "Filtering",
allowFiltering: true,
caseSensitive: false,
type: "local"
},
{
name: "Selection",
mode: "row",
cellSelectionChanging: igGridCellSelectionChanged
}
] //end feature
}) //end igGrid
} //end function
) //end loader
} //end onSuccess
$("#tblMain").on("iggridselectionrowselectionchanged", igGridCellSelectionChanged);
function igGridCellSelectionChanged(event, ui) {
var ColA = ui.row.element[0].cells[0].innerText;
$.ajax({
type: "POST",
url: "Default.aspx/LoadB",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: '{ColA:"' + ColA+ '"}',
success: OnAttachments,
error: function (result) {
alert(result.d);
}
});
};
function OnAttachments(result) {
$.ig.loader(function () {
$.ig.loader(function () {
var jsonLocal = new $.ig.JSONDataSource({ dataSource: result.d, responseDataKey: "d" });
$("#tblAttachment").igGrid({
dataSource: jsonLocal,
width: "800",
height: "80%",
autoGenerateColumns: false,
primaryKey: "UId",
columns: [
{ key: "Col1", headerText: "Col1", dataType: "number", width: "50px" },
{ key: "Col2", headerText: "Col2", dataType: "string", width: "100px" }
],
fixedHeaders: true,
showHeader: true,
features: [{ name: "Updating"}]
});
});
});
};
$('#dialog').dialog({
modal: true,
autoOpen: false,
closeOnEscape: false,
width: 800,
height: 500,
buttons: [{ text: "OK",
click: function () {
$("#dialog").dialog("close");
}
}] //end buttons
}); //end dialog
})
</script>
<body>
<div class="page">
<table>
<tr><td>
<table id="tblMain" border="1" align="center"></table>
</td></tr>
<tr><td>
<table>
<tr>
<td align="right">
<button id="btnAttach" class="button">
Additional Info</button>
</td>
</tr>
</table>
</td></tr></table>
<div id="dialog" title="Attach Contracts">
<table><tr><td>
<table id="tblAttachment" border="1" align="center">
<tr><td></td></tr>
</table>
</td></tr></table>
</div>
</div>
</body>
I think the problem is caused by changing the focus from input to that dialog. Just set trackFocus property to false.
//Initialize
$(".selector").igDialog({
trackFocus: false
});