loading file from assets folder in js

[Manol]

How can I access the assets folder from a javascript file?

from:   /site/templates/js/myjs.js

to:      /assets/myfile.txt

Best regards.

[DaveP]

I think simply using a fully qualified URL would do it - like //www.example.com/assets/myfile.txt

[Manol]

Thank you Dave, do you know how to do it with a relative address instead of absolute?.

Regards.

http://myurl.whatever/site/assets/data/myfile.txt does the job, but myfile.js and myfile.txt reside on the same processwire site so I would like to access with a relative path.

[Soma]

How can I access the assets folder from a javascript file?

from:   /site/templates/js/myjs.js

to:      /assets/myfile.txt

Best regards.

You should be able to access it with /site/assets/myfile.txt

[Manol]

'/site/assets/list-details.json' doesn't get the results but 'http://mysite.com/site/assets/data/list-details.json' does.

Thank you anyway.

[Soma]

Then what js script are you talking about? How do you access it? I always use absolute paths from root without domain and it works fine.

[Soma]

Can you put this in a template and post here what you got?

echo $config->urls->root;

[Manol]

this is my .php under /templates

<?php include("./includes/head.inc"); ?>

    
<!-- Content start -->
<div data-role="content">
    
    <div id='proximity_list' class='css3-blink '>Buscando lugares de interes cercanos...</div>

    <div ng-controller='getLitLatLng'>
        <ul data-role='listview'>
            <li ng-repeat='lit in lits | orderBy:predicate:reverse'>
                <a href='{{ lit.url }}' >
                    <h2>{{ lit.title }}</h2>
                    <p>{{ lit.distance }} metros</p>
                </a> 
            </li>
        </ul>
    </div>            

<!-- ><div id='mymap' ></div> -->

</div> <!-- /content end -->    

<?php  include("./includes/foot.inc"); ?>

this my js under /templates/js

(I use angularjs, maybe that is the reason this is not working)

function getLitLatLng($scope, $http) {
	
	// check if user has geolocation
	if(navigator.geolocation) {
			
		// Posicion del dispositivo movil
		navigator.geolocation.getCurrentPosition(function(position) {
		 
				// get user position
				x0 =  position.coords.latitude;
				y0 =  position.coords.longitude;
					
				//create and populate list of lits	
				listalits($scope, $http);

			});//navigator
		}//if	
	
}

function listalits($scope, $http){
	
	/** gets lits information	 */
  $http.get('http://mydomain.com/site/assets/data/list-details.json')

		/** success file readed */
		.success(function(data) {
	
				// convert to object
		    $scope.lits = eval(data);

				// calcula distancias de usuario a lit
				for(var i in $scope.lits){
					metros = (Math.sqrt(Math.pow((x0-$scope.lits[i].lat),2) + Math.pow((y0-$scope.lits[i].lng),2)) * 100000 );
					$scope.lits[i].distance = metros;
				}
				
		/** file not readable */
		}).error(function(data, status) { alert(" json no leido desde el servidor"); });

	//order by distance
	$scope.predicate = 'distance';
	
}

[Soma]

Can you put this in a template and post here what you got?

echo $config->urls->root;

Or just this 

echo $config->urls->assets;

[ryan]

'/site/assets/list-details.json' doesn't get the results but 'http://mysite.com/si...st-details.json' does.

These two URLs resolve to different places. If I take out the http and domain, they are still different:

/site/assets/list-details.json

/site/assets/data/list-details.json

Is that it? Or just a typo?

[Manol]

It's not a typo, thank you for your help, Dave, Soma and Ryan, in the end I used absolute path, that way it works.

[Soma]

'/site/assets/list-details.json' doesn't get the results but 'http://mysite.com/site/assets/data/list-details.json' does.

Thank you anyway.

Of course it doesn't get the result because the first url is wrong... that's what Ryan mentioned, you have a /data/ folder inside assets? Which is missing in the first url

/site/assets/list-details.json

http://mysite.com/site/assets/data/list-details.json

So it should be then:

/site/assets/data/list-details.json

which will work fine.

To go further if you want to make it always have the correct url even if you move PW folder to a subfolder you would use the $config->urls->assets in front of data folder.

$filepath = $config->urls->assets . "data/list-details.json";

If you want to have it in your JScript as a variable you could use a json object to have access to it in js.

Somewhere in your pages html <head> before your angular js script:

<?php
$jsconfig = array('assets' => $config->urls->assets);
?>
<script>
    var config = <?php echo json_encode($jsconfig);?>;
</script>

Then use it in your angularjs like this:

$http.get( config.assets + 'data/list-details.json').success(....

PW is using this same technique in the admin.

[Soma]

Sorry, was a lttle longer edit after first post.

[Manol]

Thank you very much Soma, this is the bit I was missing:

$filepath = $config->urls->assets . "data/list-details.json";

Really appreciate your help, it's a pleasure to learn from you and many others in this forum.