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.
Related
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
I am trying to implement JQuery's autocomplete function into an input field on a website. The inspector is giving me an error that says:
"Uncaught TypeError: $(...).autocomplete is not a function".
I believe the problem might have to do with the order of my script tags but so far everything I have tried has not worked. Here is my content:
<head>
<title></title>
<link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="Stylesheet">
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
</head>
<body>
<script type="text/javascript">
var schools = new Array();
$(document).ready(function () {
$("#school").autocomplete ({
minLength: 2,
source: schools,
select: function (e, ui) {
e.target.value = ui.item.label;
$("#schoolValue").val(ui.item.value);
e.preventDefault();
}
});
</script>
</body>
You haven't define any element with school id. Check below working code to compare with your own.
var schools = ['abc', 'xyz'];
$(document).ready(function() {
$("#school").autocomplete({
minLength: 2,
source: schools,
select: function(e, ui) {
e.target.value = ui.item.label;
$("#schoolValue").val(ui.item.value);
e.preventDefault();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<title></title>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>
<label for="school">Tags:</label>
<input id="school">
</body>
In the code above doesn't look like you are closing the ready function correctly.
<head>
<title></title>
<link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="Stylesheet">
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
</head>
<body>
<script type="text/javascript">
var schools = new Array();
$(document).ready(function () {
$("#school").autocomplete ({
minLength: 2,
source: schools,
select: function (e, ui) {
e.target.value = ui.item.label;
$("#schoolValue").val(ui.item.value);
e.preventDefault();
}
});
});
</script>
</body>
The code seems to work but you need to initialize your array of schools. See running example below.
Also remember, you need to type at least two letters for the drop down to appear.
var schools = ['aaaaa', 'bbbbb', 'cccccc', 'ddddd'];
$(document).ready(function() {
$("#school").autocomplete({
minLength: 2,
source: schools,
select: function(e, ui) {
e.target.value = ui.item.label;
$("#schoolValue").val(ui.item.value);
e.preventDefault();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="Stylesheet">
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
Search school
<input id="school" type="text">
<br/><br/>School selected
<input type="text" id="schoolValue" />
Looks like it could be a race condition, meaning that the jquery script hasn't finished loading by the time you start trying to use it. You have document ready, which is good, but that only checks that the DOM is ready, not that asynchronously loaded scripts are done loading.
There are some answers to this here and elsewhere : How to make script execution wait until jquery is loaded
But in short, you can defer your method execution until window.jQuery returns true, try $( window ).load or you can use something like require.js to do it for you. You should also touch up your script tags:
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
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 a problem when i made lot of jquery fonctions on the same file it did not work.
I try to use de jQuery.noConflict() fonction but it didn't work(maybe i didn't use it in a good way or i use it in a wrong place) how can i use noconflict fonction in my example code?
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.ui.core.min.js"></script>
<script type="text/javascript" src="jquery.ui.widget.min.js"></script>
<script type="text/javascript" src="jquery.ui.mouse.min.js"></script>
<script type="text/javascript" src="jquery.ui.tabs.min.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.dataTables.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
var jQueryTabs1Opts =
{
event: 'click',
collapsible: false
};
$("#jQueryTabs1").tabs(jQueryTabs1Opts);
});
</script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#example').dataTable( {
"aaSorting": [[ 4, "desc" ]]
} );
} );
</script>
I find the solution .The solution is to use noConflict function like that :
<script>
var jq172 = jQuery.noConflict();
jq172(document).ready(function()
{
var jQueryTabs1Opts =
{
event: 'click',
collapsible: false
};
jq172("#jQueryTabs1").tabs(jQueryTabs1Opts);
});
</script>
Your code should work if you remove the duplicate import.
Remove this line :
<script type="text/javascript" src="jquery.js"></script>
Pay attention to the version of jQuery needed by the UI libraries you import.
I'm trying to use Knockout js in a simple web application.
Here's my dummy javascript code:
function MainViewModel() {
this.myText = ko.observable('Hello world');
}
var MainViewModelInstance = new MainViewModel();
ko.applyBindings(MainViewModelInstance);
But when I run the index.html, the debug console says "ko.applyBindings is not a function"!
Help!
Thanks
You have not included the link to the knockout.js library in your source code or the link is wrong. Fix this and it will work.
<script src="/scripts/knockout-2.0.0.js" type="text/javascript"></script>
Where the /scripts directory is the location on the server where knockoutjs resides.
EDIT
Here is an example of your code that works.
<html>
<head>
<script src="knockout-2.0.0.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
function MainViewModel() {
this.myText = ko.observable('Hello world');
}
var MainViewModelInstance = new MainViewModel();
ko.applyBindings(MainViewModelInstance);
</script>
</body>
</html>