I'm editing a friend's site using a CMS's WYSIWYG editor - in the HTML source (viewed by clicking a button like or something), I added a <script></script> tag with some JavaScript in. However, this JavaScript had a tiny error (I missed out a semi-colon or something) so it now has an error. When I try and load the WYSIWWG editor again, it doesn't show the toolbar with the Source Editor button anymore, as it was controlled by JS, and because there is a fatal JS error on the page, none of the JS works. So I can't access the HTML source now to correct my error.
I've tried to edit the HTML source in the Chrome Web Inspector to correct my error, but unlike with editing JS, you can't save HTML locally in the Web Inspector and then reload with your changes. Do you have any idea how I could fix this? All I need to be able to do is get the JS working and then I can go in, press the HTML source button in the Editor and correct my error permanently. Something else I thought of was correcting my error in the DOM Tree, and then reloading the JS via the Web Inspector console or something, and hopefully the toolbar would appear, now that the inline JS is correct.
Related
For some reason, I can't find the problem or issue why I cannot use simple javascript code to update browser's tab text.
I'm doing a Shopify Application using Rails, which will be embedded and iframed to shopify.
I have a simple function to update tab title.
ex.
// jquery lib is loaded already....
$(function){ // i tried window on load as well
document.title = 'Sample';
}
But running it in browser's console has no problem.
No error shows in console, but not working... confusing...
I tried to make simple html file and it works there, only having issue when i put the code in my rails app, that being iframed in Shopify.
Any idea out there?
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.
I am new to coding and trying to make a chrome app which basically displays a bunch of fake error messages. I called to the image with a button, but the image is not showing up. Could someone please help and tell me what I am doing wrong?? Here is the code;
I was having some trouble with the putting the code in, so...
http://pastebin.com/iTtmLVE5
There's nothing wrong with ur code, but with its implementation. First open console (F12) and check if js file has been loaded properly. Also You should really consider where to put ur external javascript files. Usually they are placed in html head tag or just before closing body tag .
The difference between both of them is that, if u place js file in header, its loading priority is high, so it loads before DOM (Document Object Model, so just a HTML structure) and when u place it before body closing tags, DOM will load first, so user can see inetrface faster (Since js is loading after browser renders it).
After copy & paste of ur code and making a little cleaning it works. What i've done was deleting all unneccessary HTML code, changing js file name to something more expressive (in my case script.js) and everything worked well.
how is it going?
I'm having some trouble with the visual composer for WordPress...
I was testing a widget, so I inserted some HTML and JS on an element inside the VC on the Home, and Saved the Page. Everything look good on the output, but when I try to edit the page again through the Admin panel, I get errors refering to the Script previously added, and the VC does not load.
So, I can't open the element to remove the Script, and I can't seem to find this content anywhere on the database (searched wp_posts), so I can do it manually.
Anyone have ideas on how to possibly solve this?
I reeally didn't want to overwrite my database just to fix one page.
Thanks in advance.
Ok, so my husband got it...
What he did was this:
Inspect the element of the Visual Composer disabled textarea, remove
the class disabled.
The content showed up, not configured, but still.
Then, find the real textarea behind tinyMCE and its content.
Beware that the content is all encoded, so you will not find any "
or < or any HTML tags, so you better search for key words.
Remove the problematic part of the code, in my case, the script tag
and Publish the page.
Problem solved. Without overwriting all database.
Thank you all for trying to help. :)
Given a webpage that uses lots of javascript to generate its HTML, how can I get the final computed HTML being parsed by the browser instead of the source HTML? In other words, presume a page has lots of tags surrounding javascript functions that, when called, return some HTML. When I view the source of the page, I see the script function call, not the HTML it produces.
How could I get all of the HTML produced by a webpage?
I've noticed that Firebug appears able to see the HTML instead of the scripts, but it doesn't appear to have any way to save the whole page, only little segments of it.
Update:
Thanks for all the answers. However, I'm still not getting the HTML I see in Firebug's console with any of those techniques. For my example page, I'm using the 'Info' tab of my own Facebook profile. If you view source on that page, you'll see lots of scripts with the title 'big_pipe.onPageletArrive()'. However, if you look at it in Firebug, each of those function calls renders out to HTML. I tried the right-click on the tag in Firebug, the View Generated Source in the Webdev Toolbar, and the Chrome suggestion, but they all give me the script call, not the HTML.
Any other ideas?
Update 2:
When I said each of those functions renders out to HTML in Firebug, I wasn't quite correct. They only render out if I select them in the page and right click->Inspect Element. Then it appears to render it out. So maybe my question has become how do you get Firebug to automatically render out all of the HTML so you can select and save it? (Or I'm open to any other solution for grabbing this HTML).
With Firebug's HTML tab, you can right click on the <html> element, and click "Copy HTML".
You can do the same thing with Developer Tools in Chrome/Safari.
The Web Developer Toolbar for Firefox has a "View Generated Source" option which provides this functionality.
with (window.open("")) {
document.open("text/html");
document.write("<!--\n"); //for live version delete this line
document.write(opener.document.documentElement.outerHTML.replace(/</g,"<").replace(/>/g, ">"));
document.write("\n//-->"); //for live version delete this line
document.close();
document.title = "DOM Snapshot:" + opener.document.title;
focus();
}
Open console
copy paste the above code and execute
it opens an empty page,
now inspect the page with right click or f12,
copy outerhtml of the comment
paste wherever you want
optionally remove the comment at the start and end
If you want a live version that is clickable, then simple leave out the comment tags in the above code.
document.getElementById('awesomeness').textContent = document.documentElement.outerHTML.replace(/<\/\w+>/g, (e) => e + '\r\n');
<div id="awesomeness" style="overflow:scroll;width:100%;height:100%;white-space:pre;"/>
so yea, use that...
I was having problems with a page generated by Javascript: the content would only render if the page was scrolled down, so the copied HTML was incomplete. This happened to me with all suggestions based on Chrome.
This issue was solved by the following trick:
Open a console, then type a zoom that will render the entire page (or desired contents), e.g.
javascript: document.body.style.zoom = 0.1
Copy the HTML as per other suggestions, e.g.
copy(document.querySelector('html').outerHTML)
When pasting, search the text for "zoom", then revert the value to "1", save the HTML.
It is not possible generally. Here is excerpt from my bookmarklet which relies on non-standard outerHTML:
with (window.open("")) {
document.open("text/html");
document.write("<PRE>");
document.write(opener.document.documentElement.outerHTML.replace(/</g,"<").replace(/>/g, ">"));
document.write("</PRE>");
document.close();
document.title = "DOM Snapshot:" + opener.document.title;
focus();
}
Note: DTD is missing and not retrievable at all.