How to refer js file to particular script block only - javascript

I have a situation where I need to refer a jqplot.pieRenderer.min.js file to a particular script block only. Because if it is used globally at the top, it is throwing error for the other scripts block functions. How can i maintain that js file to particular script block.
I tried below.
<script src="jquery.jqplot.min.js" type="text/javascript"></script> // global js file
<script type="text/javascript" src="jqplot.pieRenderer.min.js"> //using specific js
$(document).ready(function () {
BindLocationStock();
BindStatusWiseStock();
});
<script type="text/javascript"> //using global js
$(document).ready(function () {
BindBarChart();
});
Can first script block use global js file and block level js file? I want this scenario. How can I achieve this. Please assist here.

As far as I know, it is not possible to do what you are trying to do.
This is one of the reasons why the module pattern is so useful for JavaScript.
I recommend refactoring your code to use the module pattern - that way, you won't have global variables interfering with one another.

I think it's conflict issue. Either you can use jQuery.noConflict or wrap up your code like this:
<script src="jquery.jqplot.min.js" type="text/javascript"></script> // global js file
<script type="text/javascript" src="jqplot.pieRenderer.min.js"> //using specific js
(function ($) {
BindLocationStock();
BindStatusWiseStock();
BindBarChart();
})(jQuery);

Related

Can an inserted <script> tag be run multiple times without using eval in JavaScript?

I have to use a plugin which bundles js files inside html files (gadgets). For one use case I need to drop and re-instantiate a gadget to run updated code.
So say I have foo.html:
<html>
<head>
<script src="foo.js"></script>
</head>
<body>...</body>
</html>
and foo.js which is the file being injected into my actual document's head:
alert("hello");
Problem is I can only cachebust the html file dynamically and declare my gadget as foo.html?x=123, but the JS file I'm after will still be foo.js so the browser will not re-run it.
Question:
Once a <script> tag is inserted into the document and run, is there any way to run it again without using a module-loader or eval?
Thanks!
You could wrap your code in your <script> tags in a function then call your function. This will allow you to call your code to be called multiple times. Like this:
<script>
function loaded(){
// JavaScript here
}
loaded();
</script>
</body>

can't embed some text in js file

My problem is, that I have created a js file. In this file are some text defined.
channel = {
categorie_one: "Hauptsender",
categorie_two: "Spartensender",
categorie_three: "Regionalsender"
}
Now I want to embed categorie_one in a other js file. That I'm doing with that code:
channel.categorie_one;
But it shows in console: Cannot read property 'categorie_one' of undefined, logical I have linked the file...
Im including the js files in the index.html
<script src="javascripts/default.js" type="text/javascript" rel="javascript"></script>
<script src="javascripts/resources.default.js" type="text/javascript"></script>
In the default.js I have a methode to load the site.
function ChannelLoad(listview) {
//there should be cateogrie_one
}
could you help me pls. Thanks in advance
add a semicolon to your variable definition:
channel = {
categorie_one: "Hauptsender",
categorie_two: "Spartensender",
categorie_three: "Regionalsender"
};
syntactically your variable definition is a statement; if placed in a row with other statements (i assume that's where it will end up after inclusion of your js files), they have to be separated by semicolons.
In your html file include the scripts in the right order:
<script type="text/javascript" src="defines_object.js"></script>
<script type="text/javascript" src="uses_property.js"></script>
Make sure the object isn't defined in a function or the scope of the object will be limited to that function.
If you defined the channel variable in the resources.default.js file and you are trying to access it in the default.js file, you have to reverse the order in which you link the JS files.
Try:
<script src="javascripts/resources.default.js" type="text/javascript"></script>
<script src="javascripts/default.js" type="text/javascript" rel="javascript"></script>
This code should work.
The only thing you must be aware of is the order you include the files, all files will be executed in the order of their includes, so you should include first the file declaring the object, containing
channel = {
categorie_one: "Hauptsender",
categorie_two: "Spartensender",
categorie_three: "Regionalsender"
}
then include the second file, using channel.categorie_one;
If this still doesn't work, please post your whole code, there's probably a scope issue (channel is declared in a local scope)
You should include your scripts in the right order:
<script type="text/javascript" src="defines_object.js"></script>
<script type="text/javascript" src="uses_property.js"></script>

Issue related to Keeping Jquery in Separate .js file

I have some javascript functions added in .js file and also added following Jquery function
$(document).ready(function () {
alert("aj");
$(".QDContactDetails").click(function (event) {
alert("Clicked !!!");
});
});
i wonder that javascript functions call properly but above jquery lines doesn't work.. what is problem in above code? how can i put Jquery in .js file..
i am using newly version of Jquery1.7
What you have should work fine. You just need to ensure that you place the reference to jQuery first, then your own external js file references after that:
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/my-jquery-code.js"></script>

Another jQuery version in function closure

I'm developing some script, which developers will include on their pages.
I need jQuery in this script. And if page already have jQuery, don't override them. I want to use my jQuery(in my anonymous function). And i want to page use jQuery whitch used before me(not my jQuery).
Is it possible?
Thanks.
Use jQuery.noConflict. Here’s an example:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>window.$jq164 = jQuery.noConflict(true);</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>window.$jq171 = jQuery.noConflict(true);</script>
Now you can use $jq164 and $jq171 separately.

Struggling With Some Simple Javascript

I am trying to write my javascript functions in a separate file functions.js. Right now that file consists of one function:
function noOverlay() {
$('.overlay').css('display','none');
};
In my html I have these two lines:
<script type="text/javascript" src="/functions.js"></script>
<script>
$(document).ready(
noOverlay()
);
</script>
Essentially what I am trying to do is house a function in an external file and call it in my html. Maybe $document.ready isn't the right way to do this. Or maybe I am just making a silly mistake. Thanks!
Make sure you are importing jQuery and try:
<script type="text/javascript" src="/functions.js"></script>
<script>
$(function () {
noOverlay();
});
</script>
$(document).ready(function(){
noOverlay();
});
Check to make sure the js file was loaded with firebug or chrome's dev tools
Also make sure you load jQuery beforehand as well.

Categories