I am using the colorbox on my site due to this the page is loading very slowly in IE as comparison to other browsers. When I remove the colorbox jQuery file the pages are loading fine. How can I resolve this? I am using the following scripts on my site:
<script src="js/script.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> </script>
<script type="text/javascript" src="js/jquery.colorbox-min.js"></script>
<?php if($_GET['s']=="invoices") {?>
<script src="js/thickbox1.js" type="text/javascript"></script>
<?php } else {?>
<script src="js/thickbox.js" type="text/javascript"></script>
<?php }?>
<script src="js/jquery.treeview.min.js" type="text/javascript"></script>
<script src="js/jquery.tipTip.minified.js" type="text/javascript"></script>
You could try defering script execution. This way it would be executed later, when the page is already loaded. Also, you can put it in the end of your HTML document, right before the closing </body> tag. The browser could then render most of the UI and only then load "colorbox".
Here's an option: Load your scripts via JavaScript on DOM ready.
Consider the following:
if (window.addEventListener) { // for non-crappy browsers
window.addEventListener('load', loadHandler, false);
} else if (window.attachEvent) { // for IE
window.attachEvent('onload', loadHandler);
}
function loadHandler() {
var scripts = {
'scripts': {
'src': 'js/scripts.js',
'type': 'text/javascript'
},
'jquery': {
'src': 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js',
'type': ''
},
'colorbox': {
'src': 'js/jquery.colorbox-min.js',
'type': 'text/javascript'
},
'thickbox1': {
'src': 'js/thickbox1.js',
'type': 'text/javascript'
},
'thickbox': {
'src': 'js/thickbox.js',
'type': 'text/javascript'
},
'treeview': {
'src': 'js/jquery.treeview.min.js',
'type': 'text/javascript'
},
'tipTip': {
'src': 'js/jquery.tipTip.minified.js',
'type': 'text/javascript'
}
};
for (var key in scripts) {
script = document.createElement('script');
script.src = scripts[key]['src'];
script.type = scripts[key]['type'];
document.body.appendChild(script);
}
}
This way, your scripts will only load when the page is ready.
Related
I have a base.js file that called from my index.html file and this base.js call script script1.js or script2.js according to parameter passed to the base.js file and then I have another script called editor.js will call a function -with the same name but different implementation- from script1.js or script2.js, so my question is how I execute the function after loading the script1.js or script2.js
Samples of what I mean:
index.html
<html>
<head>
<meta charset="utf-8">
<title>Rich Text Editor</title>
<link rel="stylesheet" type="text/css" href="content/css/app-min.css">
</head>
<body>
<div class="new-question page">
<p>
<textarea id="textBox1" class="html-editor" cols="70" rows="10">
</textarea>
</p>
<p>
<button id="submit">Submit</button>
</p>
</div>
<script type="text/javascript" src="base.js"></script>
<script>
LoadFunction("multiply");
</script>
<script type="text/javascript" src="editor.js"></script>
<script type="text/javascript" src="content/js/script.js"></script>
<script type="text/javascript" src="content/js/custom-script.js"></script>
</body>
</html>
base.js
let LoadFunction = function (type) {
//loading localization script
let script = document.createElement('script');
script.type = 'text/javascript';
document.querySelector('body').appendChild(script );
if(type == "multiply")
script.src = `script1.js`
else
script.src = `script2.js`
}
script1.js
function Calculate(a,b){
return a*b;
}
script2.js
function Calculate(a,b){
return a+b;
}
editor.js
var result = Calculate(5,9);
console.log(result);
Consider reading more about Promises
https://developer.mozilla.org/he/docs/Web/JavaScript/Reference/Global_Objects/Promise
the following is an example using your code,
I don't think it fully do what you're looking for (as I called the loadFunction in the editor.js and not in the main file, but I believe this example + the documentation above will help you get the idea). Good luck :)
base.js
let loadFunction = function (type) {
//loading localization script
let script = document.createElement('script');
script.type = 'text/javascript';
document.querySelector('body').appendChild(script );
if(type == "multiply")
script.src = `script1.js`
else
script.src = `script2.js`
// return a promise
return new Promise((res, rej) => {
script.onload = function() {
res();
}
script.onerror = function () {
rej();
}
});
}
editor.js
loadFunction('multiple')
.then(() => {
// The script file has been loaded.
// We can use the function.
var result = Calculate(5,9);
console.log(result);
})
.catch(() => {
console.error('Could not load the script file.');
});
Haven't fully tested the code.
I have JavaScript code that send data to backend which when I place inline then work fine but when I place in external file it does not work. Meanwhile other JavaScript is working in external file.
<script>
$('#submit-ajax').click(function(event) {
console.log('working or not')
$.post(
'/order/detail/',
{
'test': 'hi i am here',
},
function() {
alert( "Data Loaded: " );
}
)
});
</script>
in external file code is:
$(document).ready(function(){
$('#submit-ajax').click(function(event) {
console.log('working or not')
$.post(
'/order/detail/',
{
'test': 'hi i am here',
},
function() {
alert( "Data Loaded: " );
}
)
});
}
I tried a simple example,
HTML code: Relative path of external JS you need to give
<!DOCTYPE html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="(path of external js)\refJS.js"></script>
</head>
<body>
<div id="submit-ajax">
click me
</div>
</body>
In JS external file :
$(document).ready(function(){
$('#submit-ajax').click(function(event) {
console.log('working or not');
});
})
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 9 years ago.
I'm having this problem with my site. I'm trying to get 2 scripts to run on the same page but one will not work unless I delete either:
<script src="js/jquery.op.loc.min.js"></script>
or
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
Here is the javascript code I have inserted into the section of my page:
<script src="js/jquery.op.loc.min.js"></script>
<link type="text/css" rel="stylesheet" href="css/jquery.op.loc.min.css" />
<script>
jQuery(document).ready(function ($) {
$("#default-usage .to-lock").loc({
text: {
header: "How are you today?",
message: "Hello!"
},
theme: "secrets",
buttons: {
order: ["twitter-tweet", "facebook-like", "google-plus"]
},
twitter: {
tweet: {
url: "http://twitter.com",
text: "tweet!"
}
},
facebook: {
like: {
url: "http://facebook.com"
},
appId: "427542137301809"
},
google: {
plus: {
url: "http://google.com"
}
}
});
});
</script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="<?php if($network == "") {echo '';} elseif($network == "") {echo '';} echo $account_id; ?>"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div.process").fadeOut(0);
$("input.button").click(function() {
$('div.process div.bar').css("width", "0%");
$("div.process").fadeOut(0);
$("span.status span").empty();
$("span.status span").append("On hold");
$("span.status").css("color", "#FF0000");
var urlform = $("input.profile").val();
$.post("<?php echo $filename; ?>?post=1", {url:urlform}, function(data) {
var exploded = data.split('||');
var profileimage = exploded[0];
var profilename = exploded[1];
if(profilename !== "") {
$("img.profileimg").attr("src", profileimage);
$("span.profilename span").empty();
$("span.profilename span").append(profilename);
$("span.status span").empty();
$("span.status span").append("Searching for account");
$("span.status").css("color", "#FFFF00");
$("div.process").fadeIn("2000");
$('div.process div.bar').animate({
width: "200px"
}, 14000, function() {
$("span.status span").empty();
$("span.status span").append("Account found");
$("span.status").css("color", "#33FF00");
setTimeout(function() {startGateway('<?php echo $widget_id; ?>');}, 500);
});
} else {
$("span.status span").empty();
$("span.status span").append("Account not found!");
$("span.status").css("color", "#FF0000");
$("img.profileimg").attr("src", "img/blank.jpg");
}
});
});
});
</script>
I am a complete newbie when it comes to javascript so any help will be much appreciated!
There are a few things you can try to get this working.
Be sure your script is being pulled into the page, one way to check is by using the 'sources' tab in the Chrome Debugger and searching for the file else in the html head section
Be sure that you've included the other scripts after you've included jQuery, as it is most certainly dependant upon that.
Check whether jQuery is included properly and once only.
Watch out for jQuery conflicts. There is some other library which is overridding $, so your code is not working because $ is not an alias for jQuery anymore. You can use jQuery.noConflict() to avoid conflicts with other libraries on the page which use the same variable $.
I have a website that loads content via jQuery. When loading all my javascript and css files needed for facebox. It I put a link on the initial page, it works fine. However, when changing the 'innerHTML' of one element, the same links do not function.
And I even tried putting the javascript & css files in the innerHTML and it still doesn't work! It loads up as a new page.
Please help!
Thanks
Edit 1:
index.php
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="http://justtwobros.com/actions.js"></script>
<link href="src/facebox.css" media="screen" rel="stylesheet" type="text/css" />
<script src="lib/jquery.js" type="text/javascript"></script>
<script src="src/facebox.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox({
loadingImage : 'src/loading.gif',
closeImage : 'src/closelabel.png'
})
})
</script>
text (this link is the one that works)
<script>
showAllWorkOnLoad();
</script>
actions.js
function showAllWorkOnLoad() {
var thePostData = "filter=allwork";
$.ajax({
type: "POST",
url: "http://justtwobros.com/get_work.php",
data: thePostData,
success: function(theRetrievedData) {
document.getElementById('content').innerHTML = theRetrievedData;
$("#content").fadeIn(20);
focusButtonAllWork();
var count = 0;
$("#content").find('.work_thumbnail_wrapper').each(function() {
count++;
var timeWait = (count * 100) + 500;
var theId = $(this).attr('id');
var theIdDone = "#" + theId;
setTimeout(function(){$(theIdDone).fadeIn(300);},timeWait);
});
}
});
}
get_work.php
text (this link that doesn't work)
It doesn't work because that link does not have a listener attached to it. You can confirm this is your problem by adding this code after your ajax call (on success, after you have inserted the link into the document).
$('a[rel*=facebox]').facebox({
loadingImage : 'src/loading.gif',
closeImage : 'src/closelabel.png'
})
I'm trying to append a css file to an iframe that is created on a page from a global script. I can access part of it, but for some reason I can't append to the head. It's not throwing errors either, which is frustrating.
<script type="text/javascript">
$(document).ready(function() {
$('#outline_text_ifr')
.contents()
.find('head')
.append('<link type="text/css" rel="stylesheet" href="/include/outline.css" media="all" />');
});
</script>
var $head = $("#IFrame").contents().find("head");
var url = "Styles/styles.css";
$head.append($("<link/>", { rel: "stylesheet", href: url, type: "text/css" } ));
or
$('#IFrame').contents().find('#div1').css({
color: 'purple'
});