Im 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.
Im not an experienced JS or Jquery programmer but I did some JS some years back and can read the code however 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 what it should look like when clicked on, this is the part where nothing happens for me
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
the only thing I can see that is different with these compared to the files that came with the book is the indentation is a bit off but for some reason the indentation does seem to have changed a bit when I uploaded to Git and they dont look like that locally. Is indentation important in JS?
I followed the same book with the same examples but didn't had any trouble. Make sure your dashboard.html file is referring to the correct javascript file. If nothing works try to add the bookmark manually, you can see how that's done over here http://www.howtogeek.com/189358/beginner-geek-how-to-use-bookmarklets-on-any-device/ it'll sure to work.
And answer to your last question, Indentation is not as important in JavaScript as it's in Python, as python doesn't use any curly braces "{}" or semi-colons ";". But you can write your entire javascript code in a single line and it'll work because your using curly braces everywhere to tell which line of code ends where.
I agree with all the above. In addition, the following:
Error I noticed in the book:
In bookmarklet-launcher.js the js function being called from bookmarklet.js is called myBookmarklet(), however there is no function called this way in bookmarklet.js. So, you may want to use the same name in both js files.
Practically speaking however, the bookmarklet will always work because, not finding a myBookmarklet function in memory, bookmarklet-launcher.js appends the bookmarklet.js script to the body element and, being bookmarklet.js a self-invoking function, its content executed (without the need it to being called). There are some additional interesting technicalities here (the key function in bookmarklet.js is not self invoking but it will anyway be always called because of the script checking whether jQuery is present...) but ok, this is more relevant for those busy with the mentioned book (Django 2 by example).
Check whether bookmarkled, once you click on it, is added to the
current webpage:
2.1. Open devtools (F12 on Chrome) and check e.g. in the html head element whether you find the newly added link element containing the css attribute and/or in the body element whether you find the script element containing the reference to the bookmarklet.js file.
2.2. Alternative: Add an alert message on top of the bookmarklet.js script so that it will be launched if it is correctly loaded. Example:
(function(){
alert('bookmarkled loaded!');
var jquery_version =...
Make sure you're trying to use it on a HTTP site only. Since you're serving from same protocol. HTTPS site would always tell say: There is a problem loadingbyour jquery. That's how I solved mine.
dude.I have solved the problems I met like you.
The most important thing is that noticing the syntax error(without warnings),mainly caused by ignoring blank.
for example, in the line:
jQuery('#bookmarklet .images').append('<img src="'+image_url+'"/>');
between #bookmarklet and .images should lie a blank space,because of jquery syntax rules(meaning to search tag with id of bookmarklet and search tag with class equaling images within result previously).
Another two places worth notice are codes containing #bookmarklet .images a and #bookmarklet #close,requiring blank spaces between filter condition.
That's where I found I made mistaks mainly after studying syntax of jquery.
You'd better compare your codes with codes already loaded up to github by someone to make sure there are no more little errors(such as spelling).
Related
P5 JavaScript was integrated with HTML and posted on GitHub. Normally, two parameters could be passed into the code by adding them to the HTML URL. This works when the code is tested locally. This fails when attempting to do this with the HTML page on github using syntax designed to preview the HTML page. Note that a straight up URL, by default, will display the source code rather than a working HTML page on a GitHub project. This is by design. The plan was to use this URL as the target of hyperlinks on the readme.md file. This would demonstrate the working code for visitors of the project.
The following things were tried after reviewing this StackOverflow post. These attempts did now work:
https://rawgit.com/ ... (this downloads the file on clicking the link)
Preview Syntax tried w/ parameters on the URL:
http://htmlpreview.github.com/?https://github.com/TheMitchWorksPro/FlatIronLearningCode/blob/master/index.html?runModeToggle=1&runModeToggle2=1
http://htmlpreview.github.com/?https://github.com/TheMitchWorksPro/FlatIronLearningCode/blob/master/index.html&runModeToggle=1&runModeToggle2=1
Escape second ? in option 1 as in ...\?runModeToggle=1&run...
Put whole URL after first ? in quotes as in http://htmlpreview.github.com/?"https://github.com/ ... "
My code is presented for learning purposes showing how it evolved. Earlier iterations that did simpler things without the parameters display fine. For example:
http://htmlpreview.github.com/?https://github.com/TheMitchWorksPro/FlatIronLearningCode/blob/master/original/index.html
But for the one flavor of the code that needs parameters to work, this is where the trouble is. This post also suggests other things to try but none of them solves the problem. If this URL worked properly, then both parameters would show up as their corresponding numbers in the second line of text on the page, and they would cause certain behaviors when a user clicks (mousepressed) on the page:
http://htmlpreview.github.com/?https://github.com/TheMitchWorksPro/FlatIronLearningCode/blob/master/index.html?runModeToggle=1&runModeToggle2=1
Not mentioned in the original write-up, the code being tested outputs the URL parameters at the top of the page for demonstration purposes as well as using them within the code. When testing this URL from the question:
http://htmlpreview.github.io/?https://github.com/TheMitchWorksPro/FlatIronLearningCode/blob/master/index.html?runModeToggle=1&runModeToggle2=1
Note how the second line shows that the first argument is "undefined" while the other argument is showing up as a "1". I was able to fix the problem by simply adding a dummy argument ahead of the real one. Why this would be the case is currently unknown, but it seems to solve the problem:
http://htmlpreview.github.io/?https://github.com/TheMitchWorksPro/FlatIronLearningCode/blob/master/index.html?arg1=0&runModeToggle=1&runModeToggle2=1
To see the code working in action with all flavors of the arguments, modified URLs have now been added to the Readme file on the main page of this project:
https://github.com/TheMitchWorksPro/FlatIronLearningCode
Trying to troubleshoot some design issues on a website (built with OpenCart), and ran into an issue I've never seen before: an element shows up in Dev Tools but DOESN'T show up in View Source.
How is this possible? And how can I find the actual element?
The situation is, I had to modify the original template (category.twig) to change the "Add To Cart" button to "View"... and it works in the default category view, but as soon as any of the filters are selected, this happens... it reverts to the original view.. but it's still the same file (I added the path into the code itself, just to make sure I'm indeed looking at the same file, you can see in in the Code View portion of the screenshot).
So yeah... trying to trace where this "Add To Cart" is coming from, and being mighty confused as so why it's NOT showing up in View Source. And no, there's no JavaScript targeting the "view_button" DIV and transforming it into "Add To Cart" - I made the "view_button" DIV, it's custom.
Any advice?
Javascript can (and often does) create new elements in the document, that won´t appear on code view becasuse it does not execute javascript. I would advice you to download the entire page and then search for button-cart-text in js files or the whole document.
The document's source does not define the element statically, but the JavaScript creates the element dynamically. This is very common. The dev. tools show you the document as it exists in memory (it's current state), which will include anything that the JS caused to happen, but view...source shows you the actual source code of the static file that was initially loaded.
Source code is what the programmer wrote. Or, in the case of "View Source" in a browser, it is at least what the server responded with, which may have been written by hand or may be generated using various forms of compilation or bundling. A common example here would be a page rendered from templates (e.g. using Handlebars).
Live code, or at least live markup, is what you are seeing in the Elements pane in the browser console. You are seeing the DOM rendered in realtime, right before your very eyes. You are watching the program (i.e. the page and its subresources) execute and take effect. It is mutating, most likely due to JavaScript.
For extremely simple pages like example.com, the difference between the source code and the live code may be imperceptible, because nothing is modified at runtime. However, for more complex, real-world websites, the DOM is often modified while you are browsing the page so that it can respond to your clicks, your typing, or anything else. These modifications are extremely powerful and useful. However, as you have discovered, they make the source code and the live code diverge. This makes a programmer's life more difficult, while making a user's life easier.
I have some HTML and javascipt that is generated automatically through a URL. This html and javascipt is generated using Smarty templates. Unfortunately, this code that is generated uses a bunch of jQuery, but the references to the jQuery libraries aren't included in the code and so generate errors. I can't change this. Below is an example of the first part of that javascript that generates the error 'Uncaught Reference Error: cj is not defined'
<script type="text/javascript">
cj( function() {
var element_date = "#birth_date_display";var element_time = "#birth_date_time";var time_format = cj( element_time ).attr('timeFormat');
cj(element_time).timeEntry({ show24Hours : time_format, spinnerImage: '' });
var currentYear = new Date().getFullYear();var alt_field = '#birth_date';cj( alt_field ).hide();var date_format = cj( alt_field ).attr('format');var altDateFormat = 'mm/dd/yy';
switch ( date_format ) {
case 'dd-mm':
case 'mm/dd':
altDateFormat = 'mm/dd';
break;
}
What I can do though, is add code onto the end of the file. So I am able to load the relevant libraries and simply enter the same javascript code again, and it works fine.
The problem I am running into is that I am trying to do some styling of the page using jQuery also after the fact. The line below is giving me the problem. Everything gets wrapped fine, but my javascript file just exits on this row,
$("#editrow-email-Primary, #editrow-phone-1-1, #editrow-birth_date").wrapAll("<div class='grid-group personal' />");
again with the same error 'Uncaught reference error: cj is not defined. It is the editrow-birth_date div that most of the previous javascript is for as it uses the jQuery UI datepicker. The funny thing is, simply appending the same javascript and jQuery at the end of the file works fine, until I just to .wrapAll. Then it seems to be trying to run something again in the original javascript and generating a new error and exiting.
I'm completely stuck here, and I don't even know how to properly explain what I think is going on. Is there a way that I can remove the original javascript from the code on the fly so that it can't be executed anymore? I don't think so, but I am hoping so as I feel like that would solve my problem.
Wrap pulls all of that HTML out of the page and sticks it in HTML built from the param for wrapAll and then you stick the whole bundle back on the page which means you're slapping that same script file back onto the page I assume. Any time a script tag is dropped into a page, all of its JS executes. Now I'm going to edit and make some other suggestions when I've figured wtf is going on with this app but that's your problem with the bonus firing.
Additional:
Okay, so I don't know what Smarty is. Whenever I see a Smarty-related question, something horrifying is going on so I don't even want to know. If you have any control over the app in general, you should be able to add Script tags before jQuery happens. Ideally before this tag gets appended. At the very least, add an empty function called cj before this happens to avoid the errors and then figure where the real cj is so you can plug it back in.
But regardless, if you don't have control of at least most of the HTML, get a stick and hit somebody with it until they promise to stop making horrifying technology choices and restore control of the HTML to you, the guy who is supposed to be working with the damned HTML and JavaScript to get things running.
Or show them this. I've been at this six years now. These kinds of problems should not be allowed to happen. Technology that robs us of control of our own app gets crumpled up like a paper ball and tossed over your shoulder because you will never get that time back.
Why do I get a blank tab content area on Magento's Category edit form?
Background
In Magento, I've added an input_renderer to a custom category attribute that produces a drop-down menu (select). The job of the renderer is to append a bit of JavaScript that listens for change events on a "parent" drop-down, and populate itself with options based on the value of that parent drop-down. Here's what I have:
This works fine in my development environment. But on staging, as soon as the General tab content is fetched (which includes my JS code), the content area collapses and goes blank:
No JS errors thrown in the console
No Warnings/Errors thrown in server logs
This only started happening after adding my JS code
I posted a related question last week because I was frustrated that I couldn't find a problem with my JavaScript code. So now I'm coming at it from a different angle.
Others have reported a "white screen" issue, but no solutions given have worked for me.
Any pointers? If you are curious to see my source code, here's the input renderer:
https://gist.github.com/vbuck/5310724
Looks like you're doing some funky stuff with your ajax url. My suggestion is to debug it before moving on.
Can you see the call in your network tab?
Console.log the final url and try it in a new window.
You are inserting params in the url after it has been generated... Does that really work?
It's an admin module, why aren't you using:
Mage::helper("adminhtml")->getUrl()
On a side note,
<code>
script language="text/javascript"
</code>
is considered bad practice and you should use
<code>
script type="text/javascript"
</code>.
It's probably not the source of your problem though.
Hope you got some good pointers.
Just for the record, it was an issue with a bad variable assignment. I moved the JS into its own file, loaded via a layout update, then initialized it from the block (in getAfterElementHtml). It was here that I discovered one of my variables was not being assigned because of a syntax error in a block method.
I'm creating firefox addon to add onclick event to the specific button. ("input" element)
The button is placed in http://example.com/welcome#_pg=compose
but when I open the page, following error occures:
TypeError: document.querySelector("#send_top") is null
#send_top is id of the button which I want to modify. So, the button is not found.
This error occurs because http://example.com/welcome and http://example.com/welcome#_pg=compose is completely different pages.
In this case, the addon seems loading http://example.com/welcome but there is no button whose '#send_top' ID.
When #_pg=compose anchor is added, the button is loaded by JavaScript.
How can I load http://example.com/welcome#_pg=compose to modify the button?
Three thoughts to help you debug this:
to correctly match the url you should consider using a regular expression instead of the page-match syntax - this might allow you to react to the anchors in a more predictable way
I've found that when using content scripts with pages that are heavily modified by JS, you can run into timing issues. A hacky workaround might be to look for the element you want and, if it isn' there, do a setTimeout for a 100 milliseconds or so and then re-check. Ugly, yes, but it worked for some example code I used with the new twitter UI, for example.
You can use the unsafeWindow variable in your content script to directly access the page's window object - this object will contain any changes JS has made to the page and is not proxied. You should use unsafeWindow with great caution however as its use represent a possible security problem. In particular, you should never trust any data coming from unsafeWindow, ever.