Replace Javascript source file from server with local javascript source - javascript

I'm trying to install Symfony project on a server, which has no connection to the internet.
How can i replace a Javascript source file from server with a local javascript source file using javascript code locally without using plugins?
I have this javascript code in symfony twig:
{% block javascripts %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="//code.highcharts.com/4.1.8/highcharts.js"></script>
<script src="//code.highcharts.com/4.1.8/modules/exporting.js</script>
{% endblock %}
How can i replace it with something like
script src="C:/scripts/jquery.min.js so that the site uses "jquery.min.js" in C drive instead of the one from server?

You can download the file from the vendor site. The file location is then based on its relationship to the index.html (or in whatever file you mention the script tag). So if both the js and HTML files are in the same folder you can reference the name with a simple "/fileName.js". Or if it's in the parent folder then "../fileName.js". Sub folder is "/js/fileName.js".

Download library's and add in you main template.
use this construction for example:
{% block javascripts %}
<script src="{{ asset('assets/assets/lib/jquery/jquery-1.11.2.min.js') }}"></script>
<script src="{{ asset('assets/assets/lib/bootstrap/js/bootstrap.min.js') }}"></script>
<script src="{{ asset('assets/assets/lib/mmenu/mmenu.min.js') }}"></script>
<script src="{{ asset('assets/assets/lib/materialize/js/materialize.min.js') }}"></script>
<script src="{{ asset('assets/assets/js/main.min.js') }}"></script>
{% endblock %}
P.S. base directory web/

Related

Laravel js file not found

I've my Laravel javascript file in public/js folder and it is referred like follows.
<script src="{{ asset('public/js/test.js') }}"></script>
But it is still not found 404.
You shouldn't need to include public in the URL. This should work fine;
<script src="{{ asset('/js/test.js') }}"></script>
What is ASSET_URL value? You can check it in the web developer tool in chrome or firefox. You can configure the asset URL host by setting the ASSET_URL variable in your .env file. This can be useful if you host your assets on an external service like Amazon S3 (https://laravel.com/docs/7.x/helpers#method-asset). For eg
// ASSET_URL=http://example.com/assets
asset('public/js/test.js') //http://example.com/assets/js/test.js
Usually your run your server document root as public folder. Hence, I am guessing that removing the public dir path will solve 404 file not found error i.e change to.
<script src="{{ asset('js/test.js') }}"></script>
Please use instead of as public folder is added Automatically by asset

Django Static file wont load in Block Content even when {% load static %} is applied

I can't load my static particles.js file inside my block content even when I have load static in my file.
{% extends 'base.html' %}
{% load static %}
{% block content %}
<!--Particles-->
<script src="{% static 'particles/particles.js' %}" defer="defer"></script>
<script src="https://cdn.jsdelivr.net/npm/particles.js#2.0.0/particles.min.js"></script>
In chrome I am getting this error
GET http://localhost:8000/static/particles/particles.js net::ERR_ABORTED 404 (Not Found)
Although it is pointing to the right place.
Settings.py
file with particles.js
I was actually putting the particles folder that has my JS file in the root static instead of the app 'ticker' static folder that I had declared in my settings.py.

Conditionally include JS script in html

I am making a simple website hosted on Github Pages and use CDN to include several script files:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
During development on a local machine it is sometimes useful to include full versions of scripts to simplify debug, but on target server I'd prefer to use minified scripts, i.e. include angular.min.js instead of angular.js. Is there a way to have "conditional include" in html, or do Github Pages have some mechanism to substitute parts of last submitted files?
The Jekyll documentation says you can use the Jekyll environment to conditionally include code when building the site. For your case:
...
{% if jekyll.environment == "production" %}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
{% else %}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
{% endif %}
...
Another option suggests using another config file specifically for development.
_config.yml sets environment: prod.
_config_dev.yml sets environment: dev.
Running jekyll build --config _config.yml,_config_dev.yml in development, the second config file overrides the first and sets the environment to dev. GitHub Pages runs jekyll build - which only uses _config.yml - and would have environment set to prod. You could use a similar syntax to the above to conditionally include the file.
...
{% if site.environment == "prod" %}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
{% else %}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
{% endif %}
...

symfony inline asset with assetic

I have the following code based on Symfony2 docs:
{% block javascripts %}
{% javascripts filter="?jsqueeze" output="js/app.js"
"%kernel.root_dir%/Resources/assets/js/one.js"
"%kernel.root_dir%/Resources/assets/js/two.js" %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
{% endblock %}
which works like charm.
What I want to do, is instead of
<script src="{{ asset_url }}"></script>
use something like:
<script> ... inline asset contents here ... </script>
I tried assetic docs as well as digging around AsseticTokenParser and AsseticNode classes, but couldn't find a variable which references to the actual filepath instead of url.
Normally I do it with css rather than js, but it should be the same concept.
thanks!
In production mode, symfony generates a link to a static file, which can be included directly into the template. This file needs to be generated with something like:
php app/console assetic:dump --env=prod --no-debug
In dev mode, there is no static file generated which can be included. The asset_url contains an url which will call symfony controller which will in turn generate required js/css files on the fly. Aparently it is very easy to include the output of a controller in symfony:
{% render asset_url %}
To answer my own question, one could write a twig extension, which would include a static file or forward request to render method depending on wether it has been called in prod or dev mode.
I will update this page if/when I write an extension like this.
Another option is not to use dev mode of assetic and always generate static css/js files on the fly with:
php app/console assetic:watch
Then a simple include would work.
I wish there was an out of the box method in Symfony to get this common task done.

Symfony2 Assetic not working with multiple javascript file with the * sign

I use Symfony2 and the assetic Bundle. (probleme when using the * sign to ask assetic to take all files)
Form what I have read here and there assetic allow to use multiple javascript file.
This work just fine when when I write all the file right before the <'/html> tag:
{% javascripts
'#MySiteBlogBundle/Resources/public/js/test1.js'
'#MySiteBlogBundle/Resources/public/js/test2.js'
'#MySiteBlogBundle/Resources/public/js/test3.js'
%}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
but the same code, doesn't work if instead of listing the file, I use the * (just like this:)
{% javascripts
'#MySiteBlogBundle/Resources/public/js/*'
%}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
with the *, it works only depending on the pages which are displayed. I did all my javascipt test on class which are on my main twig template. And thoses class are displayed on all pages... So all test should be working.
Anyone ever had such probleme when using this * sign with assetic?
Thanks for any comment/help.
I noticed only two problems with assetic earlier.
First, in production mode you have to dump them (php app/console assetic:dump --env=prod) before using. Okay, this is not a problem but you shouldn't forget it.
Second, if you use the * sign to load all JavaScripts then the order of your scripts will be alphabetical and this can break a few dependencies among script files. This is the reason I usually don't use the * sign.
After few hours with the same issue, I realized you need to:
create symbolic links (A.K.A. symlinks) or copy of your bundles by command:
bin/console assets:install
or
bin/console assets:install --symlink
in your definitions, use bundles/mysiteblog/js/* rather than #MySiteBlogBundle/Resources/public/js/* (you will see your bundle path in WEB directory after Step 1.

Categories

Resources