I'm trying to load a SVG file with YUI3. I've read the page about the IO Utility - YUI Library and followed the example given there. I wrote
<script src="http://yui.yahooapis.com/3.18.1/build/yui/yui-min.js"></script>
<script type="text/javascript">
YUI().use("io", function(Y) {
Y.io('test.svg', {
on: {
success: function(id, o) {
console.log('success: ' + o.status + " ==> " + o.responseText);
},
failure: function(id, o) {
console.log('failure: ' + o.status + " ==> " + o.statusText);
}
}
});
});
</script>
The real strange thing is, that on running the script I get a "failure: 0 ==>", thus o.status is 0, which is not a HTTP status code and there is no o.statusText, although the failure event is triggered.
Here you can download the two files in a zip file.
What I'am doing wrong?
Thanks for your help!
Are you viewing the html directly in the browser? In order for Ajax to function the file needs to be on a webserver. If you are using a mac, spin up a single line webserver in the directory you are in like this:
python -m SimpleHTTPServer
Once I had your code running under a webserver it loaded the SVG properly.
Related
I use the following command when building an ionic project for desktop
ionic cordova build browser --prod
Which results in the following file being generated
build/main.js
However I would like to be able to add a version number to the generated file automatically as part of the build process. So would end up with something like
build/main.js?version=1.00
as to avoid needing to clear the browser cache after every prod build.
Is there a flag for this, or is it something I must do manually?
Any advice would be great!
EDIT:
My solution is on GitHub for anyone interested!
https://github.com/RichardM99/ionic-3-version-build-file-hook
Here's some advice - You can create a cordova hook.
Hooks are scripts that you want to be executed at different stages of the build process. In your case, you are looking at a script which renames the main.js file after the build event is finished, or in other words a 'after_build' type hook.
The script will usually be a Node.js file, although you can have other types of scripts executed as well.
One more thing. Since you want to get around cache, you wont be renaming the file itself. What you will want to do is rather replace the reference to "main.js" in you "index.html" to include a random or maybe your actual version number.
I have pointed you in a direction, but won't spoonfeed. Look up documentation on cordova hooks. They are super simple if you understand Javascript/Node
Something like this should get the job done:
var index_orig = fs.readFileSync(path-to-index.html, 'utf8');
var index_new = index_orig.replace("main.js", "main.js?version="+version_num);
fs.writeFileSync(path-to-index.html, index_new, 'utf8');
If you want the actual build number, you can read your config.xml and parse it to get it's value.
Hope it helps.
I wrote blog long time ago
In my build pipeline i have command to set version
version "$(app.versionPrefix)$(Build.BuildNumber)"
$(app.versionPrefix) - is a prefix version such as 0.1.
$(Build.BuildNumber) - is build version
Then I have environment file
export const environment = {
apiUrl: 'https://....',
production: true,
version: '0.0.57'
}
Then i have js script to update version in environment and config.xml
var replace = require('replace-in-file');
var package = require("./package.json");
var buildVersion = package.version;
const options = {
files: ['config.xml'],
from: /" version="([0-9]*.[0-9]*.[0-9]*)"/g,
to: "\" version=\""+ buildVersion + "\"",
allowEmptyPaths: false,
};
const optionsEnv = {
files: ['src/environments/environment.prod.ts'],
from: /version: '(.*)'/g,
to: "version: '"+ buildVersion + "' ",
allowEmptyPaths: false,
};
try {
let changedFiles = replace.sync(options);
if (changedFiles == 0) {
throw "Please make sure that file '" + options.files + "' has \"version: ''\"";
}
changedFiles = replace.sync(optionsEnv);
if (changedFiles == 0) {
throw "Please make sure that file '" + optionsEnv.files + "' has \"version: ''\"";
}
console.log('Build version set: "' + options.to + '"');
}
catch (error) {
console.error('Error occurred:', error);
throw error
}
NOTE: you need to install plugin replace-in-file
Then in build pipe line I am running this script
node ./replace.build.js
In your case if you need only for browser you can tune script.
I have a jQuery function that gets data from JSON file but I just can't get it to work. I am developing in Brackets editor and when I open site in their live preview everything works great. But when I open html file locally, $.getJSON.error is executed instead of normal $.getJSON
function loadJson(e)
{
$('.images').fadeOut(300);
var jsonURL = "../../../images.json";
var txt = $(e.target).text();
setTimeout(function ()
{
$('.images').empty();
$.getJSON(jsonURL, function(json)
{
var imgList = "";
$.each(json[txt], function ()
{
imgList += '<div class="image_container reference">
<a href="' + this.imgPath + '">
<img src="' + this.imgPath + '"/>
<div class="overlay">
<span>' + this.name + '</span>
</div>
</a>
</div>';
});
$('.images').append(imgList);
}).error(function(json) { alert("error"); });
}, 300);
$('.images').fadeIn(300);
}
Function gets clicked item label, matches that with array name in the JSON file and then respectively appends those images to a container. It is working as supposed when I run it in Brackets live preview so I really don't know what is going on?
But when I open html file locally, $.getJSON.error is executed
Browsers take security very seriously. When working locally, Chrome will block any Ajax request to a local file. Firefox will only allow you to do so if the requested file is in the same folder (or deeper) than you HTML page.
In short, either place the JSON file in the same folder and use Firefox, or install a local server.
WAMP Server (Windows) is what I use. You will be working locally, but you will be accessing your pages via the http:// protocol (localhost) instead of the file:// protocol. That should fix it! Mac users can install MAMP.
In a .Net Web Forms project am trying to use JavaScript to display all images in a folder. Using the following script gives me a 403 error
<script>
var dir = "fullimages/";
var filext = ".jpg";
$.ajax({
url: dir,
success: function (data) {
$(data).find("a:contains(" + filext + ")").each(function () {
var filename = this.href.replace(window.location.host, "").replace("http:///", "");
$("body").append($("<img src=" + dir + filename + "></img>"));
});
}
});
</script>
But I am not quite sure why? I have checked around the site and found the following suggestion 403 forbidden error while getting javascripts under root folder. In my case JS is not on the list of handlers.
If I have got this right your trying to run Javascript on the server side. Are you using any particular framework, node JS for example?
Secondly what server architecture are you running, windows (IIS) / linux (APACHE, N GINX) etc...?
From having a brief read of your linked question, have you tried moving this script into the fullimages directory and then request that?
This code is executed when I run it inside a .jsp page enclosed by <script> tags. Nevertheless, when I use it in a .js file imported to the same .jsp, the script doesn't work, being ignored by browser as it would not exist.
$('#dgProjects').datagrid({
onSelect: function(index, row){
alert(index + ' - ' + row)
}
});
In spite of this behavior, I can run other scripts in this .js file, like
function alerting(message){
alert('A new message was received: ' + message);
}
Any idea on what I'm forgetting/doing wrong? Thanks.
After some tries, I achieved a solution, in spite of not knowing perfectly what are the reasons for the fact that I was able to run scripts in .js file called from .jsp page and not to reference $('#Element') in the same way:
<script>
$.getScript('${pageContext.request.contextPath}/resources/js/site/home.js', function() {});
</script>
After that, code ran unincidentally.
I am using fileupload phonegap plugin to upload jpeg file to my server from iPad.
It is not working for me.
Here is my code:
window.plugins.fileUploader.uploadByUri('http://192.168.1.54:8080/POC/fileUploader', 'file://Documents/flower.jpg', null, 'myPhoto', 'flower.jpg', 'image/jpeg',
function(result) {
console.log('Done: ' + result);
},
function(result) {
console.log("Error: " + result);
}
);
In fileUploader.js file, I put an alert below the uploadbyuri method. But its not displaying. That means that method is not calling.
What mistake I have done?
Please help me.
Please check this plugins its works for me.
https://github.com/phonegap/phonegap-plugins/tree/master/iPhone/FileUploader
and if its not working please specify proper error that you are getting for upload image.
Me too had the same situation. FileUploader worked fine in cordova1.9.0. When i changed to cordova2.7.0 face the same situation. After a long time messing with the issue, I made it work by remnaming "Phonegap" to "cordova" in fileuploader.js file which is in www folder.
PhoneGap.addConstructor(function() {....
to
cordova.addConstructor(function() {....
and
return PhoneGap.exec('FileUploader.' + method, callback + '.success', callback + '.fail', callback + '.progress', server, file, fileKey, fileName, mimeType, params);
to
return cordova.exec(null,null,"FileUploader", "uploadByUri",[ callback + '.success', callback + '.fail', callback + '.progress', server, file, fileKey, fileName, mimeType, params]);