How to simplify my js code without loading the js file twice? - javascript

I hava many jsp page using the common function in body's onload and onunload event when using ocx control.So I extract the common function in one js file call common.js and import the js file in the jsp page.But I find the sometimes the jsp page could not execute the function in js file.Finally,I solve the problem in two way but I think there must have the other simple way?How to simplify my js code?
write all the js function in each jsp,it works well
in the each jsp file,includ the common.js,and in the jsp file the script call the function before load the common.js,but I think it have already be loaded two times
//init(),asynclogin_onclick(),logout_onclick() function is in the common.js file
<head>
<script type="text/javascript" src="/js/common.js"></script>
</head>
<body onload="init()" onunload="logout_onclick()">
$(function(){
$.getScript("/js/common.js")
.done(function(script,textStatus ) {
asynclogin_onclick();
});
});
I try to write the code like this,but it could not work.
$(function(){
asynclogin_onclick();
});

Related

Unable to use jQuery in the javascript function that define in external js

::SOLVED::
I have an index.php and I define some JavaScript function for do some thing in this page. I use jQuery in this functions. When I put the functions in the index.php between tags all thing work good but I need to put this functions in external is file. When I do it and then import it in index.php, the js file load and the part that don't use jQuery, work good but the jQuery actions not work! I have put the jQuery before is in head of index.php. the jQuery load and I test it by simple alert. I tried to put $(function).ready() surrounding the js function and other time surrounding the function content but it doesn't work!
<script language='javascript' src="/js/jquery-3.4.1.js"></script>
<script type="text/javascript" language='javascript' src="/js/external.js"></script>
And external js file like this:
function doSomething(){
//some JavaScript code that work good
//some jQuery code that doesn't work!
}
Where is wrong?!
Excuse me for my stupid question!
First of all write better HTML code.
<script src="/js/jquery-3.4.1.js"></script>
<script src="/js/external.js"></script>
function doSomething(){
console.log("I'm executed");
if (typeof jQuery !== 'undefined') {
console.log(jQuery.fn.jquery);
} else {
console.log("jQuery library not loaded check your Network tab");
}
}
Then seems your jQuery not loaded check your network tab for loaded scripts.

jQuery window on load is firing too early. What else can I use? Javascript in Wordpress

I'm learning jQuery and Javascript, and I'm trying to understand why my code is not working.
I'm doing this from inside a custom plugin in WordPress.
My javascript file with the function I'm trying to call is enqueued in the WordPress footer:
<script type='text/javascript' src='..... gf_timer.js?ver=1.1.0.1'></script>
and my PHP is generating items like the following:
<div id="gf_timer_1">Placeholder</div>
<script type="text/javascript">$j=jQuery.noConflict(); $j(window).on('load',gfInitTimer(1));</script>
I just want to call the function gfInitTimer() after each div. I keep on getting an error "gfInitTimer is not defined".
So I added the onclick handler as a test and that's finding the function properly:
<div id="gf_timer_1" onclick="gfInitTimer(1)">Placeholder</div>
<script type="text/javascript">$j=jQuery.noConflict(); $j(window).on('load',gfInitTimer(1));</script>
I thought the window.on('load', should fire after the page and all scripts are loaded.
What am I missing?
if you want to load gfInitTimer right after the page is loaded try using ready as shown:
$(document).ready(function(){
//run your gfInitTimer here
});

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>

Using a external .js file with knockout not applying bindings

I am trying to get to grips with Knockout and so I have created the following html file...
<html>
<head>
<script type='text/javascript' src='http://knockoutjs.com/downloads/knockout-3.2.0.js'></script>
<script type='text/javascript' src='jsfile.js'></script>
</head>
<h1>Welcome<h1>
<button data-bind="click: speak">Say it</button>
<script>
alert('Binding Started');
function indexViewModel() {
this.speak = function() {
alert('Working!!');
};
}
ko.applyBindings(new indexViewModel());
alert('Binding Done');
</script>
</html>
When I load the page all is well in the land of milk and honey. I get an alert that says the binding is starting.... Then I get another alert saying that its done and when I click the button... Yip you guessed it I get an alert stating that its working.
The problem I am having is when I try to separate the java-script code out into an external file it does not apply the bindings.
So my html file will look like this......
<html>
<head>
<script type='text/javascript' src='http://knockoutjs.com/downloads/knockout-3.2.0.js'></script>
<script type='text/javascript' src='jsfile.js'></script>
</head>
<h1>Welcome<h1>
<button data-bind="click: speak">Say it</button>
</html>
And my file "jsfile.js" looks like this....
alert('Binding Started');
function indexViewModel() {
this.speak = function() {
alert('Working asstastic');
};
}
ko.applyBindings(new indexViewModel());
alert('Binding Done');
When I now load the html page I get an alert for the binding starting and then ... Nothing...... :(
If I remove the line for the ko.applyBindings(.. then it gives me the second alert that the binding is done. however obviously the button does noting.
What am I doing wrong It seems like its not seeing the knockout functions in the .js file but I have hit a brick wall..
Please help..
The 'head' html tags will get loaded before the 'body' tags...
Your applying knockout bindings in your 'head' tags.
( in your custom .js file after including knockout )
These bindings / Javascript code is loaded / executed / happening before the body has been loaded;
Thus its / knockout is trying to bind js data to html body UI content which the browser / window does not yet know about.
p.s. - Put your content in a 'body' after the 'head'. Then include your custom .js file after the 'body,' this way everything is now loaded in order to achieve what you want. Alternatively... Include logic in the .js itself to execute after DOM / window has finished loading.
(Thanks to Jody Geers who pointed me in the right direction)
Ok I Was being an HTML noob..
No Body<>
Added them and then did the
<script type='text/javascript' src='jsfile.js'></script>
Works fine now..
Please put your js file after the Body .if you keep the Knock out js file in head then will not the UI with Model.As UIs are not found in the js file.

Jquery - Linking external .js file not working

For some reason the external .js file I am linking to isn't working. I am linking to it like so:
<script src="jquery.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
I have tested jquery using a simple inline script to hide a paragraph of text when it is clicked on so the jquery library is present and working.
The jquery.js file is in the same folder as the index.php file that is calling it.
What am I doing wrong?
This is the code I have in the external .js file currently just to test it is working(it isn't):
$("document").ready(function(){
$("p").click(function(){
$("p").css("color", "red");
});
});
Problem 1
It looks like jquery.js contains the code you wrote that depends on jQuery.
You need to load jQuery before you try to use it.
Swap the order of the <script> elements.
Problem 2
$("document") will wait for <document> elements to be ready. HTML doesn't have such a thing. Lose the quotes to pass in the document object directly.
Better yet, forget about the explicit call to ready and just
jQuery(function () { /* your function */ });

Categories