How to use the same javascripts in multiple content pages? [duplicate] - javascript

This question already has answers here:
How to use external ".js" files
(6 answers)
Closed 5 years ago.
I have 4 javascripts within <script> tags in all multiple of my content pages. They handle popups and disabling of other buttons on button clicks. So at the moment I have a lot of duplicate script code on every page.
Is it possible to have these scripts in the master page instead and have all my content pages reference them? If so, where in the master page do I put them and how do I reference them on a button click?
I have searched google but haven't found any good answers.
Edit 1: To deal with the duplicate marking.
I am mostly looking to avoid duplicate code here, that is why I want to put this in my master page. If it is possible to put my scripts in a JS file, include that on the master page and have all my content pages access the scripts from there. Then that is absolutely a solution to my question and will gladly accept an answer that describes how I do that. To be clear, it is the accessing part that I haven't found how to do.
But just saying something like, "put the scripts in a JS file and include the file on your page", is not a solution to my question since it just hides the duplicity in files instead.
Edit 2: What I have tried now.
As per M Idrees's answer below I have put my scripts into buttonScripts.js, which is located in my projects Scripts folder. I added it to the head of my master page:
<head runat="server">
<script type="text/javascript" src="~/Scripts/buttonScripts.js"></script>
...
</head>
I kept the click functions on my buttons as is:
<button ... onclick="if (!myFunc(this)) { return false; }"></button>
Then I removed the scripts from my content pages and started my web app. Now I get the error "myFunc is undefined". This is what I mean by "it is the accessing part that I haven't found how to do" above.
Edit 3: I suck.
Tried to use a relative path, as you can see above. With a proper path:
<head runat="server">
<script type="text/javascript" src="Scripts/buttonScripts.js"></script>
...
</head>
It works as intended. Thanks!

Within the head tag of your master page. Add your script reference, like:
<script type="text/javascript" src="path/to/script.js"></script>
Remove all other script references from your content pages. It will automatically get from master page.
Regarding your point: it is the accessing part that I haven't found how to do.
You don't have to change anything about accessing script code. It will work as it might be working now.
Do these steps, and if still have any problem, just update in this post.

Related

Prevent $.pjax from moving dynamic script tags to the head section

We implemented $.pjax in a CodeIgniter application a few months ago. And it seemed to be working perfect. Recently users started complaining that some buttons had strange behaviours sometimes. After debugging a while, we discovered that PJAX is moving script tags from the freshly loaded fragment to the head section of the document.
This is great, you would think, because title and css resources are also moved to the head. We can benefit from this (pushstate, browser tab name, ...).
Sadly, clicking another pjax link will not remove these added script/css tags. This can get strange when bindings to an element with the same id or class are present in the other newly added scripts.. It tends to break things.
Does anyone know how to remove earlier added script tags (not all, only those added by pjax)? Currently the only way out is to drop pjax.. But I love it to much :(
As the title of this question suggests, we think the easiest way might be to prevent $.pjax from moving the tags from the fragment to the head in the first place.
It has been a while since I asked this question. We found a workaround for this pjax behaviour.
pjax only moves 'linked' javascript and css sources. When the code is in the partial, it will stay at the same place and will be executed once the partial content is added to the DOM.
At Github some suggested to use context="inline" on the <script> tags that shouldn't be moved to the <head> section.
So our solution for scripts in partial views:
<script type="text/javascript" context="inline">
<?= file_get_contents(js_url().'controllers/'.$jsController.'.js'); ?>
</script>
Obviously one should check if the file exists before reading it with PHP.
This Github 'issue' pointed us in te right direction
Another conversation on this topic

HTML Input onclick to javascript? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I'm new to JavaScript and I'm trying to link my button to a external function in a JavaScript file on my c: drive. The current code looks like
<button type="button" id="btnPoint" style="width: 90px; height: 30px;" onClick="MapPoint()" >
What I want it to do is to go to the JavaScript file (src="./_JavaScript/Map.js) and run the MapPoint() function. This has to be possible?
Thanks,
<button type="button" id="btnPoint" style="width: 90px; height: 30px;" onClick="JavaScript:MapPoint()" >
Include the JavaScript file with this in the header
<script src="./_JavaScript/Map.js"></script>
You need to include the external file that contains the function.
In your html add the script tag to the javascript file loc:
<script type="text/javascript" src="path/to/jsfile/js"></script>
You have two basic routes:
You can open your static html file that uses relative links everywhere to reference your additional resources. So you can include your javascript file using <script src="./_JavaScript/Map.js"></script> if Map.js is in the _JavaScript folder along with your HTML file.
You can have a Webserver hosted locally on your machine to serve static and dynamic content from your machine. A good place to start with this is by using a WAMP application stack.
The easiest/simplest would be to do the following:
Run your HTML thru a web server (Apache on *nix or IIS on Windows)
Put the HTML file and javascript file in the same folder
Edit the HTML file to include a line at the bottom: <script src="Map.js"></script>
Make sure the MapPoint() is properly defined in your Map.js file
Do as agressen said and then to add event on your button try this
var bt = document.getElementById('btnPoint');
bt.addEventListener('click', function () { MapPoint();}, false);
What you have will actaully work just fine as long as you have a function called "MapPoint" defined on your page.
Your function should be available to this page either included in the page or linked to an external file. It can be hosted online somewhere or just relative to this page's URL... but it shouldn't be linked to off your actual C:\ (for security reasons... and when you do publish this page it won't work).
The purists will suggest a few changes to your code though.
If you use the onclick attribute, most developers these days use all lower case
Typically functions start with a lowercase letter by convention... e.g. mapPoint();
For cleanliness you'll likely want to put those functions in a separate file that can be cached by the end user's browser (using an expires header)
If you end up using jQuery (or something similar) you can make you code a bit cleaner (although a bit abstract) by not using the onclick attribute but rather binding the event to the element through a jQuery selector
To include your function in an external file just add a tag like this to your page.
<script src="./JavaScript/Map.js"></script>
For legacy reasons the closing tag is required. Place the tag inside the <head>...</head> tag if you are unsure where to put it, but if you know it won't be needed until after the page has loaded the best place to put it is just before the closing </body> tag.
If you do end up using jQuery there's several ways to bind this event but the easiest is to use jQuery's click method:
$('#btnPoint').click(function(){
//do what you want here... or even call another method
mapPoint();
});

jQuery not working when the page loads [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I have built a simple page on my localhost and then I have uploaded it on the net. When the page is viewed from local machine, all jQuery interactions works well without any problem. But when I view the hosted page, nothing happens. It seems a plugin + jQuery are not loaded properly, though I see them loaded (using firefox view source code, I check the scripts address and see their source without 404 error).
I appreciate any help. Here is the address:
http://tarjom.ir/demo/niazer/
The jQuery interaction is that when the user clicks on the search bar, a box slides down which contains many search-categories.
And also the thumbnails at the bottom of the red line moves when mouse hovers it. Now, you probably wouldn't see any of these stories.
The page is written using codeigniter.
EDIT EDIT
the scripts and CSS are loaded automatically using a library written for codeigniter. But the generated HTML markup for browser is as follows:
<script type="text/javascript" src="http://tarjom.ir/demo/niazer/js/blue/2-prettyCheckable.js"></script>
<script type="text/javascript" src="http://tarjom.ir/demo/niazer/js/blue/1-jquery.js"></script>
<script type="text/javascript" src="http://tarjom.ir/demo/niazer/js/blue/mtSlideElement.js"></script>
prettyCheckable is a jQuery plugin, you need to include it after you call jquery, change the order you are including the scripts so it looks like this:
<script type="text/javascript" src="http://tarjom.ir/demo/niazer/js/blue/1-jquery.js"></script>
<script type="text/javascript" src="http://tarjom.ir/demo/niazer/js/blue/2-prettyCheckable.js"></script>
2-prettyCheckable.js has a semicolon as its first character and there is no method called prettyCheckable in it. Did a few lines get cut out of this script by accident?
Your pages has two 'html', 'head' tags, you might want to remove them. And put all those javascript into a single.js file and call include it just before tag.
There is are definition for prettyCheckable();
You have loaded two jQuery, at first jQuery v1.10.2 and then prettyCheckable.js and then again jQuery v1.10.1, this is the problem because, once prettyCheckable extended the core jQuery and then you loaded again another jQuery and it's completely new. This the order
http://tarjom.ir/demo/niazer/js/blue/1-jquery.js // loaded
http://tarjom.ir/demo/niazer/js/blue/2-prettyCheckable.js // jQuery.fn extended
http://code.jquery.com/jquery-1.10.1.min.js // old jQuery replaced

Loading a script in the <body> section

I have a javascript for a specific page that I do not wish to be loaded in my header section. Is it possible to load it in the section of the HTML.
Currently I have all my js code inside the but I want to remove it to a seperate js file that I can load.
I tried using this but it did not work.
<script type="text/javascript" src="<?php echo base_url();?>js/jquery-1.5.1.min.js"></script>
Thanks
Q1 : I have a javascript for a specific page that I do not wish to be loaded in my header section. Is it possible to load it in the section of the HTML.
-Yes you can load javascript any where you want, if writing inline code then make sure you add script tag around your code.
-also you can request files like in body
Q2: Currently I have all my js code inside the but I want to remove it to a seperate js file that I can load.
-- no problem in that, thats even better practice.
Q3 Requesting external file
to request external files you write below written fashion
<script src="http://file_name.js" type="text/javascript"></script>
It's not only possible (ref), it's frequently a good idea.
Putting your scripts as late in the page as possible, which frequently means just before the closing </body> tag, means the browser can parse and display your content before stopping to go download your JavaScript file(s) (if external) and fire up the JavaScript interpreter to run the script (inline or external).
Putting scripts "at the bottom" is a fairly standard recommendation for speeding up the apparent load time of your page.
Yes it is possible. Try and see.
For debugging, hardcode the jquery full path.
It is sometime recommended to load it at the end of the of the body, to make the main content of the page load faster.
Is it possible to load it in the section of the HTML.
Yes.
From the spec:
<!ELEMENT BODY O O (%block;|SCRIPT)+ +(INS|DEL) -- document body -->
SCRIPT is among the elements that may be a child of the BODY elements. Numerous other elements may also have SCRIPT children.
<script type="text/javascript" src="<?php echo base_url();?>js/jquery-1.5.1.min.js"></script>
When I run echo base_url() I get my the hostname of my server. This would result in a URL such as example.comjs/query-1.5.1.min.js. You probably should drop that PHP snippet entirely and just use: src="/js/jquery-1.5.1.min.js" which would resolve to http://example.com/s/query-1.5.1.min.js.
Yahoo engineers recommendation for higher performance is to include your scripts at the end of your HTML, just before </body> tag. Therefore, it's even better.
To see where the problem is, you gotta first make sure that your js file is loading. User Firebug and go to scripts tab. Do you see your script? If not, then something is wrong with your path.
it should work...
Did you try to view the generated source and see if the PHP code indeed generated the right path?
beside that, it is recommended to load jQuery from a CDN such as google's :
https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js

Including client-side scripts in head in ASP.NET

Hey guys. I don't do HTML or Javascript, I prefer to work in C#, but one of the JS guys tells me that he needs a script included within the head tag. The page in question is a content page of a master page. I can't seem to make this work. I tried adding the script by a programmatic reference this.ClientScript.RegisterClientScriptInclude, but it came out in the <body> tag. I tried adding a ScriptManager and a ScriptReference in the contentplaceholder inside the <head> tag of the master page, but this didn't work either. How can this be accomplished?
Just put a client side reference to the script in.
<head> <script lang="Javascript" src="./scripts/yourscript.js"></script>
Or, if it needs to be inline, include the actual script right there in the master page.

Categories