We Keep Coding

jQuery - write new plugin - this.foreach doesn't work

I am currently writing a little JS something, and as it might get re-used in my company I want to do it right and write is as a jQuery plugin (jQuery is definitely needed for ease, so I have decided upon relying on it).
Now, I am a relatively experienced developer regarding jQuery, but I have a problem that is probably incredibly simple to solve and still I do not know where I am going wrong.
I included the jQuery file like normal from the CDN, then my plugin file and last of all the js file that I use to test the plugin.
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/jquery.tsnowglobe.js"></script>
<script type="text/javascript" src="js/main.js"></script>
Then I try to define the plugin in the jquery.tsnowglobe.js file.
(function($) {
$.fn.snowglobe = function(options) {
return this.each(function() {
console.log("Test!");
};
};
}(jQuery));
This is obviously only to test wether everything is working or not.
Well, the problem is: I don't get any output when I use my plugin.
I have defined a canvas in the HTML part (I also tried multiple, didn't work):
<canvas id="snowglobe"></canvas>
And then I consecutively try to use the snowglobe-function on it in the main.js-file (which is loaded last):
$("canvas").snowglobe();
Well, the problem is, I get absolutely no output. Now, I think I might have identified the problem: inside my function definition, this is not an array. What really irritates me that all tutorials use the same code as a start, so as far as I see it should be working, and even if I wrap this in an array I cannot access any DOM-element-properties inside the loop, as this in that case does not refer to any DOM element itself.
Thanks in advance for helping me! I am really not sure what I could do to solve this.

Nothing runs in browsers [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I'm new at programming. I've done the HTML, CSS, website build and JAVASCRIPT courses on Codecademy. I've done some of the Eloquent Javascript and got a little lost in the sauce around chapter 5. I saw someone advise on here to take the JavascriptIsSexy route which I've been doing. I downloaded Notepad++ and have started going through "Beginning Javascript" book that is used in that "study guide". My problem is I cannot get anything, and I mean anything to run in a browser. IE, Firefox or Chrome. Even the simplest of things produce no output. The page loads either blank, or shows the first line of HTML and no more. Any blocks, functions and the like never run. White page. 1 or no lines. I've looked around for anyone having similar issues and haven't found it. Which makes me pretty sure I'm the problem here. I'd offer samples of code, but anything you can write in 60 would suffice as a good example. I am saving the files in a designated folder with the correct file types (.html or .js), closing all tags, etc.
Not exactly sure how to continue. I can't keep "practicing" if i cant get anything to run. I've tried using the RUN button in Notepad++ and selecting a browser. I've also tried opening a browser, choosing OPEN and selecting one of the files. I've even directly copied and pasted code right out of the book and tried to run it that way to make sure it isn't just a bug on my part. Same result.
I also tried writing and playing with codes in the "console" of IE and Chrome, but I can't get either of them to respond as I have no idea how to use them.
If this is a really dumb question or I haven't given you enough info to try and help me out, I apologize. I would appreciate any help you guys could throw out there.
Thanks.
First of all, you guys are awesome. I thought I'd be waiting for a couple days for some help. Seriously, that's cool. Here's a bit of code, one of the first examples the book has you run in a browser.
<html>
<body bgColor = "WHITE">
<p>Paragraph 1</p>
<script type="text/javascript">
alert("First Script Block");
</script7>
<p>Paragraph 2</p>
<script type="text/javascript">
document.bgColor ="RED";
alert("Second Script Block");
</script7>
<p>Paragraph 3</p>
</body>
</html>
Like I said. Very simple... I get nothing. Thanks again for the quick responses. You guys rock.

Open a new file in Notepad++ and add:
<!DOCTYPE HTML>
<html>
<body>
<script>
alert('This Should be a Popup Alert')
</script>
</body>
</html>
Save as test.html, make sure to save as "All Files".
Right click on the file, and open with any browser and should run in the browser just fine. Now just adapt the javascript you want to play with.

Not a dumb question at all. This is one of the most common things to try and get used to when you're starting out. So I'll ask you a question because this is the most common thing that newcomers forget - did you load all you files in to your index.html (or whatever your html file is name) file? If you're not sure, go to your website or page, and view source. Do a search for '.css'. If you can't find anything, you haven't loaded any stylesheets. Next do a search for 'script'. If you can't find that, you didn't include any javascript files. Is your site live? You need to FTP to it and upload the files to the server also. Here's a resource for importing your stylesheets and scripts into the DOM. http://webcomponents.org/articles/introduction-to-html-imports/ If you need help with FTP, let me know, I'd be glad to help, as I wish someone would have helped me when I was starting out.

If you are using console.log() to produce output, you won't see it in the browser's window that normally displays HTML. You need to look at the console. On Chrome it can be reached via the menu at View > Developer > Developer Tools.

Can you paste a code snippet in one of your index.html pages, you should try to learn and use xammp.
Install xammp
Once installed click the button "Start" on Apache
Move the project / website your doing into the following directory, make a folder name for it e.g. TestOne C:\xampp\htdocs
open Google Chrome or IE and put the following in the URL
localhost/TestOne/index.html
or whatever your index file of the website your making index.php etc..

You may need to run it on a server. You can make a local sever with tomcat. I hope this commit helps. You can always use a online website to emulate running it on your machine.
thanks,
adbadb25

When you are first learning how to code, I would start with a basic html format. Html,head, closing head,body, closing body,closing html. Inside the body tags, start with something simple. Opening and closing paragraphs tags. "Hello World".

Broken link - "/a" in JQuery 1.9 Js file

When we had done security audit of our project, we got broken Link "/a" vulnerability.
After searching for link throughout project we found link in JQuery-1.9.js java-script file that we are using in our project.
small part of code in that JQuery-1.9.js -
// Make sure that URLs aren't manipulated
// (IE normalizes it by default)
hrefNormalized: a.getAttribute("href") === "/a",
As per my understanding this code part helps for making it(JQuery) compatible with IE 6/7/8.
hrefNormalized is used to check that anchor tag is giving href value as full URL or exact href , which is issue in IE version.
The better explanation of this part is given in
https://www.inkling.com/read/jquery-cookbook-cody-lindley-1st/chapter-4/recipe-4-1
I want to remove this vulnerability but i don't want to remove or change code in JQuery js file.
So, My question is why did not JQuery designers used "/#" instead of "/a" .What is the problem of using "/#" in that code.
Earlier same question is asked by someone to JQuery Team,but they told that it not the problem from Jquery.
For reference of that ticket
http://bugs.jquery.com/ticket/10149
Help me to solve Or Is there another solution?
Thank you

This is not a vulnerability but a false positive. The security scanner interprets the "/a" string as a link, which it is not.
Even if jQuery creates the link in the DOM, it's not clickable or visible to the user. Your website does not actually have a real link to /a anywhere.
I would ignore the problem without changing anything.

Maybe, if you want this hrefNormalized: a.getAttribute("href") === "/a", to be transformed into this hrefNormalized: a.getAttribute("href") === "/#", but you don't want to touch the jQuery file.
Put that second one in a script in a an order so that the browser reads your script after reading the jQuery file, so it mashes.
Anyway, I never had issues with jQuery before, check your code first.
If you don't want to have your views with scripts, put it in a js file and link this file to your view after the jQuery file.
Hope it helped you, or at least gave you some ideas to solve your problem. Good luck, let us know how it goes! ;)
EDIT:
<script src="~/JQuery/jquery-2.0.3.js"></script>
<script src="~/Scripts/Fix.js"></script>
If you do something like this, the browser reads first the jQuery, then it reads the Fix.js. Inside the Fix.js, you put the function or paramater you want to change from the jQuery.
So the Browser will get the latest one it reads if they are equal.
For example:
function whatever (){ //This in jQuery file
//things #1
}
function whatever (){ //This in Fix file
//Different things #2
}
This way the browser chooses the Fix.js one, because was the last he read.

Has Chrome browser broken dynamic script loading?

This isn't my code, I'm just troubleshooting it. Some code that has been working for over a year has now stopped working in Chrome (12.0.742.122), but works in the other "big" browsers (including fellow WebKit stablemate Safari (5.0.5)). By "not working anymore" I mean that although the script file does load, it doesn't execute. The kind of behaviour you'd expect if loading a script into innerHTML or writing it into a div, but neither of which things are being done. The commented-out lines below were all failed attempts at getting it working, the first of those being the original code that had worked up until recently.
<div id="abc"></div>
<script type="text/javascript">
var d=document.getElementById("abc");
var s=document.createElement('SCRIPT');
if(s){s.src=script_path;}
//if(d)d.appendChild(s); //original line that still works in all other browsers
//if(d)d.parentNode.appendChild(s);
//if(d)d.parentNode.insertBefore(s,d);
//if(d)d.parentNode.insertBefore(s,d.nextSibling);
document.body.appendChild(s); //this works, script executes
</script>
What is wanted from this code above, is that the script is a child of the div. Presumably they want to be able to remove that child and have all script be removed at the same time (I'm not sure of their motivation).

I've discovered what the problem was, largely thanks to Martin Bieder's back and forth and introducing me to jsfiddle.net with his working example.
The issue was actually the test page and what you'd think would be a fairly harmless error they made in creating it. The div and all of the code will be represented below simply as ######, as it's not even relevant to the problem. It's actually a HTML problem. Chrome 12 isn't happy if you don't match up your closing tags properly. I really can't believe that it has an effect on the execution on script files, but it does. I've tried many many times in the last 10 minutes with the HTML tags right and wrong and unbelievably this really is the problem.
<font><center><b>
##########
</b></font></center>
You see how the font and center closing tags are the wrong way around, and that's enough to confuse Chrome sufficiently that it won't execute any dynamic script being added within those tags. Bizarre. I can't recreate this on jsfiddle, probably due to the nature of the site runs the html/js that you put onto it (using onload for example).

No it works. Google Analytics uses is, too.
var ga=document.createElement('script');
ga.type='text/javascript';
ga.async=true;
ga.src='http://www.google-analytics.com/ga.js';
var s=document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga,s);

Have you tried to set to async the script element?
var script = document.createElement('script');
script.async = 'async';

It is all about 3 things.. Organization, Optimization, and debugging.
1)properly scoping your tags makes things easier to read.
2)properly organizing your code makes it easier to parse which means parsers can be faster and more efficient.
3)alot of the debug tools we use rely on this organization in order to display things like collapsible tags and present a more visual scoping

Part of jQuery code missing?

I am using colorbox which I have used many times for different clients, but it is not working this time and I can not figure out why. I am trying to open a video on YouTube, and then open up some inline HTML, I've copied the code from the examples just as I always do, and replaced what needs to be replaced. There are parts of the script that are missing when I look at the source code from the browser. The website is http://www.powerhousebowling.com. Maybe I'm missing something.
In my backend it looks like this:
<script type="text/javascript">
$(document).ready(function(){
$(".youtube").colorbox({iframe:true, innerWidth:425, innerHeight:344});
$(".open_colorbox").colorbox({width:"50%", inline:true, href:"#inline_text"});
});
</script>
But when I look at the source code in FF or IE it shows...
<script type="text/javascript">
$(document).ready(function(){
$(".youtube").colorbox();
$(".open_colorbox").colorbox();
});
</script>

If the code you are mentioning is inputed in some kind of backend, the software or the server is probably striping the code for security reason. See what happens if you remove de curly brackets and if the code appears then try finding how to insert them following the software's rules ({literal}{/literal} if it is a Smarty template)

I finally found out what was happening about a week ago, sorry for the delay in answering, I was out of the office. The CMS that we use, ExpressionEngine, was thinking anything between the curly brackets were tags for itself, I took the script outside the CMS and pointed to it, works fine! Hope this helps anyone else!