cakephp - path for image inside js file - javascript

Trying to implement this jquery plugin http://www.myjqueryplugins.com/jquery-plugin/jrating i have trouble setting paths for stars in js file. its not possible to use php inside js file right?
Cause I need to set those stars path to be inside webroot folder and i don't know how to do that without WWW_ROOT constant
(function($) {
$.fn.jRating = function(op) {
var defaults = {
bigStarsPath : 'icons/stars.png'
...

Just make it an absolute URL instead of a relative URL:
(function($) {
$.fn.jRating = function(op) {
var defaults = {
bigStarsPath : '/icons/stars.png' //<-- notice the "/" before "icons"
...
That tells it to look for an 'icons' folder within the 'webroot' folder.
The same goes for any other files in the webroot. Sometimes you want to include css or javascript file that's within a library or something - in that case, you can include it by setting a "/" first - like this: /bootstrap/js/main.js.

There are many solutions:
Copy this code to view file (.ctp) and use:
bigStarsPath: '<?php echo $path_to_file; ?>'
If You can add .js files to preprocessor of PHP:
Parse a JavaScript file through PHP
Set in view js variable and read in js.

in your header file put this code below script with set constant variable and use that JavaScript variable name called bipartisanship in your JS file, JS must be include after this code.
<?php define('bipartisanship','/icons'); ?>
<script type="text/javascript">
var bipartisanship = '<?php echo bipartisanship; ?>'
</script>

Related

Adding Var to jQuery.getScript() url string

I included Var with url string to JS files directory in my PHP page:
var jsDir= "<?php echo get_template_directory_uri(); ?>/js";
Now I need to add each JS files within .js file using jQuery.getScript and I need help adding the directory var jsDir to the url string:
$.getScript( "/plugin.js");
This is pretty trivial string concatenation
$.getScript( jsDir + "/plugin.js");

Mustache.js - using partial inside an external template file

I'm using external template file and I want to use a partial inside the template file (.mst file inside another .mst file)
For example I have template.mst file with this code:
{{#comments}}
// Here I want to use another external .mst file
{{/comments}}
So I careated a comment.mst file beside the template.mst file and now I'm trying to use {{>comment}} to call this external template file - full example:
{{#comments}}
{{>comment}}
{{/comments}}
But it doesn't work. I tried to play with it a little bit, I tried to add the file extension {{>comment.mst}} and I tried to add the path {{>temmplates/comment}} and any pther option.
This is the code I use to load the template:
$.get('templates/template.mst', function(template) {
var rendered = Mustache.render(template, postData);
$('.inner-container').prepend(rendered);
});
I guess I missing something, Can someone give me an hint? Thanks!

php create file in directory

The below code checks for a directory 'dat'; if it ins't there, it creates one. That part works just fine; what I need is for it to write a file to said directory where AJAX can read it from.
Here's the php...
//checks for 'dat' directory; if false, creates it, if true, does nothing.
$dir = 'c:\wamp\www\dat';
if(file_exists($dir)){
return;
}
else{
mkdir ('C:\wamp\www\dat',0700);
}
//writes chats to file
$data = fopen($dir. "/chatlog". date('d'). '.txt', 'a+');
fwrite($data, $speak);
fclose($data);
}
And here's the AJAX; I don't need as much help here as I do above, but I won't complain if you provide the help for the AJAX below, mainly in getting it to read from the file within the 'dat' directory...
xhr.open("GET","chatlog<?php /*stamps the chatlog file with date (numerical day only)*/ echo date("d");?>.txt",true);
Your PHP script is running inside www, then, your file you be created there.
If you want to create the file inside the directory www/dat, just change this line
$file = "chatlog". date('d'). ".txt";
for this one
$file = 'dat\chatlog'. date('d'). '.txt';

Accessing content folder from js file

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';

Javascript read text file from current directory

How to read text file (text1.txt) from current directory using javascript without jquery. I tried the following code.
var file = "text1.txt";
var reader = new FileReader();
var result = reader.readAsText(file);
console.log(result);
The FileReader API is usually used to read files selected via the an <input type="file">. It cannot read arbitrary files. The readAsText method expects to receive with a Blob or a File object, not a string containing a file name.
To read files that are siblings of the HTML document, use XMLHttpRequest. This will reliably work if you load the document over HTTP(S). If you are using a local HTML document (via a file: URI) then security restrictions in many browsers will prevent it from working (and you should run a local web server instead).
Option A, Your use-case prevents you from using an http or php server.
You can include local content in your javascript as a variable using a script include. If you are opening the page locally, as a file from a directory, this is the only way to include local content in the web page.
To include local content, put this above your other script tag:
<script src="text1.txt"></script>
and edit your text1.txt file so it assigns all the content to a variable:
gbl_text=`...contents of my text file...
...more contents...
...and so on....
`
You can use a script to create this include file, for example (use the ` tick mark below the tilde ~ key):
echo -n "var gbl_text=\`" > text1.txt
cat your-original-file.txt >> text1.txt
echo "\`" >> text1.txt
Then use the gbl_text variable in your javascript as needed...
function dosomething()
{
if (typeof(gbl_text)=='undefined'){
setTimeout('dosomething()',500) //call back until defined
}else{
console.log(gbl_text)
}
}
Option B, Your use-case would allow you to use the php-cli built-in server.
If you are able to run php-cli, you can open the page on the built-in php webserver, and read and write local content with a php call. To install and use php on linux,
sudo apt install php7.0-cli
#To use the php built-in webserver, run:
php -S localhost:8000 -t /path/to/your/content
So, instead of opening your html as a file, you would open as an http web page:
firefox http://localhost:8000/mypage.html
#or browser of choice
Now the local webpage is being served by an actual (local) http server with php support, and you can manipulate local files with it.
Here is simple example showing how to read and write to a local file using jQuery and php. Download and include jQuery (see jQuery.com) in your html file.
Contents of dofile.php:
<?php
$dowhat = $_REQUEST['dowhat'];
if ($dowhat=='save'){
$myvar = $_REQUEST['myvar'];
file_put_contents('myfile', $myvar);
}elseif($dowhat=='read'){
$myvar=file_get_contents('myfile');
echo $myvar;
}
?>
Contents of mypage.html:
<script src='jquery-3.2.1.js';></script>
<!--make sure the filename matches the jQuery you use-->
<script>
function savevar(){
var myvar=document.getElementById('mytxt').value
var path="dofile.php?dowhat=save&myvar="+myvar
$.get(path, function(data){
console.log("saved ...\n"+myvar)
alert("saved ...\n"+myvar)
});
}
function clearbox(){
document.getElementById('mytxt').value='reading file...'
setTimeout('getvar()',1000)
}
function getvar(){
var path="dofile.php?dowhat=read"
$.get(path, function(data){
console.log(data);
document.getElementById('mytxt').value=data
/*do other things with data here*/;
});
}
</script>
<html>
Type something in the text box.<br>
Use the Read and Write buttons to verify <br>
text is saved and read back.<br>
<input id='mytxt' value='type text here' onclick=document.getElementById('mytxt').value=''><br>
<input type='button' value='Save' onclick=savevar() ><input type='button' value='Read' onclick=clearbox() >
</html>
Please distinguish 2 kinds of reading files:
reading "from internet" - use XMLHttpRequest to read any kind of file
reading "from client" - use FileReader or <input type="file">
make a tiny iframe.
load the file there.
read it with iframe.innerHTML

Categories