Develop Reference

Error: TypeError: $(...).dialog is not a function

I am having an issue getting a dialog to work as basic functionality. Here is my jQuery source imports:
<script type="text/javascript" src="scripts/jquery-1.9.1.js"></script>
<script type="text/javascript" src="scripts/jquery-ui-1.11.1.js"></script>
<script type="text/javascript" src="scripts/json.debug.js"></script>
Html:
<button id="opener">open the dialog</button>
<div id="dialog1" title="Dialog Title" hidden="hidden">I'm a dialog</div>
<script type="text/javascript">
$("#opener").click(function() {
$("#dialog1").dialog('open');
});
</script>
From the posts around seems like as a library import issue. I downloaded the JQuery UI Core, Widget, Mouse and Position dependencies.
Any Ideas?

Be sure to insert full version of jQuery UI. Also you should init the dialog first:
$(function () {
$( "#dialog1" ).dialog({
autoOpen: false
});
$("#opener").click(function() {
$("#dialog1").dialog('open');
});
});
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />
<button id="opener">open the dialog</button>
<div id="dialog1" title="Dialog Title" hidden="hidden">I'm a dialog</div>

if some reason two versions of jQuery are loaded (which is not recommended), calling $.noConflict(true) from the second version will return the globally scoped jQuery variables to those of the first version.
Some times it could be issue with older version (or not stable version) of JQuery files
Solution use $.noConflict();
<script src="other_lib.js"></script>
<script src="jquery.js"></script>
<script>
$.noConflict();
jQuery( document ).ready(function( $ ) {
$("#opener").click(function() {
$("#dialog1").dialog('open');
});
});
// Code that uses other library's $ can follow here.
</script>

If you comment out the following code from the _Layout.cshtml page, the modal popup will start working:
</footer>
#*#Scripts.Render("~/bundles/jquery")*#
#RenderSection("scripts", required: false)
</body>
</html>

Change jQueryUI to version 1.11.4 and make sure jQuery is not added twice.

I just experienced this with the line:
$('<div id="editor" />').dialogelfinder({
I got the error "dialogelfinder is not a function" because another component was inserting a call to load an older version of JQuery (1.7.2) after the newer version was loaded.
As soon as I commented out the second load, the error went away.

Here are the complete list of scripts required to get rid of this problem.
(Make sure the file exists at the given file path)
<script src="#Url.Content("~/Scripts/jquery-1.8.2.js")" type="text/javascript">
</script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.8.24.js")" type="text/javascript">
</script>
<script src="#Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript">
</script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript">
</script>
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript">
</script>
and also include the below css link in _Layout.cshtml for a stylish popup.
<link rel="stylesheet" type="text/css" href="../../Content/themes/base/jquery-ui.css" />

I had a similar problem and in my case, the issue was different (I am using Django templates).
The order of JS was incorrect (I know that's the first thing you check but I was almost sure that that was not the case, but it was). The js calling the dialog was called before jqueryUI library was called.
I am using Django, so was inheriting a template and using {{super.block}} to inherit code from the block as well to the template. I had to move {{super.block}} at the end of the block which solved the issue. The js calling the dialog was declared in the Media class in Django's admin.py. I spent more than an hour to figure it out. Hope this helps someone.

How resolve TypeErrors for SignalR

I am currently experiencing the following errors, while debugging my client-side code using web-browser:
TypeError: $ is undefined
ReferenceError: $ is not defined
In the in the "Network" tab, of the debugger, it shows the JQueries scripts as "404". Does this indicate my Jqueries are not being render/initialized
This is my client-side code:
<script src="Scripts/jquery-1.10.2.min.js"></script>
<script src="Scripts/jquery.signalR-2.1.0.min.js"></script>
<script src='<%: ResolveClientUrl("~/signalr/hubs") %>'></script>
<script type="text/javascript">
$(function () {
// Declare a proxy to reference the hub.
var notifications = $.connection.NotificationHub;
// Create a function that the hub can call to broadcast messages.
notifications.client.recieveNotification = function (role, descrip) {
// Add the message to the page.
$('#spanNewMessages').text(role);
$('#spanNewCircles').text(descrip);
};
// Start the connection.
$.connection.hub.start().done(function () {
alert("Preparing to send notifications...");
notifications.server.sendNotifications();
alert("Notifications have been sent.");
}).fail(function (e) {
alert(e);
});
//$.connection.hub.start();
});
</script>
<h1>New Notifications</h1>
<div>
New <span id="spanNewMessages"></span> role.<br />
New<span id="spanNewCircles"></span> descrip.<br />
</div>
Updated Jquery Scripts:
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<script src="~/Scripts/jquery.signalR-2.1.0.min.js"></script>
<script src='<%: ResolveClientUrl("~/signalr/hubs") %>'></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
Any help would be very helpful. Thank you

$ is an alias of jQuery. Your jquery script has to be included in your page if you want to use it.
As long as your jQuery script returns 404, you won't be able to use it. To help you, you could load the script from the jQuery website.
Replace this line :
<script src="Scripts/jquery-1.10.2.min.js"></script>
with this one :
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
A good practice on a website is to load jQuery from the Google cdn as it will be most likely cached as many websites use it :
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Another thing you can do to ensure that your script will do well is to make sure that there is no conflict with other scripts. Add this at the begining of your code :
jQuery.noConflict();
Make sure that you replace every $ with jQuery.
Example :
$('#spanNewMessages').text(role);
will become :
jQuery('#spanNewMessages').text(role);
If it does not work, remove all your code and just try to display alert(jQuery("h1").text()); like this :
jQuery(function () { alert(jQuery("h1").text()); });

The order of your script tags is wrong. You need to load jquery before jquery.signalr:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.signalR-2.1.0.min.js"></script>
<script src='<%: ResolveClientUrl("~/signalr/hubs") %>'></script>
<script type="text/javascript">

Many thanks to all, for your suggestion and help.
I manage to get the issue resolved through using the Scripts as the following below:
<script src="../Scripts/jquery-1.10.2.min.js"></script>
<script src="../Scripts/jquery.signalR-2.1.0.min.js"></script>
<script src='<%: ResolveClientUrl("~/signalr/hubs") %>'></script>

$ is not defined..but it is it is fancybox that can't be found

Having numerous struggles today.
I have a line in execution that is responding:
Uncaught ReferenceError: $ is not defined
This at first had me checking to see if jquery was loading but it is. The real error is that it can't find fancybox function.
My HTML element is:
<div><span class="fancybox"></span></div>
When a button is clicked a function runs doing stuff then when we get to this line it throws the error:
$('.bmgi_fancybox').fancybox.open(
{
'afterClose': RefreshParentGridHandOff(SubGridName),
'data-fancybox-type' : 'iframe',
'href': FullUrl,
'modal' : true
});
The real error is that open is not a function of undefined...i.e. fancybox is undefined.
I have checked and all libraries are loaded and clicking on them they resolve??
<link rel="stylesheet" type="text/css" href="/.../jquery.fancybox.css">
<link rel="stylesheet" type="text/css" href="/.../jquery.fancybox.buttons.css">
<link rel="stylesheet" type="text/css" href="/.../jquery.fancybox.thumbs.css">
<script type="text/javascript" src="/.../jquery.1.10.1.min.js"></script>
<script type="text/javascript" src="/.../jquery.mousewheel.3.0.6.pack.js"></script>
<script type="text/javascript" src="/.../jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="/.../jquery.fancybox.js"></script>
<script type="text/javascript" src="/.../jquery.fancybox.buttons.js"></script>
<script type="text/javascript" src="/.../jquery.fancybox.thumbs.js"></script>
<script type="text/javascript" src="/.../jquery.fancybox.media.js"></script>
The file renames are correct as we don't allow hyphens in file names....and as I said clicking on them in dev tools the link resolves and opens.
I have spent 2 hours on this and don't know how to continue figuring this out....I mean clearly something is missing but I can't see it / don't understand.
Thank You
I just thought of another important thing
The button being clicked and the function calling fancybox.open are in an iframe while the libraries span element shown etc are in the parent....I think that might be my issue.

The open method is undefined when called the way you are calling it:
typeof $.fancybox.open // function
typeof $('SELECTOR').fancybox.open // undefined
You'll need to call it like so:
$.fancybox.open({
afterClose: function(){
RefreshParentGridHandOff(SubGridName);
},
type: 'iframe',
href: FullUrl,
modal: true
});
I hope this helps!

js file not loaded but next script executed?

I have a very simple page with static JS lib references.
<!DOCTYPE html>
<html>
<head>
<title>some title here</title>
<link rel="stylesheet" type="text/css" href="//SOMESERVER.com/1.0.4815/css/public.css" />
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="//SOMESERVER.com/1.0.4815/css/publicIE8.css" />
<script src="//SOMESERVER.com/1.0.4614/js/json2.js"></script>
<![endif]-->
<script type="text/javascript">
window.qbaka || (function(a,c){a.__qbaka_eh=a.onerror;a.__qbaka_reports=[];a.onerror=function(){a.__qbaka_reports.push(arguments);if(a.__qbaka_eh)try{a.__qbaka_eh.apply(a,arguments)}catch(b){}};a.onerror.qbaka=1;a.qbaka={report:function(){a.__qbaka_reports...
</script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="//SOMESERVER.com/1.0.4815/js/knockout.js"></script>
<script type="text/javascript" src="//SOMESERVER.com/1.0.4815/js/colorbox.min.js"></script>
<script type="text/javascript" src="//SOMESERVER.com/1.0.4815/js/public.js"></script>
<script type="text/javascript">
var user = {};
user.loggedIn = false;
user.displayName = '';
user.dateFormat = '';
user.timeFormat = '';
// bit more very simple code here
</script>
<script type="text/javascript">
$(document).ready(function () {
//correct code here
});
</script>
Code works perefectly for me and for QA team. But since I use QBAKA for logging JS errors - I got around 50 errors (different browsers, IPs, timezones, datetimes) that tells me:
Unknown variable or function '$'
in line with
$(document).ready(function () {
I always thought that libraries executes in order of appearance, so if I include reference to jQuery, I am sure that I can access immediately - without any try-catch or other stuff.
How it is possible? jQuery library (from google server) is not available and this JS lib is not loaded and code executes further? Any ideas?

if you using some other custom plugin in your page so it may be conflicts with $ (i.e Jquery)
try $.noConflict()
jQuery.noConflict();
(function( $ ) {
$(function() {
// More code using $ as alias to jQuery
});
})(jQuery);
links :
http://api.jquery.com/jquery.noconflict/
http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/
Thanks,
Siva

try this
<script type="text/javascript">
$(document).ready(function () {
//correct code here
});
</script>
instead of
<script type="text/javascript">
$(document).ready(function () {
//correct code here
}
</script>
you have not call your $(document).ready function properly.

That error can caused by :
Your jquery file is not being properly loaded into your page.
or
<script type="text/javascript">
$(document).ready(function () {
)};
</script>
is executing earlier than jquery file is loaded.
For example try this
<script src="https://c15123524.ssl.cf2.rackcdn.com/jquery.min.js"></script>
instead of
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
and check.
Check by view source if the jquery is loading properly or not .
Try to download the jquery file and use it from your local server.

Syntax error in JavaScript using Dreamweaver

I have a JavaScript code in Dreamweaver, but it tells me there's a syntax error on line 2. Where's the problem?
<link rel="stylesheet" type="text/css" href="scripts/rates/rates.css" />
<script src="scripts/rates/jquery-latest.js"></script>
<script>
$(document).ready(function() {
$("#responsecontainer").load("scripts/rates/ratesresult_alb.php");
var refreshId = setInterval(function() {
$("#responsecontainer").load('scripts/rates/ratesresult_alb.php?randval='+ Math.random());
}, 1800000);
});
</script>
<div id="responsecontainer">
</div>
the same script works on a site ak-invest.com and in the new website does not work http://69.73.130.182/~akinvest/index.php/en/kembimi-valutor

I am not seeing any syntax errors in the code presented. Are you sure that jquery is loading? Try adding a simple script to replace your current one:
alert($);
This should alert something if jquery is loaded.
You could also check in the html panel of firebug to make sure the libary is being loaded.
Another solution would be to load jquery from a known source such as the Google CDN so that you know you have it.
Example:
<link rel="stylesheet" type="text/css" href="scripts/rates/rates.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$("#responsecontainer").load("scripts/rates/ratesresult_alb.php");
var refreshId = setInterval(function() {
$("#responsecontainer").load('scripts/rates/ratesresult_alb.php?randval='+ Math.random());
}, 1800000);
});
</script>
<div id="responsecontainer">
</div>

Change
<script src="scripts/rates/jquery-latest.js"></script>
to :
<script src="scripts/rates/jquery-latest.js" type="text/javascript" />

Older versions may not detect the jquery way of accessing variables and elements. You can ignore those errors and see if your script actually works. Did your script works well, despite of those errors?
Alternatively try changing adding type attribute as posted by Mateusz.

<script src="../scripts/rates/jquery-latest.js" type="text/javascript" />
or
<script src="./scripts/rates/jquery-latest.js" type="text/javascript" />

Your syntax error is almost certainly going to be in the included js file. And it looks like you didn't write it (it's a jquery library, right?) so the likelihood of there really being a syntax error in the file is rather low.
Therefore, what is actually happening is the file isn't at the path you're looking for it (it's a relative URI), and a HTML 404 page of some sort is being parsed as JavaScript instead of the JavaScript file itself.
Most probably.