Chrome not recognizing jquery plugin - javascript

I am trying to use jquery autocomplete plugin in my application.
It works well on IE and FF
Chrome is behaving wierdly and not calling the function.
<script type="text/javascript" src="/GIM-WebUI/jquery/jquery-latest.js">jQuery.noConflict();</script>
<link rel="stylesheet" href="/GIM-WebUI/jquery/autocomplete-main.css" type="text/css" />
<script type="text/javascript" src="/GIM-WebUI/jquery/autocomplete.js"></script>
I kept alert dialog box in my autocomplete function. Both FF and IE pop up the alert message but not chrome. Am I doing something wrong here?
Its erroring out when I call .autocomplete on some dom element. Thank you.

I suspect the problem is here:
<script type="text/javascript" src="/GIM-WebUI/jquery/jquery-latest.js">jQuery.noConflict();</script>
-^- -^-
A script tag may either have a src attribute or have code content, not both; from the docs:
If there is a src attribute, the element must be either empty or contain only script documentation that also matches script content restrictions.
I suspect you probably want:
<script type="text/javascript" src="/GIM-WebUI/jquery/jquery-latest.js"></script>
<script type="text/javascript">jQuery.noConflict();</script>
...but only if you really want jQuery not to use the $ symbol (e.g., you'll always use the jQuery symbol instead).
Off-topic: Chrome has a good set of tools built-in for helping you diagnose problems. Press Ctrl+Shift+I to see them (or select the Developer Tools from the wrench menu in the upper right-hand corner). You can look for errors in the Console, set breakpoints, walk through code in the debugger, etc...

Related

Javascript working in JSFiddle but not in browser [duplicate]

I'm trying to run the following code, written on my local machine:
http://www.jsfiddle.net/WShdx/3/
Functionality-wise (ignore the broken images in the previous and next buttons, and the wrongly-sized main images) the click/hover function is working properly in jsfiddle. However, on my local machine it's not working at all.
For all intents and purposes the code is identical, except the local copy has this head section to load in the javascript/css files that are contained within the jsfiddle page:
<head>
<title>Jquery Wizard</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="wizard.js" type="text/javascript" ></script>
</head>
Is there some wonderful function of jsFiddle that is making my code magically work, or am I missing something here?
You chose to run the script-code "onload" on jsFiddle, that's the difference.
Without onload it will not find $('area') , because your script is placed inside the <head>, where the elements inside the <body> are still unknown.
I'd also advice anyone who run into such errors to use firebug or any debugging tool debug the script whenever such problems occur. Might be very simple yet frustrating problems like an Uncaught SyntaxError: Unexpected token ILLEGAL error. Debuggers come in very handy!

colpick doesn't work on .html to .php extension change

im using this Color Picker Jquery plugin (http://colpick.com/plugin)
Problem is, i tried same simple code in in .html but when i change just extension to .php, the Color Picker doesnt work, while everything else works.
A simple button and added the important scripts like colpick.js and colpick.css.
Example:
index.html
<html>
<head>
<script src="jquery-2.1.3.min.js"></script>
<script src="canvasSettings.js"></script>
<script src="colpick.js" type="text/javascript"></script>
<link rel="stylesheet" href="colpick.css" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<button id="idColor">Show Color Picker</button>
</body>
</html>
canvasSettings.js
$(document).ready(function()
{
alert("First");
$('#idColor').colpick();
alert("Second");
});
So in index.html, when you click on button, it opens the Color Picker and both alert's show up, all good here.
Problem is, when i change index.html to index.php (when using an php server), the site loads up normaly, button shows up and "First" alert shows up.
But when it reaches the $("#idColor").colpick({}) it doesnt process, "Second" alert doesn't show up.
Have in mind that $("idColor").val() works.
Is there any special way to change this .html into .php even tho the html code is the same?
You've misdiagnosed the problem. It has nothing to do with serving up the HTML from PHP instead of a static file.
Here you load jQuery:
<script src="jquery-2.1.3.min.js"></script>
Then you load the plugin which binds itself to jQuery:
<script src="colpick.js" type="text/javascript"></script>
Then you load jQuery again (but a different version):
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
This overwrites the previous jQuery object and the colour picker plugin that you had bound to it.
Decide which version of jQuery you are going to use (the faster 2.x or 1.x with support for old versions of IE).
Load it before you load the plug in (you are currently doing that for 2.x but not 1.x)
Don't load the other version
SOLVED!
The problem was caused by:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
after i removed that, it worked.
Still need to find a bypass around that, why it caused the problem.

Disparity in View Page Source and View in Firebug

I want to know how these analytics and advertisers are called from 'online.wsj.com' HTML source. Upto the following point, HTML code in Firebug is consistent with the one in I accessed via 'view source page'.
Firefox view source page:
<'!--[if IE 8]><'link rel="stylesheet" href="http://sc.wsj.net/djstyle/1/ie8/ASIA_WSJ/0_0_WAH_0001_public-20140522122816.css" type="text/css" /><![endif]-->
<'script type="text/javascript" language="javascript" charset="utf-8"><!--
var userName = '(none)';
Firebug:
<'!-- [if IE 8]><link rel="stylesheet" href="http://sc.w… -->
<'script type="text/javascript" src="http://beacon.krxd.net/optout_check?callback=Krux.ns._default.kxjsonp_optOutCheck"><'/script>
<'script async="" src="//cdn.krxd.net/ctjs/controltag.js.36fec01aa23444783514e74efb6b7d64"><'/script>
<'script type="text/javascript" async="" src="http://cdn.cxense.com/cx.js"><'/script>
Is it 'jsexec' calling these third-party domains?
PS: I am newbie to web-programming and I would highly appreciate you kind input.
Thanks.
The View Page Source option in Firefox shows you the raw HTML source as it came from the server.
The HTML panel inside Firebug on the other side provides a live view on the HTML source. That means it is updated on changes done to the HTML structure through JavaScript.
These changes can also be expanded and highlighted within the panel checking the options Highlight Changes and Expand Changes within the HTML panel options menu:
To answer your question: Yes, the third-party scripts are added dynamically via JavaScript.

External JavaScript Files will not execute in IE9

The following is a snippit from my a little web page I'm putting together.
<script type="text/javascript" src="head.js">
</script>
<title>CPST 3410-85 Class Template</title>
</head>
<body onload="outputToDiv();">
The head.js file referenced in the script tag is below:
function outputToDiv() {
alert("JavaScript is working!");
}
In Chrome and in Firefox the alert is displayed indicating the JavaScript is working. In IE9 it is not. Furtermore I can't get ANY external script to run in IE9, regardless of the content. I have used custom security settings and lowered in a granular way every security setting to its lowest level, and gone into advanced settings and enabled literally everything I could find.
It should be noted that I am opening this from a local folder. All files are in the same folder, and again I stress that this works in firefox and chrome.
In IE9 I have enabled debugging and I get the error below:
Webpage error details
Message: Invalid character
Line: 1
Char: 1
Code: 0
URI: file:///E:/My%20Documents/My%20Web%20Sites/CPST341085/head.js
Of course it then tells me that "outputToDiv()" is undefined.
I am at a total loss here.
I got this behavior when I had:
<script type="text/javascript" src="jquery-1.7.1.js" />
However, this fixed it:
<script type="text/javascript" src="jquery-1.7.1.js"></script>
Go figure...
David

Modernizr help?

I can't seem to get modernizr to work on my website. I have added the javascript files into a folder and called to them. I've also added no-js to the html but still nothing.
When I view source, it doesn't populate the html like it should.
I'm not using it for css3 elements yet so I don't need any fallback styles, I just want to be able to use the more semantic tags like header, nav, footer etc...
This is my document code:
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset=utf-8>
<title></title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<script type="text/javascript" src="/js/modernizr-1.7.min.js"></script>
Ran into this problem myself. Make sure you view the page during run-time. When you view the page source, js calls are not executed and it will not replace the no-js. If you are using Chrome then use their element inspector.
It is most likely a path issue. Try temporally replacing
<script type="text/javascript" src="/js/modernizr-1.7.min.js"></script>
With
<script type="text/javascript" src="http://ajax.cdnjs.com/ajax/libs/modernizr/1.7/modernizr-1.7.min.js"></script>
Or it could be working, but it's not obvious. Keep in mind you don't see the Modernizr classes when you view the source, you need a tool like Firebug on FF or the Developer Tools on Chrome to actually inspect the post-javascript code.
An additional test would be doing something like...
.borderradius body {
background: #c00;
}
And if the background is red, then Modernizr is running.
You don't have any styles here but maybe you haven't defined your HTML5 elements as display: block? Modernizr doesn't do that by itself and so you still won't get the results you expect if you don't add that into your CSS.
For the record I had this issue too. After a long time testing I found that removing the 'Add CSS Classes' option from the custom build was causing it for me.

Categories

Resources