I'm using Laravel's var ({{ $test }}), assets ({{ asset('upload/img/something.png' }}), route ( {{ route('something.something') }} ) in a js script. This script works correctly if its in a blade file.
I want to has this script inside a js file. I know that I can create a js function and call this in a blade file with arguments, but I have no more arguments. How I can solve my problem?
You can declare your variables in blade file, then include the javascript file to use them.
Example:
In your blade file you declare a url variable:
<script>
var url = "{{ route('something.something') }}";
</script>
Notice that we use var so that the variable will be visible in the scripts below this.
Then you include your script file:
<script src="{{ asset('js/myScript.js' }}"></script>
In that file you can use the url variable.
PS: maybe if you provide more code I will be able to help you more.
Related
I have a separate js file into laravel public folder, I have decleard my route into web.php, I can use them in blade file but getting error while try to use them in that js file.
$.ajax({
//url:"http://127.0.0.1:8000/cats/fetch",
url:"{{route('cats.fetch')}}",
method:"POST",
data:{select:select, value:value, _token:_token, dependent:dependent},
success:function(result)
{
$('#'+dependent).html(result);
}
})
but when I use hard coded url then its work for instance url:"cats/fetch".
How can I make it configurable not hard coded into js file
url:"{{route('cats.fetch')}}", is not valid .js syntax. You're correct that you can use it in .blade.php, but in an external .js file, you need to assign it to a variable first:
<script type="text/javascript">
let url = "{{ route('cats.fetch') }}";
</script>
<script src="path/to/file.js" type="text/javascript"/>
Then, in file.js, reference the variable:
...
url: url,
...
I am new to django and eventually I learnt the use of static files in Django and to my relief I was finally able to load the files while hardcoding the file name in the {%static filename.jpg %}. However, when I tried to create a string by replacing the hardcoded filename.jpg with the dynamic file name, I wasn't getting the output.
Not working code snippet:
<script>
image_name = "1.png"
static_start = "{% static '"
static_end = "' %}"
image_src = static_start.concat(image_name, static_end)
window.alert(image_src)
var para = document.createElement("img");
{% load static %}
para.setAttribute("src", image_src)
var element = document.getElementById("div_test");
element.appendChild(para);
</script>
Working Code snippet:
<script>
var para = document.createElement("img");
{% load static %}
para.setAttribute("src", "{%static '1.png'%}")
var element = document.getElementById("div_test");
element.appendChild(para);
</script>
What I am trying to do is that, I have a bunch of image files that I am getting from somewhere through an API and I am storing them in the static folder. After downloading those image, I am trying to load them on my webpage, for that I am using the static file and getting the file name dynamically as I do not know what would the file name of the downloaded file.
The point is that string concatenation isn't working, while directly passing the string is.
Any help would really be appreciated.
P.S.: Apparently in the example shared above I am simply using 1.png which would eventually be replaced by the name of the file I wish to display.
Working code using get_static_prefix (the way I actually wanted)
<script>
image_name = "1.png"
var para = document.createElement("img");
{% load static %}
para.setAttribute("src", "{% get_static_prefix %}" + image_name)
var element = document.getElementById("div_test");
element.appendChild(para);
</script>
I think I understand what you are trying to do here, but I don't think it is possible. Django templates are rendered on the server, and JavaScript is rendered on the client-side. You are trying to create the template tag with JavaScript, but the template tags won't be evaluated on the client-side, they will just be strings.
So after referring to other posts, I realized what I was doing wrong. I believe there was something that wasn't right about string concatenation and the escape characters and therefore Django has an option for get_static_prefix and that is was I was supposed to use instead of that stupid string concatenation. I have edited my question with the correct working response, exactly the way I wanted it to.
References: Stackoverflow question,
Django tutorial
i have a problem in getting the path of my image in laravel directory in javascript. I already get the image in php but not in javascript here is in my php
<img src="{{ asset('image_files/' . $product->featured_img) }}" />
i tried in my javascript like this and i got error:
$("#feature_img").attr('src',asset('image_files/'+data.product[0].featured_img))
you can define like this.you missed curly brace
$("#feature_img").attr('src',"{{asset('image_files')}}/"+data.product[0].featured_img);
Get resource path and then use like this
var path = "{{ resource_path() }}";
$("#feature_img").attr('src',path +"/asset/image_files/"+data.product[0].featured_img);
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!
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>