How can I add a bunch js files but include only one of them for client code? E.g. I need to use hammer.js and want add it as submodule. I can not simply add it in client/code/app cuz SS will try to load all contents of repo (including README.md).
You can modify the code portion of your ss.client.define so that Socketstream will only load the files you specify (rather than every single file that resides in the client/code/app folder - which is the default behaviour).
E.g change this:
ss.client.define('main', {
view: 'app.jade',
css: ['libs', 'app.styl'],
code: ['app'], // This is loading every file within the client/code/app/ folder
tmpl: '*'
});
to this:
ss.client.define('main', {
view: 'app.jade',
css: ['libs', 'app.styl'],
code: ['app/file1.js', 'app/file2.js', 'app/file4.js'], // SS will only load these files.
tmpl: '*'
});
Related
I've set up a very small browser project using create-js-app. I try to load a file called test.txt located in my src directory.
Following is the content of my main.js:
import * as THREE from 'three';
const loader = new THREE.FileLoader();
loader.load(
"test.txt",
function (data) {
console.log(data);
},
function (xhr) {
console.log(
"Loading file : " +
(xhr.loaded / xhr.total) * 100 +
"% loaded"
);
},
function (err) {
console.error(err);
}
);
When running my site in Chrome, I get the content of my index.html file instead of test.txt. I spent some time trying to understand this with no success.
I get this result no matter which file path I specify as first argument of loader.load(), I can even specify a file that is not existing.
Has anybody already faced this issue?
Thanks a lot.
Edit: I'm using Parcel as the bundler.
This issue comes down to internal details of create-js-app, and different web applications may host static resources (i.e. images and other assets that are not compiled source code) in different ways. But generally speaking, the src/ directory is not hosted/deployed/served on the website. If your application has the structure shown here then you probably want to put the .txt file into the public/ directory instead.
Requesting any file that cannot be found at the given URL might be giving you the index page instead, depending on how your site is set up by create-js-app.
I'm updating the answer above: I'm using Parcel. I fixed my project by adding this line:
url = require('test.txt')
The require function makes the browser import the txt file, and it returns the hashed url of the stored file. All I had to do next was to call
loader.load(url, ... )
im building a backoffice which has already this function working on single parameter url like example.com/backoffice/page
but on this page is not working the link is like this : example.com/backoffice/editassembly/2
This is the JS code of the page :
// When the document is ready set up our sortable with it's inherant function(s)
$("#todos").sortable({
handle: "#handle",
update: function() {
var order = $('#todos').sortable('serialize');
$("#info").load("../scripts/ficheiroassembleia.php?" + order);
}
});
This code is completly correct and working on other pages, the thing is that the .load is not loading my script like it could not reach it.
The current module for the page im using is inside the folder "www/backoffice/modules/editassembly/" and the script is inside "www/scripts/"
I already found out the problem, it was due to fact that the include for header that contained all important js files was not loading corretly, path issue i had to make a call on the file itself since it was the only module using a tripple parameter.
My ajax call is working on localhost but not when i upload the files in domain. Using ajax I am searching all jpg/png files in a folder called 'images' and showing them in my webpage. The code is -
<script>
//Use ajax to load all images (jpe?g|png|gif) from a folder to a page called Gallery
//images folder should be in the same folder as the file
var folder = "../images/";
$.ajax({
url : folder,
success: function (data) {
$(data).find("a").attr("href", function (i, val) {
if( val.match(/\.(jpe?g|png|gif)$/) ) {
// create 'img' element using JS and dynamically add image source and class
var imgSrc = document.createElement('img');
imgSrc.src= folder + val;
imgSrc.className = 'imageThumbnails';
$("#spanImage").append(imgSrc);
}
});
}
});
</script>
please change
var folder = "../images/";
to
var folder = "images/";
hope this helps.. cheers
Ok, so as you saw when you tried accessing the folder directly in your browser, your web server does not allow this, which is common on web servers. Very few people actually want visitors to be able to see a list of all files in a folder, for security reasons.
The quick and dirty way to do this would be to allow listing files in that folder, through a htaccess file, using Options +Indexes, but I strongly recommend you do not do that
Instead, I would suggest you place a file inside your images folder called index.php and have that file build you a list of files placed alongside it, in the images folder. That way you have control over which files you show and which ones you don't. The index.php file can return a simple text output, one file name per line or something like that. Then your ajax call should work as it used to.
Hope this helps!
I'm working on a website, and the relevant portion of my file structure is:
site
classes
class1
js
Now, the js contains scripts that use other scripts within the same folder. The only way I can get the scripts to load properly on the php pages is to either copy the whole js folder into the relevant subfolder, or move the page to the site folder. Neither of these options is good.
I know that the issue is with the file pathing, so how do I get the includes in the js scripts to path relative to their location, and not the location of the php page?
An example of this:
I have a page in class1 called class1home.php.
It calls a js script called script.js.
script.js contains a function with include(script2.js), which is in the js folder.
Because of the pathing, the include is looking for site/classes/class1/script2.js.
I want it to go to site/js/script2.js.
Because there are multiple folders and scripts using script2.js, I can't just change the filepath within the include to be relative to that specific page.
Within script.js:
/**
* #function Include
* #description Includes an external scripts to the page
* #param {string} scriptUrl
*/
function include(scriptUrl) {
document.write('<script src="' + scriptUrl + '"></script>');
}
One place it is used (within script.js):
/**
* #module ToTop
* #description Enables ToTop Plugin
*/
(function ($) {
var o = $('html');
if (o.hasClass('desktop')) {
include('js/jquery.ui.totop.min.js');
$(document).ready(function () {
$().UItoTop({
easingType: 'easeOutQuart',
containerClass: 'ui-to-top fa fa-angle-up'
});
});
}
})($);
I normally solve this type of problem by having the page identify where it is with a call to Server. It looks like this:
$callingPageURL =$_SERVER['SCRIPT_FILENAME'];
Then, I parse that string to determine the file and the folder, by using the explode function. It looks like this:
$callingPageURLHolder = explode("/", $callingPageURL);
This loads up an array of values into callingPageURLHolder. From there, I use common data structure methods, like array pops, to get to the part of the URL that I think will be relevant to the program. It looks like this:
$callingPageFile = array_pop($callingPageURLHolder);
$callingPageFolder = array_pop($callingPageURLHolder);
Once you can parse out the array that comes back from Server, you could simply load up variables you need to concatenate into a URL that you will call in your include.
This same type of technique can be used to make small changes in a template page based on where it was included from, by adding in some flow control that tests these kinds of extracted values.
For example,
switch ($callingPageFile){
case "index.php":
// some response
break;
}
Using logic like that, I might build chains of cases in which I respond to anticipated URL parts. I use this type of code for when I might want to slightly customize a PHP page. Using these techniques, and some planning, you might be able to respond to the idea that you intend to transplant your code to a variety of places.
I am currently trying to get a path to a file to work but it just won't let me.
I'm working on a virtual directory so the path will be dynamic.
this is how my Directories are set up:
WebServices
->LiveScanServ.asmx(this is the file I want)
LiveScan
->ScanFolders.aspx
My browser Url looks like :http://localhost:43234/dynamicPart/Home.aspx#
inside my ScanFolders.aspx I am making a call to the file LivescanServ.asmx however it just won't find it. This is what I have so far:
<Services><asp:ServiceReference Path="~/WebServices/LiveScanService.asmx" /></Services>
but when I run it, it gives me a 404 error(Not Found).
Any ideas?
edit: this is my javascript for calling ScanFolders.aspx:
function loadLiveScanSync() {
$('#centreMenu').slideUp('slow', function () {
$('#centreMenu').children('div').css('display', 'none');
$('#loadedContentHolder').load('LiveScan/ScanFolders.aspx');
$('#loadedContentHolder').css('display', 'block');
The file you want is LiveScanServ.asmx. The file you have in your service reference is LiveScanService.asmx. Make sure you can manually resolve your asmx file in the browser, and that the url matches the path in your config.
WebService ->LiveScanServ.asmx(this is the file I want)
<Services><asp:ServiceReference Path="~/WebServices/LiveScanService.asmx" /></Services>