djangobyexample book - jquery bookmarklet not working at all - javascript

I'm working through Django By Example and in one chapter a jQuery bookmarklet is built within a Django app so that a user can easily save jpg images from a website into their user profile area within the Django app.
The tutorial does give exact instructions on what to do which I have followed and although I have managed to get the bookmarklet button to appear in my bookmarks bar in Chrome, nothing happens when I click it when browsing a webpage with jpg images.
This is my local Django dashboard where the bookmarklet button is added to the bookmarks bar and this part works fine
and this is how it must look like when clicked on the bookmarklet, this is the part where nothing happens for me when I clicked on bookmarklet.
(how to solve this?)
These are the relevant js files
https://github.com/davejonesbkk/bookmarks/blob/master/images/templates/bookmarklet_launcher.js
https://github.com/davejonesbkk/bookmarks/blob/master/images/static/js/bookmarklet.js
I believe the JavaScript launcher is unable to load the JavaScript files or the JS launcher itself is not getting loaded.
The JavaScript launcher is getting called through a Django template tag "include" inside the anchor tag.
this is the link:
https://github.com/davejonesbkk/bookmarks/blob/master/account/templates/account/dashboard.html
I tried debugging it through CTRL+SHIFT+I console where trouble showed that "include" tag not working properly.

Your include tag is split over two lines:
images from other websites → <a href="javascript:{% include
"bookmarklet_launcher.js" %}" class="button">Bookmark it</a><p>
Django does not support multiple line tags. Change it to:
images from other websites → Bookmark it<p>

I have faced the similar error while going through the book.
The bookmark button is not functioning,when i debugged it through chrome debugger,i could able to see errors at js level.I have made two changes to resolve these errors.
1.Error message: net::ERR_ABORTED
Action step:
In the book its mentioned that to place bookmarklet.js in images application directory,but in bookmarklet_launcher.js the source is refered to below path
http://127.0.0.1:8000/static/js/bookmarklet.js?r=
So place bookmarklet.js in /static/js/ directory inside images application(if folder structure not available create it).
2.Error message: net::ERR_ABORTED
There is one more file that should be placed which is bookmarklet.css which is being refereed at below line in bookmarklet.js.
href: static_url + 'css/bookmarklet.css?r=' + Math.floor(Math.random()*99999999999999999999)
Action step:
create a file bookmarklet.css inside /static/css/ directory and place the css code.Refer below link for css code:
Git Hub link for css code reference
1.After the above steps,restart the development server.
2.Drag the bookmark it button to create a bookmark in browser.
3.Open any website that is HTTP(not https) and click on bookmark it(The one which is bookmarked in browser not bookmark it button).
4.The below pop up appears

the problem is that template doesn't exist so try t do the following
**
1. make sure your include code in same line
2. make sure same name of the template exist on your project director /images/templates/file_name.js.
3. or go to setting and add your templates directory to templates.
4. if it load but no images views don't forget that you only accept jpeg and jpg images only
** so you can try another sites like wikipedia **

I was able to solve this by making sure that the url from ngrok tunnel in the bookmarklet.js and bookmarklet_luncher.js starts with https not http
Instead of this http://127.0.0.1:8000/static/js/bookmarklet.js?r= it should rather be
https://127.0.0.1:8000/static/js/bookmarklet.js?r=

After 4 hours of doing everything... googling, deleting code, and rewriting code...
Only had to hit Ctrl+C to stop server and re-run server .
Just take a break and come back to fix it :)
Mine works same as instructed in the book – no changes, no nothing.
Only restarted the server.

Related

atom.io : Open Files via Clickable Links within Javascript Comments

Is there way, in Atom, to open files that are mentioned in comments?
When I edit a code file, there are often other code files of interest that I may want to also open while working on that file. Sometimes these reference files are miles away and require numerous steps of navigation to open them via the left-pane tree structure.
I was thinking, it would be nice if I could put relative file paths into javascript comments in a manner that atom would understand that if I click that path it should open that file in a new tab.
I suspect this isn't an original idea, so I'm hoping someone can direct me to a solution that enables this type of functionality or make me aware of how it is already enabled but I must use some syntax I'm not currently using.
I found open-project-file and it seems like a nice fit.
Update: I tested it and it works great! You just click on the relative path (whether it is located in code or comment) and by hitting ctrl-shift-o it immediately opens the file in a new tab within the atom editor.

Hosting entire Squarespace website locally and calling files

I am looking to host an entire Squarespace website locally, including all associated files. I have been diligently wgeting all the associated files and replacing the path with local paths. However I hit a snag in the following file:
//- this loads but it's from squarespace, so we can't use this unless we have an active account
//- script(src='../squarespace/scripts/common-82d600baf3cebf62de6b.js')
script(crossorigin='anonymous', src='//static.squarespace.com/universal/scripts-compressed/common-82d600baf3cebf62de6b-min.en-US.js')
Note the commented out section is where I wish to refer to a local version of the .js script. The full script, un-minified, is in the link below: https://raw.githubusercontent.com/lingxiao/Homepage/master/public/squarespace/scripts/common-82d600baf3cebf62de6b.js.
The problem is that part of the website still loads as intended, but a lot of the effect is gone and consequentially the content is no longer viewable. For example, the original site is here: https://lingxiaoling.me/tech, and when I use the local hosted file, when I scroll down, the TECH ... I interrogate ... page remains static.
However when I use the squarespace hosted file, the page scrolls down as intended.
I tried examining the common-####.de6bjs file and nothing in it jumps out at me. Is the notion of ripping an entire Square space webpage locally and modifying it insane?
Assuming you're just doing this as an exercise:
Open the sqarespace site you want to download, e.g. https://www.missionchinesefood.com/
Choose in Firefox (I'm on Mac OSX, might look different in other OSes):
File
Save Page as
Choose type "Webpage Complete".
Firefox will now download all JS, CSS, Images, HTML etc. to the place you defined.
Open the page from there,
open the Developer Tools,
switch to the networking tab,
reload and see which resources are still referenced from the internet.
Download those manually and adjust the downloaded scripts/html files.

Javascript images error in wordpress

After moving to Wordpress the images of weather cannot be retrieved even though the JavaScript code runs fine. Here is the code that I am using to retrieve images in custom.js. The code:
$('#weather').openWeather({
city: 'New York, US',
placeTarget: '.weather-place',
iconTarget: '.weather-icon',
customIcons: 'files/img/icons/weather/'
});
There is something wrong with
'files/img/icons/weather/'
Well firstly when using html the javascript was in files/js/custom.js and the images were in files/img/weather/ it worked but now with wordpress it does'nt work
Your help would be appreciated.
The files folder is in the root directory.
If your files directory branches off the root, then try adding a slash before the word "files", like so: customIcons: '/files/img/icons/weather/'
Else, you may need to provide the entire path http://www.mydomain.com/files/...
ALSO, you're not providing a file name /files/img/icons/weather/icon.jpg
If you moved to wordpress, the paths might have changed. Where do you keep your javscript library?
I would use the debug console from your browser to see what happens and which icons your script is trying to get and then modify the path. (press F12 and click on the "network" tab, reload the page and check for 404 errors)

Is there a way to embed Github hosted javascript in a script tag?

I've had someone submit a pull request for a Javascript library I've got hosted on Github. I'd like to test it in jsfiddle, but I'd like to keep my fiddle script window clean by NOT Copy/Pasting the entire library.
Is there a way to link to the file hosted on Github, and have it served as Application/Javascript?
Basically I want to wire up a very simple fiddle, and add the file hosted on Github as a resource under the "Add Resources" tab.
First, the "raw" URL of the file on GitHub. To get this, click on the file you want, then click the "Raw" button.
Then, on jsFiddle on the left, click "Add Resources". Paste the URL in the box and, click the plus sign.
Now jsFiddle will use your JS file from GitHub.

Zend Framework - tinyMCE - plugin folders are mistaken to be controllers? Help

Hi guys I'm trying to integrate the tinymce plugin however I'm running into problems such that almost every feature which requires a plugin to be rendered i.e the add url popup or add image pop up - it opens an empty pop up window. Even if I try to open it inline I get the same blank popup window.. I noticed that whenever I click on lets say url button in tinymCE it opens with reference to my localhost and because of that I'm assuming my application is mistaking the containing javascript folder to be some controller or action.
How can I fix this please - I've set up mod rewrite to allow clean urls as well as ignore the javascript folder but this is a different issue altogether :(
what should I be looking at here.. I can't notice any error sin firebug..
Try putting .htaccess with following contents into your MCE directory:
RewriteEngine Off
OUCH sorry - I figured it out ... apparently I had set up my htaccess file to ignore file extensions of images but the templates loaded had a file extension of .htm... just added the new extensions to the htaccess and got it fixed.. sorry for panicking thanks anyway!

Categories

Resources