I want to upload an image to the server and place it as an image inside my text.
Editor:
<summernote ng-model="answer.value" id="answerValue" config="options" on-image-upload="imageUpload(files)" editable="editable" editor="editor"></summernote>
JS Code:
$scope.options = {
height: 400
};
$scope.imageUpload = function(files) {
answer.uploadImage(files[0]).then(function(result) {
console.log('image upload\'s editor:', $scope.editor);
console.log('image upload\'s editable:', $scope.editable);
$scope.editor.insertImage($scope.editable, result.data.url);
}, function(result) {
});
};
Libraries:
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/summernote/dist/summernote.min.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-summernote/dist/angular-summernote.min.js"></script>
$scope.editor and $scope.editable are defined, but it says:
$scope.editor.insertImage is not a function
Does anyone know what I am doing wrong?
Change the code
$scope.editor.insertImage($scope.editable, result.data.url);
to
$scope.editor.summernote('insertImage', result.data.url, 'filename');
it works in summernote 0.7.0 with angular-summernote
Related
I need to create charts on a website.
In my HTML code i have created a div with an ID.
This is my HTML code :
<script src="/js/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="/styles/jquery.jqplot.min.css" />
<script language="javascript" type="text/javascript" src="/js/jquery.jqplot.js"></script>
<script language="javascript" type="text/javascript" src="/js/graph.js"></script>
<body>
<div id="graph" style="height:400px;width:300px;></div> //i want to have my chart here
</body>
In the js code i have only wrote an exemple from the official website of jqPlot :
$(document).ready(function() {
var chart_data = [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]];
var chart_opt = {
title:'Graph',
axes:{yaxis:{min:-10, max:240}},
series:[{color:'#5FAB78'}]
};
$.jqplot('graph', chart_data, chart_opt);
});
So my problem is that i have an error on the browser's console : $.jqplot is not a function
Any idea ?
You are getting this error because you have the jqplot inside the $(document).ready(function(). Try something like this.
$(document).ready(function(){
GetChart();
});
function GetChart(){
var chart_data = [[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]];
$('#graph').jqplot([chart_data], {
title:'Default Bar Chart',
seriesDefaults:{
renderer:$.jqplot.BarRenderer
},
axes:{
xaxis:{
renderer: $.jqplot.CategoryAxisRenderer
}
}
});
}
Here is a working example - https://jsfiddle.net/xrnfqax3/
For this example to work, you will need to add the following references to your project-
jquery.min.js
jquery.jqplot.js
jquery.jqplot.css
jqplot.barRenderer.js
jqplot.barRenderer.min.js
jqplot.categoryAxisRenderer.js
jqplot.categoryAxisRenderer.min.js
Make sure that jquery-*.js order is before jqPlot.js.
and use language="javascript" type="text/javascript" on all scripts tag.
Best Regards
I'm trying to merge gulp, angular ngbp, and ionic. So far I've restructured the sample app code to the ngbp style and I've compiled the templates into a js file so that they could be loaded into the $templateCache and then my app js files could just fetch templates from the cache.
In my index.html
<!-- inject:js -->
<script src="/vendor/angular/angular.min.js"></script>
<script src="/vendor/angular-animate/angular-animate.min.js"></script>
<script src="/vendor/angular-sanitize/angular-sanitize.min.js"></script>
<script src="/vendor/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="/vendor/ionic/js/ionic.min.js"></script>
<script src="/vendor/ionic/js/ionic-angular.min.js"></script>
<script src="/vendor/ionic/js/ionic.bundle.js"></script>
<script src="/src/app/app.js"></script>
<script src="/src/app/browse/browse.js"></script>
<script src="/src/app/browse/routes.js"></script>
<script src="/src/app/playlist/controllers.js"></script>
<script src="/src/app/playlist/playlist.js"></script>
<script src="/src/app/playlist/routes.js"></script>
<script src="/src/app/playlists/controllers.js"></script>
<script src="/src/app/playlists/playlists.js"></script>
<script src="/src/app/playlists/routes.js"></script>
<script src="/src/app/search/routes.js"></script>
<script src="/src/app/search/search.js"></script>
<script src="/templates-app.js"></script>
<!-- endinject -->
In my templates-app.js
(function(module) {
try { module = angular.module("templates-app"); }
catch(err) { module = angular.module("templates-app", []); }
module.run(["$templateCache", function($templateCache) {
$templateCache.put("browse/templates/browse.tpl.html",
"<ion-view view-title=\"Browse\">\n" +
" <ion-content>\n" +
" <h1>Browse</h1>\n" +
" </ion-content>\n" +
"</ion-view>\n" +
"");
}]);
})();
(function(module) {
try { module = angular.module("templates-app"); }
catch(err) { module = angular.module("templates-app", []); }
module.run(["$templateCache", function($templateCache) {
$templateCache.put("login/templates/login.tpl.html",
//..........
Sample route (browse/routes.js), templates are in src/app/browse/templates/ (templates not included in build, thus, requiring templates-app.js to cache templates)
function BrowseConfig($stateProvider){
$stateProvider
.state('app.browse', {
url: "/browse",
views: {
'menuContent': {
templateUrl: "browse/templates/browse.tpl.html"
}
}
})
;
}
angular.module('browse.routes', ['ui.router'])
.config(['$stateProvider', BrowseConfig])
;
This normally works fine with the generic ngbp project, but for some reason, when I load up localhost:8080 for my project, the angular app still tries to GET the template files (404). Why is my app not using the cache?
you have to include "templates-app" as a dependency in your "browse.routes" module otherwise he won't know the templates exist
This is my example:
data.json=
{
'list':[{
'name':'first',
'rating':'50%',
'story':'Once upon a time'
},
{
'name':'second',
'rating':'65%',
'story':'New chapter'
}]
}
HTML code:
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.getJSON('data.json', function(data){
var new_data=JSON.parse(data)
alert(new_data.list[1].name)
alert(new_data.list[1].rating)
alert(new_data.list[1].story)
});
});
</script>
Why this code doesn't work? I want to get: second, 65%, New chapter. Maybe you know how to solve this problem on native JS, without using JQuery? It would be great/
You should just remove the 'JSON.parse' statement. 'getJSON' already parses the data.
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.getJSON('data.json', function(data){
alert(data.list[1].name);
alert(data.list[1].rating);
alert(data.list[1].story);
});
});
</script>
I have trouble adding a personal javascript file in my option.html for my google-chrome extension.
I've added this line to my options.html:
<script type="text/javasctipt" src="/js/content/toto.js"></script>
And the object $.toto, described in this file is unreachable.
I would like to know if it's possible to add a personal js file and how or if you have to do everything in the options.js ?
Thank in advance for your answers.
Here is a part of the code as the project is already large:
options.html:
<!DOCTYPE html>
<html lang="fr">
<body>
<script type="text/javascript" src="/js/lib/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="/js/lib/sprintf-0.6.js"></script>
<script type="text/javascript" src="/js/lib/bootstrap/bootstrap-modal.js"></script>
<script type="text/javascript" src="/js/shared/constant.js"></script>
<script type="text/javascript" src="/js/shared/storage.js"></script>
<script type="text/javasctipt" src="/js/content/toto.js"></script>
<script type="text/javascript" src="/js/content/messages.js"></script>
<script type="text/javascript" src="/js/content/debug.js"></script>
<script type="text/javascript" src="/js/content/form.js"></script>
<script type="text/javascript" src="/js/content/base.js"></script>
<script type="text/javascript" src="/js/content/options.js"></script>
</body>
</html>
options.js:
$.options = $.extend({}, $.base, {
ready: function() {
// onMessage
chrome.extension.onMessage.addListener(this.onMessage);
// init events
$("#logout_btn").live("click",function() {
$.options.logout();
});
// init ui
$.toto.initialize();
this.displayCorrectContext();
this.initMailPrescrip();
}
});
toto.js:
$.toto = $.extend({}, $.base, {
TAG: "MESSAGES",
ready: function() {
$("[title-message]").each(function() {
var txt = chrome.i18n.getMessage($(this).attr("title-message"));
$(this).attr('title', txt);
});
$("[data-message]").each(function() {
var txt = chrome.i18n.getMessage($(this).attr("data-message"));
$(this).html(txt);
});
},
log: function(message) {
$.base.log($.messages.TAG,message);
}
});
Use .ready event like this.
jQuery(document).ready(function(){
// jquery function code
});
In the manifest.json, try adding it in the "scripts" line, like so:
"app": {
"background": {
"scripts": ["exampleReference1.js", "exampleReference2.js", "toto.js"],
"transient": true
}
},
Hope it works.
I was working on Knockoutjs in ASP.NET MVC. I m getting this error "Uncaught Error: NOT_FOUND_ERR: DOM Exception 8 "...any idea?? thnx.
In my _Layout.cshtml file these are my scripts..
<script src="../../Scripts/modernizr-2.5.3.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.8.20.min.js" type="text/javascript"></script>
<script src="../../Scripts/knockout-2.1.0.debug.js" type="text/javascript"></script>
<script src="../../Scripts/ajax-util.js" type="text/javascript"></script>
<script src="../../Scripts/bp-index.js" type="text/javascript"></script>
<script src="../../Scripts/ko-execute-on-enter.js" type="text/javascript"></script>
<script src="../../Scripts/ko-protected-observable.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>
this is my template....
<ul data-bind="foreach: tags">
<li class="tagItem" data-bind="click: $parent.selectTag">
<div>
<span data-bind="text: Name"></span>
Edit
Delete
</div>
</li>
</ul>
and this is my js file(with knockout)
$(function () {
var data = [
// data
];
var viewModel = {
tags: ko.observableArray(data),
tagToAdd: ko.observable(""),
selectedTag: ko.observable(null),
addTag: function () {
this.tags.push({ Name: this.tagToAdd() });
//var newTag = { Name: viewModel.tagToAdd() };
this.tagToAdd("");
},
selectTag: function () {
console.log("inside selectTag");
viewModel.selectedTag
}
};
$(document).on("click", ".tag-delete", function () {
var itemToRemove = ko.dataFor(this);
viewModel.tags.remove(itemToRemove);
});
ko.applyBindings(viewModel);
});
This bit of your code could weel be the source of the error:
selectTag: function () {
console.log("inside selectTag");
viewModel.selectedTag
}
I think you need something more along the lines of:
selectTag: function (tag) {
console.log("inside selectTag");
viewModel.selectedTag(tag);
}
If it is not this, then basically the error is because some of your JS or HTML is invalid. I would try commenting out lin by line until you find the source of the error.