jQuery - Image path replace folder error - javascript

I have client specific images in many .html pages and I want to redirect the images path to other folder from default folder.
I am trying to achieve the same by following code from external
javascript file which is working as expected. But getting an error and HTML source still showing as old file path
I am getting an error as below though Images are loading
GET file:///E:/User/Images/test.png net::ERR_FILE_NOT_FOUND
PS: I am doing this scr
$(document).ready(function () {
$(function () {
var img = $("img");
img.each(function () {
var src = $(this).attr('src');
if (src.indexOf('Images/') > -1) { // Default path of the images
$(this).attr('src', src.replace("Images", "Images/client")); // New path
}
});
});
});
And also, if I check source code, still it is showing as Images/test.png instead of Images/client/test.png

It should be ,
$(this).attr('src', src.replace("Images", "Images/client"));

First, you have to use a web server instead of what you are doing,
GET file:///E:/User/Images/test.png net::ERR_FILE_NOT_FOUND
means you are open the file locally.
However, your code is correct and doesn't have any error, you are trying to replace the word (client) with (Images/client) and because your src doesn't contain any word (client), the replace is not taking a place, your correct code should be something like:
$(this).attr('src', src.replace("Images", "Images/client"));
This will work for sure, test and let us know if it worked.
Thanks.

Related

How to make a custom url for a file in electron

I am trying to build a mini browser using Electron.js. Is it possible to make urls like chrome://settings or about:config, so that when the user goes to that link I can show an html file? I basically want to associate a url with a file in electron.
You could use Data URIs, and base64-encode the contents of your data as a link. You can use Javascript to encode and decode binary data, then you just specify the MIME type at the start.
If you go to the following URL in a browser for example you'll see a png decoded and rendered:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==
The MDN Web doc in the first link mentions the process of base64 encoding an HTML file.
Alternatively, if you just want to force the download of a link you could add the download attribute to your anchor.
You can use did-start-navigation to detect when they go to chrome://settings/ then intercept that and tell it to go to https://stackoverflow.com/ instead.
Here's the code:
mainWin.webContents.on('did-start-navigation', function (evt, navigateUrl) {
if (navigateUrl == 'chrome://settings/') {
evt.preventDefault();
setTimeout(function () { // Without this it just crashes, no idea why.
mainWin.loadURL('https://stackoverflow.com/');
}, 0);
}
});
I tried the `will-navigate` event, but it didn't work.
Docs for: did-start-navigation
After a little searching at npm, I found a package that does exactly what I want, it's electron protocols. It's a simple way to add custom protolcs in Electron, Here's an example"
const protocols = require('electron-protocols');
const path = require('path');
protocols.register('browser', uri => {
let base = app.getAppPath();
if(uri.hostname == "newtab"){
return path.join(base,"newtab.html")
}
});
In this example, if you go to the link browser://newtab, it opens newtab.html. And if you type location.href the DevTools it shows browser://newtab there too

How do I fix the three.js "url.lastIndexOf is not a function" error?

I'm currently working on loading a gLTF in Three.js r105. After loading the file I tried to change the url after loading it to see if I could some how change it after loading it. This is were my problem started.
First I just tried changing the url inside the "onLoad". Then I tried changing it in my gltf.scene.traverse. That didn't work either so
then I to turn the input a function as the url parameter.
var loader = new THREE.GLTFLoader().load( function () {
window.setTimeout(`this = 'gmtk.glb', alert('It changed');`, 5000);
**return "sword_1.glb";**
},
I expected my gLTF to atleast appear but my entire scene was just black. In the console I had 1 error that said:
three.js:38135 Uncaught TypeError: url.lastIndexOf is not a function
at Object.extractUrlBase (three.js:38135)
at GLTFLoader.load (GLTFLoader.js:40)
at Kube.js:31
You are trying to add the HTTP URL to the GLTF loader and this is not allowed;
Try to convert to BLOB
in the new BLOB(Response.data) You can replace the response.data with the old URL
const url = window.URL.createObjectURL(new Blob([response.data]));
this.loaders.gltfLoader.load(url , (file)=>{
});
Here the loader will load perfectly without errors

Use javascript variable as file name to download file with href

I have a javascript code that extracts filename as a variable from the current html file. The filename, for example, is "new.html" filename variable is successfully used to append href where I need to open same file strored in another folder. Using the same code, I need to append this variable to a folder path with href tag to download a file with href tag. The file name is extracted from .html (example new) and added to .xls file (example new.xls)
var filename=location.pathname.substring(location.pathname.lastIndexOf("/") + 1);
console.log(filename);
document.getElementById("htag1").href= "Foldername/"+filename;
var object=filename.slice(0,-5);
var xls=".xls";
var xlsfile=object+xls;
$(".xlsfile").text(xlsfile);
console.log(xlsfile);
document.getElementById("d1tag1").href= "Foldername/"+xlsfile;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
#working
#not working
####working download code####
But this is giving me download error with no file getting downloaded
but it is pointing to the right path. Should I use another way for download feature? Before this I had entered the file path statically which seemed to work.
Any help would be appreciated! Thank you!
Try this way, i'm sure now it will work ^^
var filename=location.pathname.substring(location.pathname.lastIndexOf("/") + 1);
console.log(filename);
document.getElementById("htag1").href= "Foldername/"+filename;
var object=filename.split(".")[0];
var xls=".xls";
var xlsfile=object+xls;
$(".xlsfile").text(xlsfile);
console.log(xlsfile);
document.getElementById("d1tag1").href= "Foldername/"+xlsfile;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
#working
#not working
####working download code####

Change img src with javascript

Hey guys I need some help
Im trying to change the src of an image tag but when change it using my code it adds the word file to the start of my string.
The final result is file:///C:/xampp/....
instead of just C:/xampp/....
Here is my code
for(var i = 0; i < images.length; i++) {
alert(images[i].src);
srcList.push(images[i].src);
var index = srcList[i].search("JavaBridge");
tempPath.push(srcList[i].slice(index-1, srcList[i].length));
finalPath.push("C:/xampp/tomcat/webapps"+tempPath[i]);
document.getElementById(images[i].id).src = " "+finalPath[i];
alert(images[i].src);
}
Thanks in Advance
For file manager the physical path is C:/xampp/.... but browser cannot use that directly. So, this is a default action and you cannot override it. Try to open a file with browser and see the url .. you will find file:/// appended before the path.
When you change this path to url.. the file:/// will not come.
One quick workaround is to use a server and load files using server.. You can easily setup server using apache (Xampp, Wamp) or Node (Gulp Task)

jquery load html file containing javascript code

When I tried to load an HTML file containing javascript code, the page doesn't display correctly.
Is there a way to load correctly this page?
PS: I used FireFox to test
<div class="mydiv"></div>
var path = myHTMLWithJavaScript.html;
$.get(path, function(data) {
$(".mydiv").load(path);
})
Either use $.get or $(".mydiv").load(path); not both
Also,
var path = myHTMLWithJavaScript.html;
should be (notice double quotes)
var path = "myHTMLWithJavaScript.html";
and make sure that this file is present in the same directory as your page
Since you are tyring to load JavaScript File / Code it is better to use $.getScript. More information can be found here http://api.jquery.com/jQuery.getScript/

Categories