Deferring Javascript parsing giving error

Deferring Javascript parsing giving error - javascript

I purchased a theme. Modified it. However , it was loading slow. I compressed the images, and used gzip. I read somewhere that deferring JS parsing may help even further. So, I deferred them using the following script added just below the body tag. Now, the page wont even load.
<script type="text/javascript" charset="utf-8">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "js/filename.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>
List of scripts I use:
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&language=en"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/styleswitch.js"></script>
<script type="text/javascript" src="js/jquery.nav.js"></script>
<script type="text/javascript" src="js/jquery.sticky.js"></script>
<script type="text/javascript" src="js/jquery.parallax-1.1.3.js"></script>
<script type="text/javascript" src="js/jquery.lavalamp-1.4.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo.js"></script>
<script type="text/javascript" src="js/rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
<script type="text/javascript" src="js/rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
<script type="text/javascript" src="js/jquery.carouFredSel-6.1.0-packed.js"></script>
<script type="text/javascript" src="js/jquery.bxslider.min.js"></script>
<script type="text/javascript" src="js/jquery.colorbox.js"></script>
<script type="text/javascript" src="js/jquery.isotope.min.js"></script>
<script type="text/javascript" src="js/fancybox/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="js/jquery.gmap.js"></script>
<script type="text/javascript" src="js/flex-slider.min.js"></script>
<script type="text/javascript" src="js/jquery.placeholder.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/jquery.tweet.js"></script>
<script type="text/javascript" src="js/main.js" charset="utf-8"></script>

You probably meant something like this:
function downloadJSAtOnload( script) {
var element = document.createElement("script");
element.src = script;
document.body.appendChild(element);
}
function downloadAllScripts () {
downloadJSAtOnload( 'js/jquery.js');
downloadJSAtOnload( 'js/bootstrap.min.js');
//etc
}
if (window.addEventListener)
window.addEventListener("load", downloadAllScripts, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadAllScripts);
else window.onload = downloadAllScripts;

Related

Jquery hide() , show() function is not working

i am using codeigniter bonfire for creating a web applicaion. i am using simple hide() and show() function of jquery but its not working. i will check all scripts no error on console..i cant understand why its not working.
I include jquery files are in ways :-
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places"></script>
<script src="http://localhost/hungary_duniya/bonfire/themes/restaurant/assets/js/jquery-2.1.0.min.js" type="text/javascript" ></script>
<script src="http://localhost/hungary_duniya/bonfire/themes/restaurant/assets/js/before.load.js" type="text/javascript" ></script>
<script src="http://localhost/hungary_duniya/bonfire/themes/restaurant/assets/js/jquery-ui.min.js" type="text/javascript" ></script>
<script src="http://localhost/hungary_duniya/bonfire/themes/restaurant/assets/js/jquery-migrate-1.2.1.min.js" type="text/javascript" ></script>
<script src="http://localhost/hungary_duniya/bonfire/themes/restaurant/assets/bootstrap/js/bootstrap.min.js" type="text/javascript" ></script>
<script src="http://localhost/hungary_duniya/bonfire/themes/restaurant/assets/js/richmarker-compiled.js" type="text/javascript" ></script>
<script src="http://localhost/hungary_duniya/bonfire/themes/restaurant/assets/js/smoothscroll.js" type="text/javascript" ></script>
<script src="http://localhost/hungary_duniya/bonfire/themes/restaurant/assets/js/bootstrap-select.min.js" type="text/javascript" ></script>
<script src="http://localhost/hungary_duniya/bonfire/themes/restaurant/assets/js/jquery.hotkeys.js" type="text/javascript" ></script>
<script src="http://localhost/hungary_duniya/bonfire/themes/restaurant/assets/js/jquery.nouislider.all.min.js" type="text/javascript" ></script>
<script src="http://localhost/hungary_duniya/bonfire/themes/restaurant/assets/js/custom.js" type="text/javascript" ></script>
<script src="http://localhost/hungary_duniya/bonfire/themes/restaurant/assets/js/maps.js" type="text/javascript" ></script>
<script src="http://localhost/hungary_duniya/bonfire/themes/restaurant/assets/js/star-rating.min.js" type="text/javascript" ></script>
<script src="http://localhost/hungary_duniya/bonfire/themes/restaurant/assets/js/jquery.gmap.min.js" type="text/javascript" ></script>
<script src="http://localhost/hungary_duniya/bonfire/themes/restaurant/assets/js/locationpicker.jquery.min.js" type="text/javascript" ></script>
<script src="http://localhost/hungary_duniya/bonfire/themes/restaurant/assets/js/bootstrap-editable.min.js" type="text/javascript" ></script>
<script src="http://localhost/hungary_duniya/bonfire/themes/restaurant/assets/js/jquery.timeago.js" type="text/javascript" ></script>
<script src="http://localhost/hungary_duniya/bonfire/themes/restaurant/assets/js/jquery.magnific-popup.js" type="text/javascript" ></script>
All files are included correctly. There is no problem to including files.
Jquery code is-:
<script>
function regis_form() {
$('#is_owner').change(function() {
if (this.checked) {
$('#registration_fields').show();
} else
$('#registration_fields').hide();
});
}
</script>
And at a footer i am calling regis_form(); like :-
$(document).ready(function(){
regis_form()
});
Function is also calling correctly but div is not showing or hiding. Is any problem with sequence of including jquery files?

This below snippet seems to work for me,
<html>
<head>
<script src="https://jqueryjs.googlecode.com/files/jquery-1.3.2.js" type="text/javascript" ></script>
<script>
function regis_form()
{
$('#is_owner').change(function () {
console.log("checked"+this.checked);
if(this.checked)
{
$('#registration_fields').show();
}
else
$('#registration_fields').hide();
});
}
</script>
</head>
<body>
<input type="checkbox" id="is_owner" />
<div id="registration_fields">
<p>Content visible</p>
</div>
<footer>
<script>
$(document).ready(function(){
regis_form();
});
</script>
</footer>
</body>
</html>
function regis_form() {
$('#is_owner').change(function() {
console.log("checked" + this.checked);
if (this.checked) {
$('#registration_fields').show();
} else
$('#registration_fields').hide();
});
}
$(document).ready(function() {
regis_form();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="is_owner" />
<div id="registration_fields">
<p>Content visible</p>
</div>

First below script put on your header file
then you will use it
Jquery('#id').hide();
or
Jquery('#id').show();

Reason:
Function called but the problem is event not fired.
Solution:
Include jquery
<script src="http://localhost/hungary_duniya/bonfire/themes/restaurant/assets/js/jquery-2.1.0.min.js" type="text/javascript" ></script>
put the code in $(document).ready function
$(document).ready(function(){
$('#is_owner').click(function () {
//console.log($(this).prop("checked));
if($(this).prop("checked") == true){
$('#registration_fields').show();
}else{
$('#registration_fields').hide();
}
});
});
Hope it helps.....

optimizing javascript for src tags

I have a list of javascript calls for a page such as:
<!-- page scripts -->
<script src="/js/jquery-ui-1.10.3.custom.min.js"></script>
<script src="/js/jquery.chosen.min.js"></script> <!-- not used but we should -->
<script src="/js/jquery.cleditor.min.js"></script><!--used-->
<script src="/js/jquery.autosize.min.js"></script>
<script src="/js/jquery.placeholder.min.js"></script>
<script src="/js/jquery.maskedinput.min.js"></script>
<script src="/js/jquery.inputlimiter.1.3.1.min.js"></script>
<script src="/js/bootstrap-datepicker.min.js"></script>
<script src="/js/bootstrap-timepicker.min.js"></script>
<script src="/js/moment.min.js"></script>
<script src="/js/daterangepicker.min.js"></script>
<script src="/js/jquery.hotkeys.min.js"></script>
<script src="/js/bootstrap-wysiwyg.min.js"></script>
<script src="/js/bootstrap-colorpicker.min.js"></script>
<script src="/js/jquery.knob.modified.min.js"></script>
<script src="/js/raphael.min.js"></script>
<script src="/js/justgage.1.0.1.min.js"></script>
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="/js/js/excanvas.min.js"></script><![endif]-->
<script type="text/javascript" src="/js/ui-sliders-progress.js"></script>
<!-- inline scripts related to this page -->
<script src="/js/pages/form-elements.js"></script><!--used-->
<script type="text/javascript" src="/js/stripe.js"></script>
<script type="text/javascript" src="/js/index.js"></script>
How can I possibly optimize this and make my pages faster

Multiple Versions of jQuery, linking with google no help and neither is noConflict

I need to have a jquery countdown, carousal and responsive menu on my site, but can't get all of them to work together.. I have tried using the google libraries but then one, two or all of the scripts stop working all together.
Here is the code without the noconflict as it was not working...
<script type="text/javascript" src="/Includes/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/Includes/jquery.jcarousel.min.js"> </script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel();
});
</script>
<script type="text/javascript" src="/Includes/Resp_Menu_Files/js/jquery-1.10.1.min.js"> </script>
<script type="text/javascript" src="/Includes/Resp_Menu_Files/js/orion-menu.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery().orion({
speed: 500
});
});
</script>
Any suggestions?

<script type="text/javascript" src="/Includes/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/Includes/jquery.jcarousel.min.js"> </script>
<script type="text/javascript">
jq142 = jQuery.noConflict(true);
</script>
<script type="text/javascript" src="/Includes/Resp_Menu_Files/js/jquery-1.10.1.min.js"> </script>
<script type="text/javascript" src="/Includes/Resp_Menu_Files/js/orion-menu.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jq142('#mycarousel').jcarousel();
jQuery().orion({
speed: 500
});
});
</script>

no json from array in javascript

The below code is intended to return json object from arraylist but it is not showing alert.
there is no js error...
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="json.js" />
<script type="text/javascript" src="json2.js" />
<script type="text/javascript">
var my_info= {};
my_info["john"]="1a";
my_info["joseph"]="2b";
my_info["helen"]="3c";
var val = JSON.stringify(my_info);
alert(val);
</script>
</head>
<body>
</body>
</html>

Script tags don't allow self-closing (<script ... />). You have to use <script src="..."></script> instead.
See for more information this question.
Your code becomes:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="json.js"></script> <!-- Here -->
<script type="text/javascript" src="json2.js"></script> <!-- And here -->
<script type="text/javascript">
var my_info= {};
my_info["john"]="1a";
my_info["joseph"]="2b";
my_info["helen"]="3c";
var val = JSON.stringify(my_info);
alert(val);
</script>
</head>
<body>
</body>
</html>
JSFIDDLE (ignore the warnings)

New popup does not point to javascript links and libraries

I use this function to open a new window using the htmlMarkup as html content.
function PC_DownloadAsPdfSuccess(htmlMarkup) {
$("div#rightcolumnFARP").detachLoader();
if (htmlMarkup != null && htmlMarkup.length != 0) {
var printWindow = window.open("", "");
var newDocument = printWindow.document;
newDocument.open();
newDocument.write(htmlMarkup);
newDocument.close();
}
}
The new page is working as expected, except that is does not recognise the include js libraries, such as jquery, MicrosoftMvcAjax.js, etc. I get all sorts of error like:
$ is not defined, jquery is not defined, xVal is not defined. I'm pretty sure it's because the path for the links in the new window do not point correctly to the scripts, but only in IE. Firefox does not have this issue.
Here is the head htmlMarkup that seems to be the problem. I've tried playing with the path by going up several levels (using ../) but still no luck.
<head id="Head1"><title>
Print preview
</title>
<script src="/Scripts/jquery-1.6.1.min.js" type="text/javascript"></script>
<link href="/Content/ui.base.css" rel="stylesheet" type="text/css"
media="screen" />
<script src="/Scripts/utils.js" type="text/javascript"></script>
<script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="/Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
<script src="/Scripts/MicrosoftMvcValidation.js" type="text/javascript"></script>
<script src="/Scripts/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.preloadImages.js" type="text/javascript"></script>
<script src="/Scripts/grid.locale-en.js" type="text/javascript"></script>
<script src="/Scripts/grid.base.js" type="text/javascript"></script>
<script src="/Scripts/grid.formedit.js" type="text/javascript"></script>
<script src="/Scripts/jquery.tablednd_0_5.js" type="text/javascript"></script>
<script src="/Scripts/xVal.jquery.validate.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate/jquery.validate.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery-html-encode-decode.js" type="text/javascript"></script>
<script src="/Scripts/jquery-timedLogout.js" type="text/javascript"></script>
<script src="/Scripts/round-corners.js" type="text/javascript"></script>
<script src="/Scripts/superfish.js" type="text/javascript"></script>
<script src="/Scripts/jquery.formatCurrency-1.3.0.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.tipTip.js" type="text/javascript"></script>
<script src="/Scripts/easyslider.js" type="text/javascript"></script>
<script src="/Scripts/jquery.json.min.js" type="text/javascript"></script>
<script src="/Scripts/browserSelector.js" type="text/javascript"></script>
<script src="/Scripts/jquery.antiForgeryToken.js" type="text/javascript"></script>
<script src="/Scripts/jquery.watermark.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.autocomplete.js" type="text/javascript"></script>
<script src="/Scripts/jquery.calculation.js" type="text/javascript"></script>
<script src="/Scripts/DetectBrowser.js" type="text/javascript"></script>
<script src="/Scripts/jquery.infoblock.js" type="text/javascript"></script>
<script src="/Scripts/jquery.jloader.js" type="text/javascript"></script>
<script src="/Scripts/jqGridHeight.js" type="text/javascript"></script>
<script src="/Scripts/jquery.alerts.js" type="text/javascript"></script>
<script src="/Scripts/tabs.js" type="text/javascript"></script>
<script src="/Scripts/CustomValidation.js" type="text/javascript"></script>
<script src="/Scripts/fullcalendar.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript" src="/Scripts/jqplot/jquery.jqplot.min.js"></script>
<script language="javascript" type="text/javascript" src="/Scripts/jqplot/plugins/jqplot.pieRenderer.js"></script>
<script language="javascript" type="text/javascript" src="/Scripts/jqplot/plugins/jqplot.barRenderer.js"></script>
<script language="javascript" type="text/javascript" src="/Scripts/jqplot/plugins/jqplot.categoryAxisRenderer.js"></script>
<script language="javascript" type="text/javascript" src="/Scripts/jqplot/plugins/jqplot.dateAxisRenderer.js"></script>
<script language="javascript" type="text/javascript" src="/Scripts/jqplot/plugins/jqplot.barRenderer.js"></script>
<script language="javascript" type="text/javascript" src="/Scripts/jqplot/plugins/jqplot.canvasAxisTickRenderer.js"></script>
<script language="javascript" type="text/javascript" src="/Scripts/jqplot/plugins/jqplot.canvasTextRenderer.js"></script>
<script language="javascript" type="text/javascript" src="/Scripts/jqplot/plugins/jqplot.highlighter.js"></script>
<script language="javascript" type="text/javascript" src="/Scripts/jqplot/excanvas.min.js"></script>
<head>

This is because u have already opened the window, which would have finished the loading event, after that u are placing the content, so the content is treated as text and the script functions are not loaded to your window you have opened. If suppose if have the javascript functions written openly on the window within script tag it would have worked, since the external script files are not got loaded, u are getting those errors, try some other way to fix ur problem

Develop Reference

JavaScript is the programming language of the Web.

Deferring Javascript parsing giving error - javascript

Related

Jquery hide() , show() function is not working

optimizing javascript for src tags

Multiple Versions of jQuery, linking with google no help and neither is noConflict

no json from array in javascript

New popup does not point to javascript links and libraries

Categories

Resources