Angularjs summernote: $scope.editor.insertImage is not a function - javascript

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

jqPlot : $.jqPlot is not a function error

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

Angular still trying to look for templates even though I've $templateCached them

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

How to get JSON value from list on JQuery?

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>

How to use a javascript file in options.html

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.

Uncaught Error: NOT_FOUND_ERR: DOM Exception 8

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.

Categories

Resources