I'm teaching myself Django, and decided to try out some JS functionality. I included a simple text-changing function (from w3schools) in a JS script to try things out. The app is blog, and the JS script lives in blog/static/blog/test.js. There's only one function in there:
function myFunction() {
document.getElementById("demo-btn").innerHTML = "Text changed.";
}
Which is linked to a button in blog/templates/blog/post_list.html, id="demo-btn".
Website live here: http://andreyito.pythonanywhere.com
It works fine on my localhost, but when I push it to pythonanywhere, nothing happens (clicking on the Click me button is supposed to change the text just above the button.)
This feels like a minor thing that I'm leaving out, but I haven't been able to easily troubleshoot this. Repo here:https://github.com/Don86/djgirls
Your test.js file is not loading in the pythonanywhere hosting:
You can see their documentation on how they work with static files. Also maybe you did not run python manage.py collectstatic which loads the file in the static directory. Please see the documentation for more details. Also you can check how they setup the static files in this documentation.
Related
I'm taking over a flask project where the previous dev wrote quite a bit of their javascript/jquery in inline script tags in template files instead of separate js files in a static folder.
There's an issue with table cell highlight occuring after a long delay and I can't find the source in firefox/chrome debugger to step through the code. All the javascript I see is from the base template(can't see this either in chrome).
How do I view this injected template html and internal javascript in the debugger or is there another way to debug this without reworking the entire template and moving the javascript to another file?
I did not see in firefox debugger a javascript file that I placed in the static folder and referred from *.html file.After following this tutorial I saw that it is possible. I started commenting out parts from my application, hoping to find which part is causing this issue.In the end, I found out that my javascript file contained wrong syntax in one of the "if" conditions:
if foo() {
instead of
if (foo()) {
I want to make a local HTML application read and update a JSON file and use its content to display HTML content. Alas, I'm stuck at the very first step, as I can't seem to setup any sort of test file that simply notices and reads a JSON file. From what I see online, I need to use other libraries. I attempted to use require.js but I can't make it work and the documentation doesn't help me.
I imported the require.js with a tag and attempt to launch something out of what I got from the documentation, but there's nothing to do. It doesn't look like it's willing to take .json files.
requirejs([
'example'
], function(example) {
const config = require('./config.json')
});
My issue is to get the program to read the file. From there I believe I can make the display of it, but this JS thing is all alien to me.
The recommended way would be to run a web server or use something like Electron and build a desktop app (as #chrisG points out in the comments). But if you wanna do this in the browser without an web server you could do something like:
Run Chrome with the --allow-file-access-from-files (or however you allow local file access in your browser of choice)
Put your JSON in a js file and load it (to just do this you don't need the flag, but if you want to use absolute path you'll need it)
Following the guide on managing javascript in Drupal 7 I added a "myjs.js" file in my sites/all/themes/mytheme/js folder, and included a line in the mytheme.info file (scripts[] = js/myjs.js). When I view page source on my site I can see the file is loaded.
Following a number of issues, I tried to back out of this. I removed the scripts[] line in the mytheme.info file, and deleted the js file from the js folder. So, theoretically, my drupal 7 site should have no knowledge of my custom js file, right?
Well, after numerous clearing of caches, hard reload of browser, even stop/restart my xampp server, whenever I view source on my site I see that file is still referenced as being loaded.
Must be a database thing? Where else would Drupal store and therefore persist my reference?
I also tried adding a new js file in the .info file (e.g., "js/newjs.js") and after clearing cache I never see the new file. Only the old, original file is there.
I'm using a bootstrap subtheme, and have checked both bootstrap.info and of course mytheme.info and there is NO reference to the myjs.js file anywhere.
This is exasperating. Any thoughts where I might look (database record, e.g.,).
THanks.
Found the problem. I'm using AMPP as localhost server. When I first set this up I installed the D7 on my D: drive...or so I thought. I'm not sure exactly how AMPP works but I found there is another installation on my C drive in the Systems folder. Therefore, I have two installs, and thought I was working on the D drive version all this time. Oddly, both of them are "almost" in synch....so at some point recently the D drive version was running, but now it's the C. I never did a restore so have no idea whether the C drive is/was a "clone" of the D drive install. Whatever. Feel so stooopid. I guess the key learning is when everything should be working but isn't, and if odd things are happening, look for the simple-stoopid things you might have done. Chris G was almost on point...I had uploaded the js and .info files, but to the D drive!
I've been banging my head against the wall for a while now, trying to get browserify working for me. I'm starting with what should be really the simplest example, replacing a javascript page with its browserified page (when there's no requires in it!). So, here's what I did:
I had a page, "javascript.js" that was already incorporated into my site. I went to its folder, and ran the command
browserify ./javascript.js > bundle.js
I figure that should be an identical file (functionally) to javascript.js. So, I go to my index.jade file and replace
script(src='javascript.js')
with
script(src='bundle.js')
(Those are the equivalent of script tags in html)
But it didn't work! The website now throws the error that a certain variable from my browserified file is undefined (the error comes from a function call in another file). What gives? What am I doing wrong? Am I thinking about bundles incorrectly? It seems like this is following instructions, but it's just not working.
Thanks for the help in advanced, I've really been at this for a while now with no progress.
I'm completly new to wordpress. I just want to use single javascript snippet on a page. For example:
<script>
function myFunction(){
//do something
}
</script>
// a bit later
<input type="button" name="testButton" onclick="myFunction()">
And in developers console in Chrome I get an error: "Refused to execute a JavaScript script. Source code of script found within request."
I've done some research and I think that I know it's origin - it seems that I have to add an external file with my javascript code. The bad thing is, that I have literally no idea how to do it, in spite of researching for the past few hours. Maybe it's very easy and I'm missing the simple solution, but I just don't know how to upload .js file. I've bumped into some topics saying that I have to use a php function, wp_enqueue_script(), but it still needs the .js file to be uploaded to wordpress server. Do I have to upload it as Media, a page, or what? And still, if I have to upload a javascript file each single time when I want to change something, application development will be a pain in the butt...
So is there maybe an easy way to put my javascript function definition in the same file where the function is used? That would be possibly the easiest solution.
Adding external Javascript files is probably the way to go. You upload them in the same way you would do if this was a regular HTML site, (ie using FTP or something similar).
Then you can reference it in the header.php file (accesible under the Appearance -> Editor in Wordpress).
Some themes allow you to add Javascript to the top/bottom of each page, you may want to check if your theme allows that. (check the manual with the theme or their support).
Add this whole code in header.php file of your WordPress and add
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
before your code.