cant load external js file in html - javascript

I have tried all answers available but none can solve my problem. I have a html page in which I am drawing svg using js. now I want to store this js in external file and call it (my html and js files are in same folder).
<script src="show1.js"></script> on doing so, my internal js cannot find functions defined in external js and gives 'ReferenceError: DrawLine is not defined'. I even tried using alert in external js to check whether it was being loaded or not, but even alert is not working. is there any settings that i will have to check? kindly help.
My code is really huge. I am posting this snippet instead that shows the internal and external js.
<head>
<script>
//only variables are declared
<script>
</head>
<body>
<script src="show1.js"></script>
<script> drawline(10,10,20,20,'black',4); </script>
</body>
show1.js:
function drawline(x1,y1,x2,y2,c,w)
{
//do stuff
}
Note:these pages are part of django project, and so my html and js are stored in the template folder of the project.

you can use the static file app in django to serve external static files: https://docs.djangoproject.com/en/1.10/ref/contrib/staticfiles/
You can create a folder on you project to host your static assets (with the name static for example), then you need to configure your project to serve static files in the settings
STATIC_ROOT = 'path to your folder/static/'
STATIC_URL = '/static/'
then in your template:
{% load staticfiles %}
<head>
<script>
//only variables are declared
<script>
</head>
<body>
<script src="{% static 'show1.js' %}"></script>
<script> drawline(10,10,20,20,'black',4); </script>
</body>
in development mode, the runserver command will serve your static files. you may want to serve the files directly from the web server in production mode. also settings may vary depending on the django version, you can refer to the documentation of your version for further details.

Related

Laravel 5.2 - All CSS and JS files in public are empty

I run a local installation of xampp on which a laravel 5.2 app is running. I am trying to include css and js files from the public directory, but none of the content of these files is being loaded.
Laravel finds the files, they are just always empty.
I tried to clear the browser cache and the Laravel cache, but neither worked. I have referenced the files in the following ways:
<script type="text/javascript" src="{{ asset('js/all.js') }}"></script>
OR
<script type="text/javascript" src="/js/all.js"></script>
In both cases the files are loaded, but does not contain anything.
I have tried generating the files through elixir or simply putting them directly in the folder, but still the same result.
Any help is appreciated.
Try this
<script type="text/javascript" src="{{ url('js/all.js') }}"></script>
Try this,
<script type="text/javascript" src="{{ URL::asset('js/all.js') }}"></script>
Here your js directory should be in the laravel's app/public folder and URL::asset() will produce the necessary url for you.
You can refer How to include css and js in Laravel 5 for more info.
Okay, so I didn't exactly solve the issue, but I got around it. Just posting answer for future reference.
I set up a virtual host i xampp to get around the files loading from localhost, like in this example: https://www.codementor.io/php/tutorial/how-to-install-laravel-5-xampp-windows
Afterwards the js and css files load on all the different options presented above. Apparently it is something to do with the .htaccess file in the root, when running from the default folder in xampp.
Thanks for all the suggestions.
Have you tried this?
<script src="{{URL::asset('/js/jquery-1.10.2.min.js')}}"> </script>
Make sure that the 'js' folder is inside the 'public' folder of your project.

Importing javascript files on WaveMaker

We have been using WaveMaker and wanted to know how we can go about importing an external javascript file using the platform ?
The external JS file should be imported into a folder in resources
The file path has to be given in login.html of the Web-App
The file path should be of the form "/projectname/foldername/filename.js/"
The functions in the external JS file can be accessed in the login page through its script and the function invoked here is from a sample js file.
The following works if using WaveMaker 6. This probably doesn't work with newer versions of WaveMaker.
Instead of having to add it to each project, try editing index.html in the webapproot directory and add you external js file:
<!-- Boot Wavemaker -->
<script type="text/javascript" src="config.js"></script>
<script type="text/javascript" src="/<path to javascript file>/sha512.js"></script>
Then, in order to have this work correctly in your development environment, add a context tag to server.xml just above the projects directory:
<Host appBase="webapps" autoDeploy="true" name="localhost" unpackWARs="true" xmlNamespaceAware="false" xmlValidation="false">
<Context docBase="c:/<Path To Javascript Filet" path="<path to javascript file matching whats in index.html>" reloadable="true"/>
</Host>
In the above Context tag, docBase is the local folder with js and path should match the path placed in index.html.
Doing this you can use the javascript file across all projects without having to add it to resources in the project.

jangaroo loader index.html file

In the Jangaroo tutorial using Maven it states"include a Jangaroo application script generated by the Maven build process". This should be created in src/main/webapp/index.html, it isn't. Can anyone explain this, or what in the pox.xml is missing?
Thanks
The misunderstanding here is that actually, the Jangaroo application script is generated, not the index.html file.
The idea is that your index.html usually contains custom HTML, e.g. loading your CSS or setting up some context. The only Jangaroo-specific things your HTML code has to do is load the generated joo/jangaroo-application.js script and run the application's main class, using its fully-qualified name (in this example, HelloWorld is in the top-level package):
<script type="text/javascript"
src="joo/jangaroo-application.js"></script>
<script type="text/javascript">
joo.classLoader.run("HelloWorld");
</script>
https://github.com/CoreMedia/jangaroo-tools/wiki/Tutorial-~-Deployment

Include javascript dojo files via Twig in Symfony 2

I try to achieve a simple goal: add developped dojo classes in a symfony2 html page with Twig.
I had read a lot of documentation on assetic, and i found two types of method to include assets:
The first one with the asset() twig function. And the second one with the "javascripts" tag.
The assets function is used to include files which are stored in the web/ folder whereas javascripts tag load files which are stored in the resource folder of the current bundle.
My dojo classes files are stored in the resource folder of a bundle, so i tried to load them with a javascripts tag like this:
{% javascripts '#MyBundle/Resources/public/js/MyClass.js' output= 'js/myBundle/MyClass.js' %}
<script type='text/javascript' src='{{ asset_url }}'></script>
{% endjavascripts %}
And it work, my file is successfully included, unfortunately the name is not "MyClass.js" but "MyCmass_MyClass_1.js". I have executed the assetic:dump --env=prod command but my file name still "MyCmass_MyClass_1.js"
What can I do to correct this ?
(I tried to delete the cache, relaunch my server in prod/dev, launch the assetic command with the dev env, and no change).
Visit your site in production mode: yoursite.com/app.php instead of yoursite.com/app_dev.php, or point your webserver to correct file in web folder: web/app.php.

What is the most basic way of referencing JS/CSS files in a Django Application?

So I have just begun learning the Django framework, and I am trying to make a basic application using AJAX to load Django responses into my main 'Content' div. So far so good, but one issue I am having is referencing JS/CSS files. All I want is a link to one CSS file, and one JS file in my main index page.
What I am hoping to do is add a reference to style/main.css and js/main.js in my application's urls.py script, where python would return the contents of the file. So, a standard <link src='style/main.css' ... /> tag would receive the contents of the appropriate file.
Thanks.
Read the documentation on serving static files. Essentially, you can use Django to serve these files during development, but should definitely configure your web server (e.g. Apache) to serve them directly in your production environment.
Setup "django.contrib.staticfiles" properly.
Add your link and script tags to your template using your STATIC_URL setting.
<link href="{{ STATIC_URL }}css/main.css"/>
<script src="{{ STATIC_URL }}js/main.js"></script>
https://docs.djangoproject.com/en/1.3/ref/contrib/staticfiles/
You can try these steps:
open your settings.py and
-add this at the first line of your file:
import os.path
-change your STATIC_ROOT's value to:
STATIC_ROOT = os.path.join(PROJECT_DIR, 'static/')
-change your STATIC_URL's value to:
STATIC_URL = '/static/'
create a folder named "static" in your project root.
create a folder for your static files like css, javascript and etc. I recommend you use a different folder for different types of files.
open the urls.py of your project
-add this to your imports: import settings
-add this to the url patterns:
(r'(?:.*?/)?(?P(css|jquery|jscripts|images)/.+)$', 'django.views.static.serve', {'document_root': settings.STATIC_ROOT }),
NOTE: In this example, there are folders named css, jquery, jscripts and images inside my static folder.
In your template add this:
for css files: (in this example, default.css is the name of the css file)
<link href="/{{ STATIC_ROOT }}css/default.css" rel="stylesheet" type="text/css" media="all" />
for javascript:
<script type="text/javascript" src="/{{ STATIC_ROOT }}jquery/jquery.js"></script>

Categories

Resources