Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I have a javascript file file.js and I have a function FunctionfromJSpage() in that js page, first from onclick I was calling the function aspxPageFunction(); then from this function I need to call FunctionfromJSpage(); which is located in file.js.
I tried like this in default.aspx
<head>
<script type="text/javascript" src="../page/file.js"></script>
<script type="text/javascript">
function aspxPageFunction() {
//my code..
FunctionfromJSpage();
}
</script>
</head>
But I am unable to call that function.
harish,
I think what you're looking for is to add the function you've now defined (as Quentin pointed out) to an attribute of an existing asp control. For example:
<td>
<asp:Button ID="Button2" runat="server" OnClientClick="YourFunction(); " Text="ClickMe"/>
</td>
You can do all sorts of things using this kind of methodology. It all depends on what you want to do. If you're trying to get something to happen when a user puts text in a textbox, you'll need to research the OnTextChanged event, dropdowns have the onchange event..perhaps a crash course in asp events might be useful to help you understand more about where to attach such things.
For client side (javascript events).
For server side - what we're talking about here - (asp events).
It looks like you're just starting to figure out the client server relationship and what you need to do to make things happen (I could be very wrong there though). If this is the case, I wish you well! I agree with the other posters - you should explore Google and this site a bit more, as these are VITAL resources to finding breakthrough on your coding endeavors.
-sf
The code you have in your script element defines a function.
You say that you have defined it in file.js. To call it you just callFunction().
<script type="text/javascript" src="../page/file.js"></script>
<script type="text/javascript">
callFunction();
</script>
Add the onload attribute to your body, this will call your function when the page loads <body onload="callFunction()">
or in codebehind
Page.ClientScript.RegisterClientScriptBlock(Page.GetType(), "scriptKey", "callFunction();",true);
Have a look at this great article http://www.codeproject.com/Articles/11098/Use-Call-RegisterStartUpScript-RegisterClientScrip
Related
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 3 years ago.
Improve this question
I have my adress written in 30 html pages on my website. When I move I am going to want to change the address. Instead of going through the code and changing it for all pages, I am looking for a method to change it in one place.
What would be the best practice for this sort of problem? There will probably not be that many references that would need to be stored. Any help on the matter will be appreciated.
There are literally dozens of ways to do this kind of thing. You could rewrite your website in any of the wide variety of server side languages, whether it's a scripting language like PHP or a compiled language like C# or Java.
You don't have to go that drastic, though. You can simplify it by including references in your pages. This can be a direct usage of another HTML file, or it can be a JavaScript file. The link below shows how to do the HTML file linkage using JQuery, as well as JavaScript. JavaScript doesn't have to be difficult and it can be referenced from all your pages, so it can have all the things in one file that you want to change, allowing you to change one file and it reflect on all your other pages.
HTML include with JQuery: (if you aren't already using JQuery, I'd hesitate to use a whole library to do one function that can be done in vanilla JS just as easily)
a.html:
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#includedContent").load("b.html");
});
</script>
</head>
<body>
<div id="includedContent"></div>
</body>
</html>
b.html:
<p>This is my include file</p>
Or JavaScript:
a.html:
<html>
<body>
<h1>Put your HTML content before insertion of b.js.</h1>
...
<script src="b.js"></script>
...
<p>And whatever content you want afterwards.</p>
</body>
</html>
b.js:
document.write('\
\
<h1>Add your HTML code here</h1>\
\
<p>Notice however, that you have to escape LF's with a '\', just like\
demonstrated in this code listing.\
</p>\
\
');
Include another HTML file in a HTML file
If you are using PHP already, there's a good chance you can do it with the PHP you're already using by reading from a text file and inserting the HTML text into the page you are generating.
<?php
// do php stuff
include('fileOne.html');
// or //
readfile('fileTwo.html');
?>
how to embed html files in php code?
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 3 years ago.
Improve this question
I have trouble running some code before page loads in jquery or js. Anything I do the page would have a brief load then my codes run. I run code before user sees the page but it loads in a brief milliseconds then my code runs.
I have done some solutions and didn't do what I want:
I've put my codes before document.ready
I've put my code in head section
I've put my code in a function then called the function in head tag
I also tried onload() in js
But the same result: my code runs after milliseconds and user sees the page before running code in these milliseconds
Any ideas?
Start with body hidden and show it after your code is executed.
<html>
...
<body style='display:none'>
...
<script>
$(document).ready( function() {
...
$(document.body).show();
})
</script>
</body>
</html>
Scripts inside the <head> will run before this occurs, but there won't be access to the elements on the page.
Try this code
<body>
<script type="text/javascript">
alert("After click ok you'll see the page content!!!");
</script>
rest of the page
</body>
You could put your code in 'loading' state of document via document.readyState but in this state DOM is not ready to operate. Here your have example how to use document.readyState https://developer.mozilla.org/en-US/docs/Web/API/Document/readyState#Different_states_of_readiness What actualy do you want to do?
You shouldn't but anycode in <head>
My suggestion is to use loader, so make the body tag invisible using css display:none
so your code will be run as if the page isn't loaded yet.
then you add $(document).ready({$('body').css('display','block')})
Jquery and Javascript are client side languages, and are read by the browser as the page loads.
Usually we would use something like:
$(document).ready(function(){
//do stuff
});
This is to make sure the elements are loaded on screen before the JS functions run to make sure any elements that are needed for the script have been loaded.
What you seem to be doing is running the script at the same time as the page loads so there might be something in the script that prevents the rest of the HTML from loading as this is running and thats why you see the load time.
You should look at PHP. (hypertext pre-processor) This is a server side language rather than client side. So it pre-processes what you want server side and then sends that to the users client/browser.
Check out http://www.developphp.com/
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.
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();
});
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