Javascript code for changing browser's tab title not working - javascript

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?

Related

HTML is displayed after few seconds even the code is loaded

I've a strange behavior with my web site.
When I open a page (any page) the code is loaded but browser display the content only after few seconds.
I've tried to print a console.log to see when it appear, and it appear after the code is loaded, as I expect it to do, but the content of the page is display after few seconds...
This behavior occurs when I switch my web site to a specific language, while with the other language everythings works fine.
The code is the same except for the text.
Do you know why?
Maybe the i18n system you are using require a little time to map the frontend string with translation, without full code snippet that reproduce the issue is difficult to tell.
no, I've found that the problem is the script of google optimizer...
I loaded the script but I didn't use ga('require', 'optimezer_coded') for this language.
If I remove the script that load optimezer or I insert ga('require', 'optimezer_coded') it works.

djangobyexample book - jquery bookmarklet not working at all

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.

Reload page's JavaScript after editing HTML in Web Inspector

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.

Gmail Chrome Extension "chrome.extension" undefined

I have a content script running inside the Gmail UI and I am injecting some new HTML at different points. This is all working, but to keep the code clean I wanted to insert pre-defined HTML markup into certain parts of the page in a single function call.
This all seems feasible using chrome.extension.getURL(), but when I was testing this, it looks like chrome.extension is undefined! I was unable to find anywhere in the documentation that says this shouldn't be defined and several places where it says it should.
I am using chrome Version 39.0.2171.95 (64-bit)
Here is what the chrome object looks like in the javascript console:
First off, anyone know why chrome.extension might be undefined? Secondly, is there another (perhaps better) way to do this? I'd rather not just programmatically inject a large amount HTML into the page in code using jQuery, etc. in the content script, but can resort to this if there is no other way.
If you're testing this in the console, you must be aware of the concept of the Isolated World. When you add a content script, it has a separate JavaScript context for itself that is isolated from the page.
At the top of the Console tab of Dev Tools, you'll see <top frame> in a dropdown. This is a dropdown that selects JS context it is executing in. It will list frames inside the document and all extensions that have content scripts injected.
The chrome object you show in the screenshot corresponds to what the webpage normally sees. If you switch context, you'll see a different picture:
In any case, if you are really executing chrome.extension.getURL() in the content script - it will be well defined.
Now, if you injected a <script> tag in the page and tried it in that code - it would fail again, since the code will be in the page context. See this question for this situation.
Finally, most of the Chrome API will not be exposed to content scripts for security reasons. If an API is undefined when it shouldn't be, you may need a background page to do the job for you.

AddThis share button wont work in DotNetNuke

For some reason when I add a HTML module (well the default module added to DNN 5.4) and then add the "AddThis" javascript. While the button shows up clicking on it opens up a new page rather than showing an iframe modal message or on hover a list of popular social media networks to share the page with. Wonder what would be the easiest way to resolve this and why this happens?
This is not a complete answer, but to me it sounds like the AddThis javascript code is never loaded by the browser. When viewing the web page that doesn't workg, open the HTML source and look for the AddThis script tag. It probably should look something like this:
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=..."></script>
If you can not find it, then there is something to work on. If you find it, try to open the URL in your browser and see if you get the javascript.
Otherwise: as always, FireBug (or the tools in IE8) is your friend.
Try copying the addthis script reference and pasting it to the page header tags:
http://s7.addthis.com/js/250/addthis_widget.js#pub=AddThis

Categories

Resources