external JS does not work - javascript

I have the following code:
<script language="javascript" type="text/javascript">
$.fn.dataTableExt.oPagination.input = {
"fnInit": function (oSettings, nPaging, fnCallbackDraw) {
....
},
"fnUpdate": function (oSettings, fnCallbackDraw) {
....
}
};
</script>
and it works, but when I create external file and put this code inside this file (of course without <script></script> ) - it does not work. Why?

just make sure the jQuery is the first script you load
<script type="text/javascript" src="jquery.js"><scrip>
<script type="text/javascript" src="yourScript.js"><script>

Related

How to use namespace JavaScript?

Hi I am trying to call the namespace JavaScript which is given in the internal JavaScript in below HTML representation.
<head>
<script type="text/javascript">
var ns = {
sampleAlert : function() {
ns.message(var );
}
message :function(var ) {
alert('msg');
}
}
</script>
</head>
<body>
<!--how to call the function sampleAlert-->
</body>
Is that possible? I am not able to call that namespace JavaScript function in the body.
Call it like this:
ns.sampleAlert();
Read this link to have more understanding on JavaScript Namespace
You probably need to do something like the following.
<head>
<script type="text/javascript">
var ns = {
sampleAlert : function(messageText) {
ns.message(messageText);
},
message : function(text) {
alert('msg ' + text);
}
}
</script>
</head>
<body>
<!--how to call the function sampleAlert-->
<script type="text/javascript">
ns.sampleAlert("this text will be displayed in the alert");
</script>
</body>

Uncaught ReferenceError: jQuery is not defined

I don't see why I would get this, code below:
<head>
<script src="https://code.jquery.com/color/jquery.color-2.1.2.min.js" type="text/javascript"></script>
<script>
var json1 = {
text: "After first paragraph"
};
var first_content_added = false;
$(function() {
$(".learn-more").on("click", function() {
$.getJSON("json_info.json", function(data) {
appendContentToFirstP(data.reviews[0].about.moreinfo);
});
});
});
function appendContentToFirstP(content) {
if (first_content_added) {
return;
}
var after_first_p = $('<p class="more-info" />');
after_first_p.text(content);
$(".first").append(after_first_p);
first_content_added = true;
}
</script>
</head>
What would be causing the error?
My initial thought is the error is because I have not imported JQuery, but I have. It's inside the script tag at the top.
You haven't included jQuery, you've only included the plugin jQuery.color.
Reference it before jQuery.color:
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
write before that color js like this
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://code.jquery.com/color/jquery.color-2.1.2.min.js" type="text/javascript"></script>

How do I reference jQuery from my HTML/JavaScript application?

I keep getting Uncaught ReferenceError: $ is not defined error.
I assume everything is ok and working. My JQuery code is inside my Javascript file. I assume that isn't how it works? Should I have a JQuery file?
I have this inside the head of my HTML
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
This is my Javascript file:
function typing(id, sentence){
var result = $.Deferred();
var index=0;
var intObject= setInterval(function() {
document.getElementById(id).innerHTML+=sentence[index];
index++;
if(index==sentence.length){
clearInterval(intObject);
}
}, 100);
return result.promise();
}
var sleep = function(ms) {
var result = $.Deferred();
setTimeout(result.resolve, ms);
return result.promise();
};
typing('container','Subject Name:').then(function() {
return sleep(500);
}).then(function() {
return typing('container',' Carlos Miguel Fernando')
});
Where did I go wrong?
Your question is fairly unclear, but essentially, you just have to make sure jQuery is loaded before your code. So for instance:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="your-code.js"></script>
or
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script>
// Your code
</script>
But not
<!-- Not like this -->
<script src="your-code.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
Note the order of tags.
These tags do not need to be in the head, and in fact, putting them there is not best practice. They must be in head or body. Best practice barring a specific reason to do something else is to put them at the very end of body, e.g.:
<!-- site content here -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="your-code.js"></script>
</body>
</html>

call a javascript function inside<script="text/javascript" src="/example.js">

Hi I am trying to call a function inside the <script> tag.
The formatLink function it is not being called. All other functions in jms.js can be called. How can i make it call functions in both jms.js and the one i declare in the script tags..
<script type="text/javascript" src="javascript/jms.js">
function formatLink(cellvalue) { return cellvalue+"working";}
</script>
Write it like this:
<script type='text/javascript' src='javascript/jms.js'></script>
<script type='text/javascript'>
function formatLink(cellvalue) { return cellvalue+"working"; }
</script>
Each script have to be in it's own <script> tag:
<script type="text/javascript" src="javascript/jms.js"></script>
<script type="text/javascript">
function formatLink(cellvalue) {
return cellvalue+"working";
}
</script>

Yet Another "Object doesn't support this property or method" - jQuery

I just switched my App to run on MVC3 and the Razor view engine, and now I'm getting a JavaScript error. The thing is, nothing has changed on the JavaScript side of things... it worked before.
Here's the code
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
var json_region = [{"value":365,"label":"Calgary"},{"value":368,"label":"Canmore"},{"value":393,"label":"Edmonton"}]
$(function() {
$('#UserRegion').autocomplete({
source: json_region,
selectFirst: true,
select: function( event, ui ) {
$('#RegionID').val( ui.item.value );
$('#UserRegion').val( ui.item.label );
return false;
}
});
});
</script>
<script type="text/javascript" src="/Extras/urbannow.js/1"></script>
<script src="/Assets/Scripts/jquery.ui.autocomplete.selectfirst.js" type="text/javascript"></script>
<script src="/Assets/Scripts/wmd.js" type="text/javascript"></script>
<script src="/Assets/Scripts/showdown.js" type="text/javascript"></script>
<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<script src="/Assets/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
And this is erroring
$('#UserRegion').autocomplete({
The console says
SCRIPT438: Object doesn't support this property or method
And I just can't figure this one out.
You're including jQuery twice.
You're calling .autocomplete immediately after including the base jQuery library - which does not include the autocomplete plugin. Fix the order of your script references and make sure the autocomplete plugin is included before you try to use it.
load this BEFORE you custom script call
<script src="/Assets/Scripts/jquery.ui.autocomplete.selectfirst.js" type="text/javascript"></script>
or at very best custom code should be after all your JavaScript files.
so , your code should look like something like this
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/Extras/urbannow.js/1"></script>
<script src="/Assets/Scripts/jquery.ui.autocomplete.selectfirst.js" type="text/javascript"></script>
<script src="/Assets/Scripts/wmd.js" type="text/javascript"></script>
<script src="/Assets/Scripts/showdown.js" type="text/javascript"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<script src="/Assets/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
<script type="text/javascript">
var json_region = [{"value":365,"label":"Calgary"},{"value":368,"label":"Canmore"},{"value":393,"label":"Edmonton"}];
$(function() {
$('#UserRegion').autocomplete({
source: json_region,
selectFirst: true,
select: function( event, ui ) {
$('#RegionID').val( ui.item.value );
$('#UserRegion').val( ui.item.label );
return false;
}
});
});
</script>
Duplicate jQuery declaration, check View Source of page

Categories