Object undefined (Javascript) in localhost but not in production - javascript

We have two Javascript files being loaded on an ASP.NET page. One is CommonUI.js and another is Entity.Js
The page calls a function in Entity.Js that calls a function in CommonUI.Js. However, in my local environment I am getting the error "CommonUI" is undefined.
In their production environment this is fine.
I've checked that CommonUI.js is loaded and it is. Debugging this fires the function in Entity.Js but fails because the function being called on CommonUI (CommonUI.WindowResize() ) points to an object that's undefined.
So my question is ... why is CommonUI not defined in only my localhost?

I think your issue could be related to the paths being used for your JS files.
You could add a reference to both JS files in the header of your page:
<script type="text/javascript" src='<%= Page.ResolveUrl("~/js/Entity.js") %>'></script>
<script type="text/javascript" src='<%= Page.ResolveUrl("~/js/CommonUI.js") %>'></script>
If you are using a master page structure you may need to wrap the references within an ASP Placeholder server control.
<asp:PlaceHolder ID="PlaceHolder1" runat="server">
<script type="text/javascript" src='<%= Page.ResolveUrl("~/js/Entity.js") %>'></script>
<script type="text/javascript" src='<%= Page.ResolveUrl("~/js/CommonUI.js") %>'></script>
</asp:PlaceHolder>

Related

Function not defined from different js file (NOT an order problem) - IE Only

Why do I get a javascript error (function not defined) on Internet Explorer when I try to call a function that lives inside a different js file?
I'm using laravel blades, this is my parent template:
<!DOCTYPE html>
<html>
<head>
<!-- METAS -->
<title>#yield('titulo')</title>
#yield('css')
</head>
<body>
#include('navbar')
#yield('content')
#include('footer')
<!-- Here I have jquery and bootstrap js files... -->
<script src="{{ asset('js/sitio/custom.js') }}" type="text/javascript"></script>
#yield('js')
</body>
</html>
So within the extending view I have:
#extends('layouts.template')
#section('content')
<button id="button" type="button">Click me</button>
#endsection
#section('js')
<!-- Here I have a js file that calls a function that lives inside custom.js -->
<script src="{{ asset('js/some-js-file.js') }}"></script>
#endsection
Basically I have a button that when clicked needs to send some data over ajax:
Code inside some-js-file.js:
$(document).ready(function(){
$('#button').on('click', function(){
sendAjax(); //the error is here, I get a 'sendAjax is not defined'
})
});
Code inside custom.js:
//this function is declared inside the global scope
function sendAjax(){
//do things
}
It's also worth mentioning that the code segment that calls the custom.js file's function gets executed inside a $(document).ready().., also, this only happens with internet explorer, in other browsers such as firefox, chrome and safari works always fine.
I've read a suggestion to change the location of my custom.js file and move it inside <head> tag but I would need to also move jquery and bootstrap js libraries because that custom file makes use of them, and according to this answer, it is NOT recommended to move jquery inside <head> tags because of performance. How can I solve this?

Javascript executing incorrectly on Apache Cordova index.js/.html

So in an application I'm writing using Apache Cordova within Visual Studio, I am attempting to add functionality to the default index.html and index.js. However, my code within my index.js is executing very oddly - the debugger in VS shows that the $('#favorite-lot') is executed, but nothing within the .click(function()) method is. Is there any reason why this would be so?
Index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/JQueryMobile/jquery.mobile-1.4.5.min.css" />
<link rel="stylesheet" type="text/css" href="css/index.css">
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="scripts/platformOverrides.js"></script>
<script src="scripts/JQueryMobile/jquery.mobile-1.4.5.js"></script>
<script type="text/javascript" src="scripts/index.js"></script>
</head>
<body>
<div role="main" class="ui-content">
<a id="favorite-lot" href=""><h5>Favorite Lot</h5></a>
</div>
</body>
</html>
Index.js
//This method is called on page load to set the favorite lot on the index page
//the document bit is called, but the if statement within it & ready aren't
//$(document).ready(function () {
$('#favorite-lot').click(function () {
var storage = window.localStorage;
var href = storage.getItem("favoriteLot");
//now redirect
window.location.replace(href);
});
//});
Note I have tried enclosing my function within a document.ready (see commented out code), however the results are the same.
EDIT: So I figured this issue out, and it was a fairly simple error: I wasn't including the jQuery code itself, just jQuery.mobile, and additionally, the jQuery has to load before jQuery.mobile for the .mobile stuff to work. Side note, I also didn't realize .mobile enables Ajax on most links/redirections, and had to disable that for some of my other code; maybe if you've found this post, you're suffering from the other problem as well

Files referenced in ASPX-page don't cause invokation of Application_BeginRequest

When I reload a page called Donkey.aspx, there's a breakpoint being hit on the method below.
protected void Application_BeginRequest(object sender, EventArgs e)
{
if (application.Request.Url.AbsolutePath.EndsWith(".blopp")) { ... }
}
The problem is that all I get to see is a hit on the Donkey.aspx and another file (the one with id __browserLink_initializationData) referenced by it, only. However, there's a bunch of other references to files and those are not causing hits on the method. The end of the produced page looks like this.
<script type="text/javascript" src="/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="jquery.placeholder.js"></script>
<script src="beep.blopp" type="text/javascript"></script>
<script src="typeahead.bundle.min.js" type="text/javascript"></script>
<script type="text/javascript" src="utils.js"></script>
</div>
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATEGENERATOR"
id="__VIEWSTATEGENERATOR" value="54ACFC5B" />
</div>
</form>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Chrome","requestId":"f51b45a6ac174b6e8880184492a80734"}
</script>
<script type="text/javascript" src="http://localhost:64593/9...7/browserLink" async="async">
</script>
<!-- End Browser Link -->
</body>
Accessing another page gives me the expected behavior, namely a bunch of hits on the event handler above, including CSS-files etc. Notable is that the files do indeed get loaded, as verified by the functionality of the scripts, console status codes (200 and 304 all around). The master page is virtually empty.
I'm at loss on what's wrong and even more uncertain on how to trouble-shoot it.
Static files are usually cached by browser. Turn off browser cache or reload all from server (Ctrl+F5).

blockUI javascript error when using local script files

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>

Calling a function from one JavaScript file which requires another

I am trying to call a function written in one JavaScript file from another JavaScript file. I have the following code, but it doesn't work:
My HTML file
<script type="text/javascript" src="js1.js"></script>
<script type="text/javascript" src="js2.js"></script>
<script language="javascript">
js1();
</script>
js1.js
function js1()
{
alert("Hello from js1");
js2();
}
js2.js
function js2()
{
alert("Hello from js2");
}
What can I do?
Try changing the order
<script type="text/javascript" src="js2.js"></script>
<script type="text/javascript" src="js1.js"></script>
<script language="javascript">
js1();
</script>
Because you call js2(); inside js1.js, so the script js2.js should be executed before.
In your case, i think it should still work without changing orders like this because you call js2(); inside a function. When this script is executed:
function js1()
{
alert("Hello from js1");
js2();
}
Even the js2.js is not executed yet, but you do not actually call js2(); at this time.
Just try it to see if it works.
I'm going to assume that's your entire HTML page.
In order to have those scripts run, you need to have those JavaScript files in the same folder as your webpage, and to actually have a proper HTML page!
In your HTML page, you need to include the references to your js1 and js2 files in either the head or body, and include the script you've written in the HTML page itself in the body so that it'll execute when it's loaded:
<!DOCTYPE html>
<!-- ^ Declaring this DOCTYPE means this is a HTML5 page. -->
<html>
<head>
<!-- This will load your scripts into the document. -->
<script src="js1.js"></script>
<script src="js2.js"></script>
<!--
In a HTML5 page, you don't need to include the
'type="text/javascript"' attribute on script tags.
They're treated as having that by default, unless you say otherwise.
-->
</head>
<body>
<!--
You could also include your scripts here, but I'll
just leave these commented out since they're already included.
<script src="js1.js"></script>
<script src="js2.js"></script>
-->
<script>
js1();
</script>
<!--
You don't need 'language="javascript"' on a script tag.
Use the type attribute, or nothing in a HTML5 page.
-->
</body>
</html>

Categories

Resources