I shall start by creating a list of the order my scripts are loaded in:
<script src="/shared/js/requirejs/require.js" type="text/javascript"></script>
<script src="/js/main.js" type="text/javascript"></script>
<script src="https://www.google.com/jsapi" type="text/javascript"></script>
After that I have a file that looks like this:
<script type="text/javascript">
google.load("visualization", "1", {packages:["bar","line"]}); <--- this breaks everything
require(['jquery','moment','underscore','validate','serializeObject','datepicker'],function($,moment,_){
// Do stuff in here
});
</script>
Does anyone have any clue as to why google.load(); causes my page to break?
Sometimes it throws "Object doesn't support property or method 'extend' (require.js)"?
Sometimes it acts like validate or underscore has not been loaded when it gets to parts of my code that use them.
Other times, the page loads just fine and works.
Related
i have a project which is written in MVC3,its a signalR,i got the code to edit some part but i see its gives an error,on the following part which says cant start a null refrence:
$.connection.hub.start().done(FUNCTION....)
meaninf the valu of hub is null,the fowlooing are the scripts which are loading:
<script src="#Url.Content("~/Scripts/jquery-1.7.2.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/leitwind/dateExtension.min.js?ver=1")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/knockout-3.0.0.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/knockout.mapping-latest.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/leitwind/knockoutAutoRefresh.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/DataTables-1.9.2/media/js/jquery.dataTables.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.signalR-0.5.2.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/signalr/hubs")"></script>
when i go to the developer option of the browser its showing the error on the last refrence,signalr/hubs which does not exist!im wondering why the project is running on the server but not on the local pc even thought i have the same scripts and anything has been changed,after one day of investigation i thought maybe i should give the address of the server instead of signalr/hubs,with this work around i that error is not threwing any more but i have the following issue,all in all i dont have any idea where i should look
is there something wrong with the url format?
i need to set the address manually in my code in order to get data from the server,for the follwoing part:
$.connection.hub.url ='https://myserver.com/file/signalr/';
$.connection.hub.start().done()
I'm new to web development, and was having issues with two plug-ins. I already found a workaround to solve it, but I'm not convinced at all about what I did, so I ask you guys if you can enlighten me on what is this about.
The page in question uses SlimScroll and DataTables plugins. At first, I had an HTML file like this one.
<body>
<!-- STUFF -->
<!-- SCRIPTS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="plugins/slimScroll/jquery.slimscroll.min.js" type="text/javascript"></script>
<script src="plugins/DataTables/datatables.min.js" type="text/javascript"></script>
<script src="assets/scripts/tablas.js" type="text/javascript"></script>
<script src="assets/scripts/general.js" type="text/javascript"></script>
At the bottom, general.js is used to handle click events and other stuff, and tablas.js has the code that picks up a file with data and displays it in DataTables. The relevant code from general.js:
$(document).ready(function() {
$('#contenedor-menu').slimScroll({
height: '100%'
});});
And the code for tablas.js:
$(document).ready(function() {
$('#tablita').DataTable( {
"ajax": 'data/COut2.txt',
} );});
With this structure, when I load the page, SlimScroll fails with the message in the console: "TypeError: $(...).slimScroll is not a function"
Then after touching around, I switched the order of the scripts in the HTML file. I put datatables first and then slimscroll.
<script src="plugins/DataTables/datatables.min.js" type="text/javascript"></script>
<script src="plugins/slimScroll/jquery.slimscroll.min.js" type="text/javascript"></script>
And now it works ok, with no errors.
Could somebody please explain to me what's going on?
Thanks in advance!
The use of multiple $(document).ready(function() { } is the main cause of this issue. There should be only one Document Ready event handler.
You may try using the pageLoad() function or onLoad() events
Not positive but it is usually best practice to put the scripts you absolutely need before everything else in the head. This is so that the content of the page does not finish loading until all the dependencies have been loaded first.
By reordering your scripts you may have a solution that will only work some of the time.
Put all the scripts you need to load in the head and your general.js script at the end of your body element.
I am currently working my way through David Sulc's excellent "Backbone.Marionette.js: A Gentle Introduction" and have come unstuck at modules. With the app as it currently stands I am trying to access an API in a module called 'contacts.js' from the index.html script but I get the following error when I try to run the app:
"Handler not found for 'contact: entities' "
I am able to hit the API directly from the console in Chrome and manually get the 'contact' information so I was thinking this was a loading sequence problem where the API might not be available by the time app.js loads, however the loading sequence is as follows:
<script type="text/javascript" src="assets/js/vendor/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="assets/js/vendor/json2.js"></script>
<script type="text/javascript" src="assets/js/vendor/underscore-min.js"></script>
<script type="text/javascript" src="assets/js/vendor/backbone-min.js"></script>
<script type="text/javascript" src="assets/js/vendor/backbone.marionette.min.js"></script>
then the local scripts as follows:
<script type="text/javascript" src="assets/js/app.js"></script>
<script type="text/javascript" src="assets/js/entities/contact.js"></script>
and a script tag below the last two script tags directly runs the following code:
<script type="text/javascript">
... some view code
ContactManager.on("initialize:after", function(){
var contacts = ContactManager.request("contact: entities");
... some more code
</script>
the line beginning var contacts = ..... is the one giving me the error. Any help appreciated
I am as certain as I can be that I have scripted this exactly as per the book.
You have a space in your event name:
<script type="text/javascript">
... some view code
ContactManager.on("initialize:after", function(){
// Remove the space in contact: entities -->
var contacts = ContactManager.request("contact: entities");
... some more code
</script>
I've included Jquery & Jquery mobiles latest versions.
I'm basically trying to use a mobile button to call a JavaScript function but having issues.
This works fine in chrome but not in webworks on the playbook (this is where i get the errors)
<script type="text/javascript" src="js/personSearch.js" ></script>
Including my custom JavaScript code
Within that file i have the folllowing code
function testme()
{
alert("tet");
}
I've tried all the following ways:
<input type="button" onclick="testme();" value="Button" />
<a id="psClear" href="javascript:testme();" data-role="button" data-inline="true">Clear</a>
For them all I get the error:
mainMenu.html:1ReferenceError: Can't find variable: testme
I think its something to do with the way J query Mobile renders buttons but not sure...
UPDATE
If i add rel="external" to the page before it loads in the javascript and works fine, but reloads all the scripts again, and doesnt work without rel="exnteral"
<link rel="stylesheet" type="text/css" href="css/jqueryMobileCSS.css">
<link rel="stylesheet" type="text/css" href="css/customStyle.css">
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jqueryMobile.js"></script>
<script src="js/eBar.js"></script>
<script src="js/moment.min.js"></script>
<script src="js/ain.js"></script>
<script src="js/tleBar.js"></script>
<script type="text/javascript" src="js/ps.js" ></script>
So without rel="external" js/ps.js doesnt seem to load...
The scripts located on both pages are the exact same but the new page has js/ps,js loaded in aswell..
Thanks
Don't use inline Javascript (read why here) to call functions. It looks like the error you're having is related to the fact that your personSearch.js file hasn't loaded and therefore the function may not exist exist. Use the Chrome/Firebug JS console to check whether the function is definitely defined and then create another script with something resembling the following inside:
$(document).bind('pageinit',function () {
$("#psClear").on('click',function(){
testme();
});
});
This will make sure that the DOM is loaded and ready before binding the click event to your button. Make sure this script is loaded after your personSearch.js script.
I Have usercontrol and i registered the following javascript method in code behind :
changeSelectedMenu(controlID);
the previous method is declared in JScript.js file so i registered it also .
but the following exception has been thrown :
Microsoft JScript runtime error: Object expected
The result page is :
<script src="~/Scripts/JQuery.js" type="text/javascript"></script>
<script src="~/Scripts/JScript.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
changeSelectedMenu('ctl00_ctl00_cntMain_procedureContentHolder_procedureMenu_appointmentsLink');//]]>
</script>
Is There anyone can help me to workaround this issue???
These aren't valid paths to your JavaScript:
<script src="~/Scripts/JQuery.js" type="text/javascript"></script>
<script src="~/Scripts/JScript.js" type="text/javascript"></script>
They need to be relative to the page or to the site root, for example:
<script src="/Scripts/JQuery.js" type="text/javascript"></script>
<script src="/Scripts/JScript.js" type="text/javascript"></script>
While ~/ works for resolving a path on the server-side, the browser doesn't know how to handle this. There are some other work-arounds in this question for making it work and still being app-relative.