We Keep Coding

Paging is not a function

I use the below script in jQuery pagination:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="~/Scripts/paging.js"></script>
but the below error appeared:
Uncaught TypeError: $(...).paging is not a function
I don't know what the problem can be. Although paging.js is loaded it seems that the code does not see the file.

Use this code, it worked for me.
I think you may not have gotten the jQuery syntax right
<script type="text/javascript">
$(document).ready(function(){
$('#table-demo').paging({limit:7});
});
</script>

jQuery not running locally

I have the following links declared inside the head tag:
<script type="text/javascript" src="javascript/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="javascript/scripts.js"></script>
And the following code inside the scripts file:
$("#person").hover(function() {
// trigger the mouseover event
$("#person-text span").addClass("important-info");
}, function() {
// trigger the mouseout event
$("#person-text span").removeClass("important-info");
});
$(document).ready(function(){
console.log( "ready!" );
});
I have also tried adding the jQuery library through Google and Microsoft CDNs, but it didn't work as well.
Here is a screenshot from the console errors:

I had a similar problem few days back. I moved the custom script tag at the end of the HTML page and the code worked. It generally happens for the $(document).ready() function.
<script type="text/javascript" src="javascript/scripts.js"></script>
Move the above line to the end of your Html page and that should work.

try using $(document).ready(function(){/*your code*/}) and try to change if your browser console showing 404 error for jQuery file
<script type="text/javascript" src="javascript/jquery-3.1.0.min.js"></script>
to
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js
"></script>

Uncaught TypeError: undefined is not a function $

I'm using a asp.net site.
I'm including this script in the header.
<script type="text/javascript">
$('#settings, #agency_text').on('click', function () {
$('#logout').fadeToggle('fast');
});
</script>
then I get this error:
Uncaught TypeError: undefined is not a function

The error means that the jQuery library wasn't loaded (correctly).
First you need to load in the jQuery library to be able to perform jQuery functions.
Add this line above your script in html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
For more info check out this page here: http://www.w3schools.com/jquery/jquery_get_started.asp

add $(document).ready(function(){ });
<script type="text/javascript">
$(document).ready(function(){
$('#settings, #agency_text').on('click', function () {
$('#logout').fadeToggle('fast');
});
});
</script>

I also change my code like this
<script type="text/javascript">
$(document).ready(function(){
$('#settings, #agency').click(function () {
$('#logout').slideToggle('fast');
});
});
</script>
It works with "jquery-1.4.1.min.js" :)

Jquery Conflict which gives error

Working on an project which has variety of functionality in it such as,
Google translator
Image Slider [galleriffic used]
Popup window [Shadow box used]
JavaScript horizontal menu bar*
Now we are getting jquery conflict in it and error message such as
I know such message are occurred when the code doesn't find the jquery file but the files is present .
Here are the list of files used in the project
This is needed by the google translator
1.<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
2. <script type="text/javascript" src="//jquery-translate.googlecode.com/files/jquery.translate-1.3.7.min.js"></script>
3. <script type="text/javascript" src="/scripts/jQuery/jquery.cookie.js"></script>
4. <script type="text/javascript" src="/scripts/jquery.bt.js"></script>
5. <script type="text/javascript" src="/scripts/jquery-ui-1.8.21.custom.min.js"></script>
6. <script type="text/javascript" src="/fancybox/jquery.fancybox.pack.js"></script>
7. <script type="text/javascript" src="/scripts/common.js"></script>
This one is for the slider
1. <script type="text/javascript" src="/SliderBox/js/jquery-1.3.2.js"></script>
2. <script type="text/javascript" src="/SliderBox/js/jquery.galleriffic.js"></script>
3. <script type="text/javascript" src="/SliderBox/js/jquery.opacityrollover.js"></script>
This is for the popup window
1. <script type="text/javascript" src="/SliderBox/js/prototype.js"></script>
2. <script type="text/javascript" src="/SliderBox/js/effects.js"></script>
3. <script type="text/javascript" src="/SliderBox/js/lightwindow.js"></script>
4. <script type="text/javascript" src="/SliderBox/shadowbox/shadowbox.js"></script>
This is needed by the horizontal menu
1. <script type="text/javascript" src="./jquery-1.9.1.min.js"></script>
2. <script src="../scripts/jquery.als-1.1.min.js" type="text/javascript"></script>
3. <script src="../scripts/settingsEN.js" type="text/javascript"></script>
I have optimized all these and have included only one jquery file of jquery-1.9.1.min.js
but still not able to clear the conflict
Here is the sequence used by me
1. <script type="text/javascript" src="./jquery-1.9.1.min.js"></script>
2.<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
3. <script type="text/javascript" src="//jquery-translate.googlecode.com/files/jquery.translate-1.3.7.min.js"></script>
4. <script type="text/javascript" src="/scripts/jQuery/jquery.cookie.js"></script>
5. <script type="text/javascript" src="/scripts/jquery.bt.js"></script>
6. <script type="text/javascript" src="/scripts/jquery-ui-1.8.21.custom.min.js"></script>
7. <script type="text/javascript" src="/fancybox/jquery.fancybox.pack.js"></script>
8. <script type="text/javascript" src="/scripts/common.js"></script>
9. <script type="text/javascript" src="/SliderBox/js/jquery.galleriffic.js"></script>
10. <script type="text/javascript" src="/SliderBox/js/jquery.opacityrollover.js"></script>
11.<script type="text/javascript" src="/SliderBox/js/prototype.js"></script>
12. <script type="text/javascript" src="/SliderBox/js/effects.js"></script>
13. <script type="text/javascript" src="/SliderBox/js/lightwindow.js"></script>
14. <script type="text/javascript" src="/SliderBox/shadowbox/shadowbox.js"></script>
15.<script src="../scripts/jquery.als-1.1.min.js" type="text/javascript"></script>
16. <script src="../scripts/settingsEN.js" type="text/javascript"></script>
I have tried all these
http://api.jquery.com/jQuery.noConflict/
http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/?rdfrom=http%3A%2F%2Fdocs.jquery.com%2Fmw%2Findex.php%3Ftitle%3DUsing_jQuery_with_Other_Libraries%26redirect%3Dno
http://www.w3schools.com/jquery/jquery_noconflict.asp
I have tried all these
<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$.noConflict();
// Code that uses other library's $ can follow here.
</script>
or
<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$.noConflict();
jQuery(document).ready(function($) {
// Code that uses jQuery's $ can follow here.
});
// Code that uses other library's $ can follow here.
</script>
or
jQuery.noConflict();
(function($) {
$(function() {
// more code using $ as alias to jQuery
});
})(jQuery);
// other code using $ as an alias to the other library
but still not able to get the Solution
When I remove this code of slider, every thing works fine , no errors but the slider will not work
<!--script for slider--->
<script type="text/javascript">
jQuery(document).ready(function($) {
// We only want these styles applied when javascript is enabled
$('div.navigation').css({'width' : '', 'float' : 'right'});
$('div.content').css('display', 'block');
// Initially set opacity on thumbs and add
// additional styling for hover effect on thumbs
var onMouseOutOpacity = 0.67;
$('#thumbs ul.thumbs li').opacityrollover({
mouseOutOpacity: onMouseOutOpacity,
mouseOverOpacity: 1.0,
fadeSpeed: 'fast',
exemptionSelector: '.selected'
});
// Initialize Advanced Galleriffic Gallery
var gallery = $('#thumbs').galleriffic({
delay: 2500,
numThumbs: 15,
preloadAhead: 10,
enableTopPager: true,
enableBottomPager: true,
maxPagesToShow: 7,
imageContainerSel: '#slideshow',
controlsContainerSel: '#controls',
captionContainerSel: '#caption',
loadingContainerSel: '#loading',
renderSSControls: true,
renderNavControls: true,
random: true,
prevLinkText: '',
nextLinkText: '',
nextPageLinkText: '',
playLinkText: '',
pauseLinkText: '',
prevPageLinkText: '',
enableHistory: false,
autoStart: false,
syncTransitions: true,
defaultTransitionDuration: 900,
onSlideChange: function(prevIndex, nextIndex) {
// 'this' refers to the gallery, which is an extension of $('#thumbs')
this.find('ul.thumbs').children()
.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
.eq(nextIndex).fadeTo('fast', 1.0);
},
onPageTransitionOut: function(callback) {
this.fadeTo('fast', 0.0, callback);
},
onPageTransitionIn: function() {
this.fadeTo('fast', 1.0);
}
});
});
</script>
<!--script end--->
Can anyone help?

I read your question and search on site of every plugins that you use.
Any List Scroller
Shadowbox.js
Prototype
Galleriffic
If something is missing plugin, publish it please.
I had the similar problem and I not used the $.noConflict(true);
If you project is the server that when this is open for take the file html.
I suggest for you that you insert the calling for external div in one file html.
And in every file html you can write the script with
$(document).ready(function () {
.............
});
You can't calling the file external in every file html because this create a normal conflict.
AND..
I suggest this site for look the last libraries... Google-libraries-last
AND..
I have optimized all these and have included only one jquery file of jquery-1.9.1.min.js but still not able to clear the conflict Here is the sequence used by me
This is better.
AND:::
For the error TypeError: $ is not a function depends how this function is implemented or write.
Possible error is ; or {, } , ( , )
This happens because another javascript library has been loaded and has overwritten the object $() shortcut for jQuery.
So when we include other javascript libraries besides jquery, we are exposing the jquery library to conflicts.
Many JavaScript libraries use $ as a function or variable name, just as jQuery does. In jQuery's case, $ is just an alias for jQuery, so all functionality is available without using $.
One solution if we need to use another JavaScript library alongside jQuery, we can return control of $ back to the other library with a call to $.noConflict() like:
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$.noConflict();
jQuery(document).ready(function($) {
// Code that uses jQuery's $ follow here.
});
// Code that uses other library's $ follow here.
</script>
Another solution is to reassign jquery object $() back to jquery library, wrapping up our call inside a function that reassigns $() object. Thus we make sure our code isn’t messed with Prototype, Scriptaculous, etc.
( function($) {
// Your jquery code
} ) ( jQuery );
Suppose:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js" type="text/javascript"></script>
<script type="text/javascript">
( function($) {
// Assigning $ again to jquery
$(document).ready( function() { alert("Now you can use to use '$' in your jquery code"); } );
} ) ( jQuery );
//this will fail
$(document).ready( function() { alert('This fails because $ has been modified outside jquery'); } );
</script>
This approach is a self-calling anonymous function style to avoid conflicts with jQuery. If you don't use it then you would have to type jQuery() instead of its object $().
Example:
$(document) //won't work
jquery(document) //will work
Example on JSFIDDLE.NET
Finally
Typeerror for null
Look on jquery-documentready-controlid-is-null

try to use .noConflict() in jQuery
<script src="....../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
var jQuery_1_8_3 = $.noConflict(true);
</script>
<script type="text/javascript" src="...../jquery-1.4.2.js"></script>
<script type="text/javascript">
var jQuery_1_4_2= $.noConflict(true);
</script>

I went with this flow and the error was solved. Didn't need any .noConflict() and on!!!
1)<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
2)<script type="text/javascript" src="//jquery-translate.googlecode.com/files/jquery.translate-1.3.7.min.js"></script>
3)<script type="text/javascript" src="/scripts/jQuery/jquery.cookie.js"></script>
4)<script type="text/javascript" src="/scripts/jquery.bt.js"></script>
5)<script type="text/javascript" src="/fancybox/jquery.fancybox.pack.js"></script>
6)<script type="text/javascript" src="/scripts/common.js"></script>
7)<script src="/scripts/jQuery/insert_active_flash.js" type="text/javascript"></script>
8)<script type="text/javascript" src="/SliderBox/js/jquery.galleriffic.js"></script>
9)<script type="text/javascript" src="/SliderBox/js/jquery.opacityrollover.js"></script>
10)<script type="text/javascript" src="/SliderBox/shadowbox/shadowbox.js"></script>
11)<script type="text/javascript" src="/scripts/jquery.als-1.1.min.js"></script>
12)<script type="text/javascript" src="/scripts/settingsEN.js"></script>
The minified version javascript where having conflict with prototype.js. I just removed the prototype.js file and arranged all reference file in sequence [Sequence matters a lot]
Now the error is removed I was still wondering what was the actual issue with prototype.js ???

Simple comet application "org is not defined"

I am trying to update an old cometd javascript wrapper and test client (was 1.3.x) that I have to the newer comet 2.5.1 javascript implementation. I have all of the dependencies and the browser can find them all, yet I am getting errors in Firebug's console (see below)
The head of my HTML is as below:
<head>
<title>CometD Tester</title>
<link rel="stylesheet" type="text/css"href="style/style.css" />
<script type="text/javascript" src="org/cometd/Cometd.js"></script>
<script type="text/javascript" src="org/cometd/AckExtension.js"></script>
<script type="text/javascript" src="org/cometd/ReloadExtension.js"></script>
<script type="text/javascript" src="jquery/jquery-1.9.0.js"></script>
<script type="text/javascript" src="jquery/jquery.cookie.js"></script>
<script type="text/javascript" src="jquery/jquery.cometd.js"></script>
<script type="text/javascript" src="jquery/jquery.cometd-reload.js"></script>
<script type="text/javascript" src="js/myCometd.js"></script>
</head>
All of these are found by the browser. Looking at Cometd.js I see the following:
org.cometd.Cometd = function(name)
{
....
}
So is that not defining org? Note that none of the errors in the Console are from Cometd.js. Otherwise I see no other definition of "org.cometd". I would really appreciate it if anyone can help me out. I am using Tomcat 7 and below is the dir structure:
Thanks.
UPDATE - Further testing
I reduced the header to:
<head>
<title>CometD Tester</title>
<link rel="stylesheet" type="text/css"href="style/style.css" />
<script type="text/javascript" src="org/cometd/Cometd.js"></script>
</head>
And removed ALL JS from the index.html. The only JS now included is the Cometd.js from the comet.org. There is still the same error... coming from the very first line in that script:
org.cometd.Cometd = function(name)
Not sure what I have missed here.
EDIT - Add jquery.cometd-reload.js
This is the contents of the file. It looks like it is "re-binding" functionality from the cometd library to use the jquery one instead (?). I'm not up to speed enough in JS to debug this (I'm a C++ dev really).
(function($)
{
function bind(org_cometd, cookie, ReloadExtension, cometd)
{
// Remap cometd COOKIE functions to jquery cookie functions
// Avoid to set to undefined if the jquery cookie plugin is not present
if (cookie)
{
org_cometd.COOKIE.set = cookie;
org_cometd.COOKIE.get = cookie;
}
var result = new ReloadExtension();
cometd.registerExtension('reload', result);
return result;
}
if (typeof define === 'function' && define.amd)
{
define(['org/cometd', 'jquery.cookie', 'org/cometd/ReloadExtension', 'jquery.cometd'], bind);
}
else
{
bind(org.cometd, $.cookie, org.cometd.ReloadExtension, $.cometd);
}
})(jQuery);

So the problem was that I misunderstood the project layout from the Comet.org site. I should have followed the direction posted at cometd primer for non-maven setups a lot more closely. Basically when you are setting up the project you download the distribution, and then you need to take the code from the war files bundled inside the tarball.
SO, once you have extracted the tarball...
Take the org folder from cometd-javascript-common-2.5.1.war (located in \cometd-2.5.1\cometd-javascript\jquery\target) or cometd-javascript-jquery-2.5.1.war (located in \cometd-2.5.1\cometd-javascript\common\target)
Take the jquery folder from cometd-javascript-jquery-2.5.1.war
The org namespace definition was in the file org/cometd.js which I did not have before, as I wrongly assumed that it had been replace by the org/cometd/Cometd.js file. The namespaces org and comet are defined as below starting on line 17 of that file:
// Namespaces for the cometd implementation
this.org = this.org || {};
org.cometd = {};
org.cometd.JSON = {};
The functions are working correctly now.

Try loading jQuery before any of the other JavaScript files -
<head>
<title>CometD Tester</title>
<link rel="stylesheet" type="text/css"href="style/style.css" />
<script type="text/javascript" src="jquery/jquery-1.9.0.js"></script> <!-- load first -->
<script type="text/javascript" src="org/cometd/Cometd.js"></script>
<script type="text/javascript" src="org/cometd/AckExtension.js"></script>
<script type="text/javascript" src="org/cometd/ReloadExtension.js"></script>
<script type="text/javascript" src="jquery/jquery.cookie.js"></script>
<script type="text/javascript" src="jquery/jquery.cometd.js"></script>
<script type="text/javascript" src="jquery/jquery.cometd-reload.js"></script>
<script type="text/javascript" src="js/myCometd.js"></script>
</head>