I am new to AngularJS and I am trying it out with node.JS.
My first try is fairly simple. I use an array to display images with ng-repeat. It is working but for some reason when I load the page I get one error.
Here is my html:
<footer ng-app="footIcon" ng-init="icons =[
{name: 'Node.js', file: 'node_ico.png', title: 'Serveur Web JavaScript'},
{name: 'AngularJS', file: 'angular_ico.png', title: 'Programmation Javascrit Angulaire'},
{name: 'HTML 5', file: 'html5_ico.png', title: 'Hyper Text Markup Language Version 5'},
{name: 'CSS 3', file: 'css3_ico.png', title: 'Cascade Style Sheet Version 3'},
{name: 'JavaScript', file: 'js_ico.png', title: 'JavaScript'},
{name: 'JQuery', file: 'jquery_ico.png', title: 'Write less do more'},
{name: 'Bootstrap', file: 'bootstrap_ico.png', title: 'CSS Template'},
{name: 'Arduino', file: 'arduino_ico.png', title: 'Votre programmation rejoint le monde physique'},
{name: 'Raspberry Pi', file: 'pi_ico.png', title: 'Ordinateur de poche propulsé par Linux'}
]">
<div class="container" >
<div class="row">
<div ng-repeat = "icon in icons" class="col-lg-1 col-md-1 col-sm-3 col-xs-6">
<img src="images/{{icon.file}}" alt="{{icon.name}}" title="{{icon.title}}">
</div>
</div>
</div>
</footer>
The page is displayed correctly but the console return;
GET file:///C:/NODE/www/images/%7B%7Bicon.file%7D%7D net::ERR_FILE_NOT_FOUND
I have try to put my script tag (the one linking to angular) at the top of the of the page (to load it before code happen) But when I did that I was getting this error twice.
my ng-app only contains bare minimum:
var footIcon = angular.module('footIcon', []);
Why am I getting this error?
Use ng-src as opposed to src in img tag.
Reference: https://docs.angularjs.org/api/ng/directive/ngSrc
What is happening is when your page loads, the browser tries to load the img tag with the source that your template has i.e images/{{icon.file}} which your browser can't find hence the error.
Related
I'm deploying a client app with vue.js.
In this app I have some tabs that are being rendered using v-for. this tab array is formated like this in vuex store:
tabs: [
{
id: 1,
title: 'first tab',
number: '09389826331',
accountName: 'DelirCo',
contactName: 'PourTabarestani',
startTime: '2019-02-25 15:11:30',
endTime: '2019-02-25 18:04:10',
duration: null,
subject: '',
description: ''
},
{
id: 2,
title: 'second tab',
number: '09124578986',
accountName: 'Cisco',
accountGUID: '',
contactName: 'Arcada',
contactGUID: '',
startTime: '2019-02-25 15:11:45',
endTime: '2019-02-25 15:13:55',
duration: null,
subject: '',
description: ''
}
]
I'm using getters to load the tabs in my vuex store which renders the tabs using following template:
<template>
<div id="Tabs">
<vs-tabs color="#17a2b8" v-model="selectedTab">
<vs-tab v-for="tab in tabs" :key="tab.id" :vs-
label="tab.title">
<Tab :tab="tab"></Tab>
</vs-tab>
</vs-tabs>
</div>
</template>
I'm using vuesax components for creating the tabs displays.
each object in this list is a tab in my front end which shows the related data when I click each tab.
it's doing perfectly fine when I try to show the tabs or even adding another object in the array.
the problem is when I try to remove a certain item from this array the content goes away but the tab title (the button where I can select the tab with it) remains on the page.
I'm using
state.tabs.splice(objectIndex, 1)
state.selectedTab -= 1
for removing the tab and changing the selected tab to the previous one.
but as I said the title of the tab is not being removed like the picture below:
and when I click on that tab I'm getting this error:
webpack-internal:///./node_modules/vuesax/dist/vuesax.common.js:4408 Uncaught TypeError: Cannot set property 'invert' of undefined
at VueComponent.activeChild (webpack-internal:///./node_modules/vuesax/dist/vuesax.common.js:4408)
at click (webpack-internal:///./node_modules/vuesax/dist/vuesax.common.js:4127)
at invoker (webpack-internal:///./node_modules/vue/dist/vue.esm.js:2140)
at HTMLButtonElement.fn._withTask.fn._withTask (webpack-internal:///./node_modules/vue/dist/vue.esm.js:1925)
anyone have any suggestion around this matter ?
You can just add a key to the parent element to force the rerender.
<div :key="forceRender">
<vs-tabs :value="activeTab">
<template v-for="item in items">
<vs-tab :label="item.name" #click="onTabChange(item)">
<div class="con-tab-ejemplo">
<slot name="content"></slot>
</div>
</vs-tab>
</template>
</vs-tabs>
</div>
After that add a watcher on the items:
watch: {
items (val) {
this.forceRender += 1
}
},
It seems to be an issue with the vuesax library. The <vs-tabs> component doesn't support <vs-tab> components being added/removed as child components dynamically.
Here's an excerpt from the vsTab.vue file in the repo:
mounted(){
this.id = this.$parent.children.length
this.$parent.children.push({
label: this.vsLabel,
icon: this.vsIcon,
id: this.$parent.children.length,
listeners: this.$listeners,
attrs: this.$attrs
})
}
When the <vs-tab> component is mounted, it adds itself to the parent (<vs-tabs>) as a child, but it does not remove itself from this array when it is destroyed.
You can open an issue on their GitHub page to see if they could support what you want, or you can submit a pull request.
I am having problem to pass an array of objects to component in Vue.js 2.2.
Here is my component
<vue-grid :fields = "[
{name: 'Person Name', isSortable: true},
{name: 'Country', isSortable: true}]"
></vue-grid>
It doesn't work as it renders the curly braces in the browser.
I've tried without the quotation " in the object and without the colon : in front of fields property. None of these work either.
However, if I just pass a simple string that works. I don't know why object is not working.
I have found a similar question but answer was given for php. I need the solution just for JavaScript. I want to hard code the object array in the component.
You are passing it correctly. You must have something else happening behind the scenes. Ensure your template has a wrapping element. See this fiddle
<div id="vue-app">
<h2>
Vue App
</h2>
<vue-grid :fields = "[
{name: 'Person Name', isSortable: true},
{name: 'Country', isSortable: true}]"
></vue-grid>
</div>
<script id="vue-grid-template" type="text/x-template">
<div>
<h3>Grid</h3>
<div class="grid">
Fields are:
<ul>
<li v-for="field in fields">
{{field.name}} - {{field.isSortable}}
</li>
</ul>
</div>
</div>
</script>
<script>
Vue.component('vue-grid', {
props: ['fields'],
template: '#vue-grid-template'
});
new Vue({
el: '#vue-app'
});
</script>
I wasn't able to find any documentation on this one.
Can I somehow create multiple sets of templates in my template plugin (f.e first you choose a template, then you choose color scheme for the chosen template)?
Right now in /templates/templates/default.js I have something lile^
CKEDITOR.addTemplates("default",{imagesPath:CKEDITOR.getUrl(CKEDITOR.plugins.getPath("templates")+"templates/images/"),templates:[ /* list of my custom templates */ ]});
What does the first "default" mean?
It seems there's no documentation for the "addTemplates"-method for CKEditor 4, but there is for CKEditor 3. I'm not sure which version of CKEditor you're currently in?
Here's a snippet from the CKEditor 3 documentation:
// Register a template definition set named "default".
CKEDITOR.addTemplates( 'default',
{
// The name of the subfolder that contains the preview images of the templates.
imagesPath : CKEDITOR.getUrl( CKEDITOR.plugins.getPath( 'templates' ) + 'templates/images/' ),
// Template definitions.
templates :
[
{
title: 'My Template 1',
image: 'template1.gif',
description: 'Description of My Template 1.',
html:
'<h2>Template 1</h2>' +
'<p><img src="/logo.png" style="float:left" />Type your text here.</p>'
},
{
title: 'My Template 2',
html:
'<h3>Template 2</h3>' +
'<p>Type your text here.</p>'
}
]
});
Full documentation:
https://docs.cksource.com/CKEditor_3.x/Developers_Guide/Templates
I apologize in advance if my post is formatting incorrectly as I am a newbie with all this or if this is a duplicate post and I am just not sue the correct search terms.
With HTML / CSS / Javascript, I am trying to:
display a list of my work using a script in my scripts.js file, populated by an array in my work.js file (I have this part working)
then, when a visitor to my site clicks on one of those images, the content opens in a bootstrap modal with content dynamically loaded from my works.js file.
I am guessing I need to add some further js to the // WORK SECTION script, but not sure how to incorporate the .click + the 'desc' field in a Bootstrap modal.
Currently my work.js file is a separate one that I am referencing. Also, not sure how to link the images here in this post as the text does display over the images. I have the site up at http://www.the-is.com, where the images show with the content from the work.js array, but it's not yet clickable in to the modal.
Thanks!
// WORK SECTION (in script.js file)
$(document).ready(function() {
for (var i = 0; i < works.length; ++i) {
$("#work").append("\
<div class='col-xs-12 col-sm-4 col-md-3 col-lg-2 project work-img'>\
<div class='work-img'>\
<img class='img-responsive' src='" + works[i].pic + "'>\
<span class='info'><p class='project-label'>Project:</p> " + works[i].title + "</span>\
</div>\
</div>\
");
};
});
// PROJECT ARRAY (work.js)
var works = [{
title: "Software package implementation",
pic: "img/pencils.jpg",
desc: "I led over"
}, {
title: "ProProfs documentation",
pic: "img/planning.jpg",
desc: "This project was for"
}, {
title: "JIRA Agile Systems Setup",
pic: "img/alphabet.jpg",
desc: "To help enhance"
}, {
title: "Streamlining new site templates",
pic: "img/writing.jpg",
desc: "Our team decided"
}, {
title: "Excel decision list tool",
pic: "img/lightbulb.jpg",
desc: "Using"
}, {
title: "Analysis, testing and implementation of new storefront",
pic: "img/rubics.jpg",
desc: "The time"
},
]
I'm very new to the whole concept of a web application framework, and I started out with ember.js last night. I've followed their video tutorial on getting started and I have this problem.
Ember.js is attempting to make a GET request to access some very weird file. Here is my files and the error. The code works perfectly apart from ember making a request and getting a forbidden 403 error (due to apache blocking it for having incorrect characters)
<!-- An extract of my index.html -->
<script type="text/x-handlebars" id="shots">
{{#each}}
<h4>{{title}}</h4>
<h6>Shot ID: {{id}}</h6>
<hr />
<p>Published on the {{pubDate}} by {{author.name}}</p>
<img src="{{image}}" alt="{{description}}" />
<p>{{description}}</p>
{{/each}}
</script>
And then this is my JavaScript:
// core.js
Master = Ember.Application.create();
Master.Router.map(function() {
this.resource('home');
this.resource('shots');
});
Master.ShotsRoute = Ember.Route.extend({
model: function() {
return shots;
}
});
var shots = [{
id: '1',
title: "It Works!",
author: { name: "Luke Shiels", user: "0001"},
image: "assets/img/0001.png",
pubDate: new Date('26-11-2000'),
description: "A new shot, lol!"
}, {
id: '2',
title: "It also Works!",
author: { name: "Luke Shiels", user: "0001"},
image: "assets/img/0001.png",
pubDate: new Date('27-11-2000'),
description: "Another shot, lol!"
}];
I get the following 'errors':
http://i.imgur.com/fRLkaFQ.png (Sorry, don't have enough rep to post images)
Because of how Handlebars handles DOM updates you can't just add attributes inside of an HTML tag like you've done with the image.
<img src="{{image}}" alt="{{description}}" />
If you look at the generated HTML it will look something like:
<img src="<script id='metamorph-1-start'>someh</script>">
You need to look at the {{bindAttr}} helper instead.
<img {{bindAttr src="image" alt="description"}}/>