I am trying to add JS code to my HTML document. I am simply testing the functionality, so I am trying to create and display some text when an event occurs.
I seem to be missing some key component. Can anyone see what I am missing or if my html/js is causing the problem?
You have 2 mistakes.
In javascript, you defined it refresh() but called refesh() in the HTML.
In the refresh() function, you define div1 element but in the last line you append not exist element div
It appears that you have linked your javascript just fine.
However, your function, refresh(), was spelt wrong in your HTML,
You wrote refesh() in the HTML, and in your javascript, you called it refresh().
Totally understand, these problems are killer in the early days!
Cheers
Related
This is about calling the initialize function for the Google Maps API. I would prefer to call it at the end of the HTML instead of putting it in the body onload. It appears to be working, but is there anything wrong with this approach?
The Google API code I am referring to can be viewed at Place Autocomplete Address Form.
This is not a duplicate of window.onload vs <body onload=""/>.
Or this closed one, Unobtrusive JavaScript onload function.
It is closest to this one: Initializing JS components at the end of HTML or on "onload"?
However, my question is not generic.
That's just personal preference. Both ways work fine.
They probably used the onload handler because it appears to be more foolproof.
If the code was at the end of the file, some people might copy it and happily edit around without fully understanding why it is written at the end of the file and then later on shoot out a bunch of posts asking why their code isn't working.
I am working with ruby on rails and I want to test some things out.
I have used this simple code to change the innerHTML of my body:
document.body.innerHTML = "Work will you?";
It doesn't bring any results.
I know my javascript file works correctly because i tested it with the: alert() function
When i put the document.body.innerHTML into my file it breaks the javascript (the alert no longer works)
Anybody knows whats could cause this??
You must be running your code from within the <head> tag. document.body doesn't exist at that point. You have to wait for the DOM to be ready. You can do that using something like jQuery's $(document).ready() http://jsfiddle.net/L83mL/
Credit to https://stackoverflow.com/users/1013842/david and https://stackoverflow.com/users/400654/kevin-b
I'm writing a userscript. What I'm trying to do is really simple. I need to block the UI while the script does some background tasks. I saw this method in another SO question and I changed it a bit to suit me.
Check this fiddle. When you click on the button, it covers up the UI.
Now since this is gonna be used on a webpage, I need to inject the following HTML part to the webpage through the script.
<div id="blocker">
<div>Loading...<img src="http://www.socialups.com/static/images/fbinventory/ajax_loader.gif"></div>
</div>
I did it like this.
var blockUI = document.createElement("div");
blockUI.setAttribute("id", "blocker");
blockUI.innerHTML = '<div>Loading...<img src="http://www.socialups.com/static/images/fbinventory/ajax_loader.gif"></div>'
document.head.appendChild(blockUI);
Check this fiddle for a clear idea.
But it does not work. I tried several ways to tackle the problem but to no avail .Can anyone please point out what I'm doing wrong here?
Thank you.
P.S - I need to do this without using jQuery or the library blockUI.
You are trying to append stuff to head; append it to body instead.
http://jsfiddle.net/dAKQX/
Don't put the block div in the head section of your document. Use document.body.appendChild(blockUI); instead.
you need to append your div to the body of the document. See: http://jsfiddle.net/zkzQy/1/
or like this in your code:
document.body.appendChild(blockUI);
i write some html with JS into a div.
like this
$("#picdiv").html("<a rel='lightbox' href='pic.jpg'><img src='htumb.jpg'></a>");
it is just an example.
So, i have in $(document).ready Funcktion this code.
$('a[rel=lightbox]').fancybox();
but if i click on the link, a get to the page with picture... i know the Problem must be, i write the html with js, but i have no other option. So haw can I make fancybox works?
This is due to how jQuery works. The fancybox function will only work for current elements on the page and not ones dynamically added by javascript.
A quick fix might be to be modify the code as follows:
$("#picdiv").append($("<a rel='lightbox' href='pic.jpg'><img src='htumb.jpg'></a>").fancybox());
Not sure if the above will work, but the general idea is to ensure that any new elements created have the plugin applied.
solution
$('.picture_display').find('a[rel=lightbox]').fancybox();
I'm trying to call a simple function with alert but it wont work when i try call the function (contained in an external js file) from my html page.
I have a import and the call is very simple. Any suggestions?
<head>
<script src="/js/jsFunctions.js" type="text/javascript"></script>
In my code I call
<a href="javascript:displayAlertText('someText');">
Inside the js I have some jquery followed by a function
function displayAlertText(someText)
{
alert('alert' + someText);
}
What you are doing looks like it should work. The problem is likely elsewhere.
Hrefs with "Javascript:" prefixes are really rather horrible. Instead, try rewriting that as:
<a href="#" onclick="displayAlertText('someText'); return false;">
Beyond that (which I don't think would actually be causing it), you've committed the cardinal sin of saying "It didn't work". Did you get any Javascript errors in the console? I suspect you would have, unless a valid function really was called.
Also, try calling the JS function explicitly from within a <script> block on your page, to see at what point it's failing.
Double-check as well that the external file really has been loaded at the time you click on the link - perhaps put a line at the bottom of the external script file to help check this, such as
alert('External file loaded.');
EDIT (based on comment): OK, so we've established you can call the method from "normal" JavaScript on your page. This means that the problem lies with the way that you're trying to call the script from your hyperlink.
Have you passed your HTML through a validator? If the syntax is invalid, then user agents can interpret it however they want, including ignoring it completely.
If the HTML does validate then at this point it might be useful to post a link to your full HTML, so that others can look over it and see where the problem lies. It's possibly something like another function overriding the onclick event for the link, and so your event handler gets lost.
In pure jQuery you would do this like:
$(document).ready(function(){
$('a').click(function(){
alert('here');
})
})
try this instead...
<a href="#" onclick="displayAlertText('someText');">
If that does not help, I would start making sure that your javascript file is loading correctly and doesn't contains some simple syntax error somewhere. View your page with Firebug on in Firefox and look for warnings and errors.
You mentioned jQuery. Is the function standalone or inside a jQuery object (i.e. wrapped inside another function)? This makes difference.
Apart from this problem, the way you invoke the function isn't clean. Move it to the onclick attribute or better make use of jQuery.