Accessing content folder from js file - javascript

I'm trying to access image which is located in ~\Content\img folder. I'm trying to do that from JavaScript file which is located in ~\Scripts folder. This an MVC application.
U have tried absUrl + "\Content\img" + fileName. But it gives me Controller\Content\img\fileName.jpg

Forward slashes...
\Content\img\fileName.jpg
Should be
/Content/img/fileName.jpg

Please use the #Url.Content helper:
#Url.Content("~/img/fileName.png")
In case you use a separate javascript file you can put a <script> block in the beginning of the view page:
<script>
var ROOT = '#Url.Content("~/")';
</script>
And then refer to the ROOT variable in javascript:
var imagePath = ROOT + '/img/fileName.png';

Related

How to change a href link with gulp

I'm creating a task with gulp that need to change the parameters of a href.
For example:
On my html file I have a link:
Click here
So, "myfolder" is variable and refers to the name of the folder where the index.html is.
When I push the file onto the server, the page do not display as is not targeting the index.html file, but just the name of the folder.
I used gulp-replace for the task in the following way:
var gulp = require('gulp');
var replace = require('gulp-replace');
gulp.task('templates', function(){
gulp.src(['index.html'])
.pipe(replace('<a href="*/" >', '<a href="*/index.html >"'))
.pipe(gulp.dest('build/'));
});
As the folder name (myfolder) is variable because every time I'm working on the project I have to create a new folder and at the end the index.html file cannot contain just a specific name.
So, this method didn't work.
Any help will be appreciated.
Kind regards,
Fernando
You need to define a regex in your replace call and match the part inside href:
replace(/<a href="(.*)"/g, '<a href="$1/index.html"')

how to get the absolute path of an excuting js in the js?

for instance, the page of HTML contains the js, and the js's src is /js/test.js, and in this js file, can I get the string of /js/test.js while the js is excuted?
__dirname and process.cwd() can both do it in Node.js, but not work in js of broswer
can anyone help me?
HTML
<script src="/some/path.js" id="script1"></script>
<script src="/some/path2.js" id="script2"></script>
JS
// /some/path.js
var path = document.querySelector('#script1').getAttribute('src');
// /some/path2.js
var path = document.querySelector('#script2').getAttribute('src');
In a browser, a script is loaded through HTTP request. The URI (the bits after the host name) does not necessarily correspond to the file name.
If you just want the src attribute, then you can refer to this answer, which recommends using document.currentScript to obtain the script element.
const path = document.currentScript.getAttribute('src');

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####

How would I find a html files parent directory name?

I need to know a html files parent directory so I can access a file in it named the same as the directory. I just need the directory name as a string.
You can try something like
window.location.pathname
But again depends on what you are trying to achieve, show some code.
Background
As #NewUser says, use window.location.pathname if you want only the path. Example: on this page, that gives:
/questions/25717173/how-would-i-find-a-html-files-parent-directory-name
You indicated that you are dealing with an HTML file, though, which implies a file name and file ending (.htm, .html, etc.). So, to get the full URL, minus the file name, you can try using .replace(/[^\/]+$/, ''), like this:
var url = 'http://www.example.com/foo/bar/baz.htm';
alert(url.replace(/[^\/]+$/, ''));
// gives http://www.example.com/foo/bar/
Putting It All Together
To do it without hard-coding the URL:
var path = window.location.toString().replace(/[^\/]+$/, '');
alert(path);

How to user Viewer js in Laravel

Hello I'm trying to display PDF documents with ViewerJS plugin but it doesn't work properly. As documentation says I have <iframe id="viewer" src = "{{URL::to('/')}}/ViewerJS/#../uploads/files/{{$video->source}}" width='100%' height='600' allowfullscreen webkitallowfullscreen></iframe>
I have ViewerJS folder in public folder and my pdf files in public/uploads/files folder. When I use this url it shows my page in frame instead of document. Where is a mistake?
Although this is old question, I would like to share how I got that working:
Step 1: Download ViewerJs - http://viewerjs.org/releases/ViewerJS-latest.zip
Step 2: Extract this in public directory of Laravel (I used it with Laravel 4.0)
Step 3: Now, extract another copy in Views folder. That means, you will have ViewerJs library at two locations. One inside public (public/ViewerJs) folder and another will be at (views/ViewerJs)
Step 4: Add below code in your app/routes.php
//DocumentViewer Library
Route::any('ViewerJS/{all?}', function(){
return View::make('ViewerJS.index');
});
Step 5: Now, add any sample PDF file in your public folder (for testing purpose)
Step 6: Open below URL in your browser
http://example.com/ViewerJS/index.html#../demodoc.pdf
Please replace example.com (in my case this was localhost/webapp) by your project path and replace demodoc.pdf by name of sample PDF file that you added in public folder.
That's it. This will work fine.
You should do as follows:
copy the content of ViewerJS folder e.g in your public/viewerjs
edit PluginLoader.js, ODFViewerPlugin.js, PDFViewerPlugin.js and search for the string ./ and change it to the relative path of the directory, in my example viewer/
Ex.: in PluginLoader.js, you will find:
loadPlugin('./ODFViewerPlugin', function () {
Plugin = ODFViewerPlugin;
});
replace this to:
loadPlugin('viewerjs/ODFViewerPlugin', function () {
Plugin = ODFViewerPlugin;
});
create a GET route like: Route::get('/ViewerJS/{all?}', array('as' => 'pdfViewer', 'uses' => 'YOURCONTROLLER#pdfViewer'));
create the method in you controller like:
public function pdfViewer()
{
return View::make('pdfview.view');
}
Create your the view and paste the entire content of the index.html, it's inside the ViewerJS folder. Don't forget to replace all css and javascript file references with:
{{ asset('viewerjs/viewer.css') }}
{{ asset('viewerjs/viewer.js') }}
{{ asset('viewerjs/PluginLoader.js') }}
Call the route like: http://www.xxxxx.com/ViewerJS#YOUR_PATH_TO_THE_PDF_FILE_UNDER_THE_PUBLIC_FOLDER
example: uploads/pdfs/test.pdf
Note that you don't have to specify public/uploads/pdfs/test.pdf !!
You have to add the PDF's name to the path, as well. For example:
http://www.xxxxx.com/ViewerJS#YOUR_PATH_TO_THE_PDF_FILE_UNDER_THE_PUBLIC_FOLDER/NAME_FILEP

Categories