Laravel Passing route to js - javascript

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,
...

Related

Using php var inside js file

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.

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!

How can I get Javascript Source(js file) from url?

I want to retrieve source code of a javascript file( eg: xxx.js) from some url. I could get html from url but when I try to do get .js file using same method, it fails.
How can I get a whole source of js file from url?
Here's what worked for HTML :
$.ajax({
url : "http://localhost:8080/aaa/bbb/xxx.html",
success : function(result){
var a= result;
alert(a);
}
});
Use this
<script type="text/javascript" src="xxx.js"></script>

cakephp - path for image inside js file

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>

Path to WordPress Template Directory inside jQuery?

My header is calling a javascript file which sends out an email:
<script type="text/javascript" src="<?php bloginfo('template_directory') ?>/css/effects.js"></script>
But inside this file, I have a jQuery code that calls a .php file that does the actual sending of the email:
$.ajax({
type: "POST",
url: "css/sendmail.php",
data: dataString`
But the script doesn't work, unless the url is:
<?php bloginfo('template_directory') ?>/css/sendmail.php
and not just:
css/sendmail.php
Is there any way to include a path to the wordpress template directory inside js?
You could create a Javascript snippet that saves the template dir in a variable, and use this later:
<script>
var templateDir = "<?php bloginfo('template_directory') ?>";
</script>

Categories