blockUI javascript error when using local script files - javascript

I'm trying to use blockUI offline in my asp.net application. I have created two js files, one for jquery and one for blockUI script
I then referenced these two files in my .aspx page as follows:
<script type="text/javascript" src="Scripts/jquery.min.js"></script>
<script type="text/javascript" src="Scripts/jquery.blockUI.js"></script>
and here's an example of how I use it:
<script type="text/javascript">
Page = Sys.WebForms.PageRequestManager.getInstance();
Page.add_beginRequest(OnBeginRequest);
Page.add_endRequest(endRequest);
function OnBeginRequest(sender, args) {
$('div#blockme').block({
message: '<i class="fa fa-spinner fa-spin"></i> Loading...',
overlayCSS: { backgroundColor: '#fff' }
});
}
function endRequest(sender, args) {
$('div#blockme').unblock();
}
</script>
However, when i run it, i get a javascript error "object does not support method 'block'" which I've understood from other posts that it is because jquery or blockUI were not loaded correctly.
But when I use the online scripts, the application works fine:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://malsup.github.io/jquery.blockUI.js"></script>
I need to be using it offline so I won't be able to use the online scripts.
Is there something I'm doing wrong in referencing the local files?

If ASPX or Master page is inside a folder (other than root level), you can use one of the following approach -
<script src="~/Scripts/jquery.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.blockUI.js" type="text/javascript"></script>
Or
<script src="<%= ResolveUrl("~/Scripts/jquery.min.js") %>"
type="text/javascript"></script>
<script src="<%= ResolveUrl("~/Scripts/jquery.blockUI.js") %>"
type="text/javascript"></script>

Related

$(...).ajaxForm is not a function

I load jquery and ajaxform plugin and after that init ajaxform on element.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.form.js" /></script>
<script src="script.js"></script>
script.js
$(document).ready(function() {
$('.form').ajaxForm();
});
Error: $(...).ajaxForm is not a function.
It appears on this site.
Github isn't a CDN and will block you trying to use it as such.
jquery.form.js is available on numerous proper CDN's or you can download it and serve from your own site

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>

Laravel 4: Error: Popover requires tooltip.js

I am using Laravel-4-Bootstrap-Starter-Site. I have this issue loading javascript files: Error: Popover requires tooltip.js It seems that is not causing majors problems but I am losing functionality.
Checking source code we can see that popover is loaded first and before than tooltip file.
<!-- Javascripts -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/popover-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/tab-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/alert-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/transition-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/modal-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/scrollspy-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/carousel-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/dropdown-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/tooltip-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/collapse-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/button-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/affix-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/assets/js/wysihtml5/wysihtml5-0.3.0-5f4b6ad2a53f7fc45751886caf6076e2.js"></script>
<script src="http://code.dev/assets/compiled/admin/assets/js/wysihtml5/bootstrap-wysihtml5-5f4b6ad2a53f7fc45751886caf6076e2.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<script src="http://code.dev/assets/compiled/admin/assets/js/datatables-bootstrap-5f4b6ad2a53f7fc45751886caf6076e2.js"></script>
<script src="http://code.dev/assets/compiled/admin/assets/js/datatables.fnReloadAjax-5f4b6ad2a53f7fc45751886caf6076e2.js"></script>
<script src="http://code.dev/assets/compiled/admin/assets/js/jquery.colorbox-5f4b6ad2a53f7fc45751886caf6076e2.js"></script>
<script src="http://code.dev/assets/compiled/admin/assets/js/prettify-5f4b6ad2a53f7fc45751886caf6076e2.js"></script>
<script src="http://code.dev/assets/compiled/admin/assets/js/jquery.uploadfile-88e9f41770fc597c379b2a75086bcb0f.js"></script>
<script src="http://code.dev/assets/compiled/admin/assets/js/common-75a4c5198cfe0c4468991a6000253513.js"></script>
<script type="text/javascript">
$('.wysihtml5').wysihtml5();
$(prettyPrint);
</script>
Question: is there a way to solve this issue?
I have had the same problem. The reason that happens is because basset loads the resources in order by name. and since p comes before t obviously it gets loaded afterwards coming up with the error. Hacking your way around the problem simply rename tooltip with to atolltip in vendors/twbs/bootstrap/js or instead requiring the directory to load the files in basset config you require each single js file in the order you want. The second option i did not test but should work.

twipsy js not working on rails project

Let me first say I am very unfamiliar with javascript, but I am trying use twitter's twipsy (http://twitter.github.com/bootstrap/javascript.html), their take on jQuery's tipsy.
Here are all the scripts that are getting loaded:
<script src="/javascripts/effects.js?1314051118" type="text/javascript"></script>
<script src="/javascripts/dragdrop.js?1314051118" type="text/javascript"></script>
<script src="/javascripts/controls.js?1314051118" type="text/javascript"></script>
<script src="/javascripts/rails.js?1314051118" type="text/javascript"></script>
<script src="/javascripts/bootstrap-twipsy.js?1326303918" type="text/javascript"></script>
<script src="/javascripts/application.js?1314051118" type="text/javascript"></script>
As you can see, bootstrap-twipsy.js is getting loaded.
Then on an index.html.erb page I am trying the following code:
<a href="#" id="example" rel='twipsy' title='Some title text'>text</a>
<script>
$(function() {
$('#example').twipsy();
$("a[rel=twipsy]").twipsy({
live: true
});
})
</script>
I get nothing. The reason I have the ('#example').twipsy in there is that I was just trying to call it two different ways, but neither worked. Does anyone see what I'm doing wrong?
In a similar question (http://stackoverflow.com/questions/4916501/where-to-put-my-js-for-tipsy-jquery-tooltip) someone found that their prototype.js was causing conflicts, but I've removed that and I still got nothing.
Installing jquery-rails did the trick

Categories

Resources