using Google Page Speed I can see it seems that Jquery UI and Jquery and other js-libraries are loaded multiple times even though I only include them once in my page:
How can I avoid this ?
UPDATE
My code looks like this (I have removed the main part of the html leaving all the javascript stuff):
<!doctype html>
<html lang="en" class="no-js" xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#"
xmlns:fb="http://www.facebook.com/2008/fbml" >
<head id="hdHead"><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><title>
My Page
</title>
<!--Utils-->
<link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="Mysite" /><meta name="viewport" content="width=980,initial-scale=1.0,maximum-scale=1.0,user-scalable=yes" />
<!-- For iPhone 4 with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/css/touch/gfx/hs-icons/h/apple-touch-icon.png" />
<!-- For first-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/css/touch/gfx/hs-icons/m/apple-touch-icon.png" />
<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="/css/touch/gfx/hs-icons/l/apple-touch-icon-precomposed.png" />
<!-- For nokia devices: -->
<link rel="shortcut icon" href="/css/touch/gfx/hs-icons/l/apple-touch-icon.png" /><link rel="shortcut icon" href="/css/gfx/favicon.ico" />
<!-- W3C way of 2005 for XHTML1.0 http://www.w3.org/2005/10/howto-favicon -->
<link rel="icon" type="image/png" href="/css/gfx/myspot.ico" />
<!--Styles-->
<link href="/plugins/jqueryui/css/custom-theme/jquery-ui-1.8.13.custom.css" rel="stylesheet" type="text/css" /><link rel="stylesheet" href="/css/desktop/myspot.min.css?v=2803" />
<!--[if lt IE 9]>
<link rel="stylesheet" href="/css/desktop/myspotoldie.css?v=0114" />
<![endif]-->
<!--[if IE]>
<link rel="stylesheet" href="/css/desktop/myspotie.css?v=0114" />
<![endif]-->
<!--scripts (more in page bottom-->
<script src="/scripts/libs/modernizr-1.7.min.js" type="text/javascript"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"
type="text/javascript"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined') {
console.log("no jquery");
document.write(unescape('%3Cscript src="/scripts/libs/jquery-1.7.min.js"%3E%3C/script%3E'));
}
if (typeof jQuery.ui == 'undefined') {
console.log("no jquery ui");
document.write(unescape('%3Cscript src="plugins/jqueryui/jquery-ui-1.8.11.min.js"%3E%3C/script%3E'));
}
var defText = 'Restaurant ved åen...';
</script>
<script src="/scripts/desktop/behavior.min.js?v=2803" type="text/javascript"></script>
<script type="text/javascript" src="/scripts/libs/jquery.cookie.js"></script>
<!--do not move recordOutboundLink to bottom -->
<script type='text/javascript'>
var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
(function () {
var gads = document.createElement('script');
gads.async = true;
gads.type = 'text/javascript';
var useSSL = 'https:' == document.location.protocol;
gads.src = (useSSL ? 'https:' : 'http:') +
'//www.googletagservices.com/tag/js/gpt.js';
var node = document.getElementsByTagName('script')[0];
node.parentNode.insertBefore(gads, node);
})();
</script>
<script type='text/javascript'>
googletag.cmd.push(function () {
googletag.defineSlot('/1025597/Place_main_bottom', [468, 60], 'div-gpt-ad-1328824112752-0').addService(googletag.pubads());
googletag.defineSlot('/1025597/Place_sidebar_bottom', [160, 600], 'div-gpt-ad-1328824112752-1').addService(googletag.pubads());
googletag.defineSlot('/1025597/Place_sidebar_middle', [234, 60], 'div-gpt-ad-1328824112752-2').addService(googletag.pubads());
googletag.defineSlot('/1025597/Search_main_bottom', [468, 60], 'div-gpt-ad-1328824112752-3').addService(googletag.pubads());
googletag.defineSlot('/1025597/Search_sidebar_1', [234, 60], 'div-gpt-ad-1328824112752-4').addService(googletag.pubads());
googletag.defineSlot('/1025597/Search_sidebar_2', [234, 60], 'div-gpt-ad-1328824112752-5').addService(googletag.pubads());
googletag.defineSlot('/1025597/Search_sidebar_3', [234, 60], 'div-gpt-ad-1328824112752-6').addService(googletag.pubads());
googletag.defineSlot('/1025597/Search_sidebar_4', [234, 60], 'div-gpt-ad-1328824112752-7').addService(googletag.pubads());
googletag.defineSlot('/1025597/Search_sidebar_5', [234, 60], 'div-gpt-ad-1328824112752-8').addService(googletag.pubads());
googletag.pubads().enableSingleRequest();
googletag.enableServices();
});
</script>
<script type="text/javascript">
//Tabs
jQuery(document).ready(function () {
jTabs = jQuery("#tabs").tabs({
select: function (event, ui) {
try {
var newhasharr = ui.tab.toString().split("#");
window.location.hash = newhasharr[1];
}
catch (err) {
}
}
});
LoadTabFromHash();
function LoadTabFromHash() {
try {
var hash = window.location.hash.replace('#', '');
if (hash != '') {
jTabs.tabs("select", hash);
}
}
catch (err) {
}
}
jQuery(".jclickatab").click(function (ev) {
ev.preventDefault();
var hash = jQuery(this).attr("href").replace("#", "");
if (hash != '') {
jTabs.tabs("select", hash)
}
});
});
</script>
<script type="text/javascript" src="http://yandex.st/jquery/fancybox/1.3.4/jquery.fancybox.min.js"></script>
</head>
<body>
<form method="post" action="/mypage" onsubmit="javascript:return WebForm_OnSubmit();" id="Form1">
<div class="aspNetHidden">
</div>
<script type="text/javascript">
//<![CDATA[
function WebForm_OnSubmit() {
ChangeColourOfInvalidControls();
return true;
}
//]]>
</script>
<div id="fb-root">
</div>
<script type="text/javascript">
window.fbAsyncInit = function () {
FB.init({
appId: '139505527456',
channelUrl: '//www.myspot.dk/channel.html',
status: true,
cookie: true,
xfbml: true
});
};
// Load the SDK Asynchronously
(function (d) {
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) { return; }
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/da_DK/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
} (document));
</script>
<div id="container" class="placepage">
<!-- AddThis Buttons BEGIN -->
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_facebook_like" fb:like:layout="button_count" fb:like:width="105">
</a>
</div>
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_google_plusone"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=myspot"></script>
<!-- AddThis Buttons END -->
</div>
<script>
jQuery(document).ready(function () {
TidyUpPlaceImages();
jQuery(".mainplacepix a").fancybox({
'type': 'image',
'transitionIn': 'elastic',
'transitionOut': 'elastic',
'speedIn': 600,
'speedOut': 200,
'titlePosition': 'over',
'overlayShow': false,
'showNavArrows': true
});
});
function TidyUpPlaceImages() {
var mainImageHeight = jQuery(".mainplacepix a:first").height();
var thumbsHeight = 0;
jQuery(".mainplacepix a:gt(0)").each(function (index) {
thumbsHeight += jQuery(this).height();
if (thumbsHeight <= mainImageHeight) {
jQuery(this).show();
}
else {
return;
}
});
}
</script>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('#txtReviewBody').keyup(function(event) {
if(jQuery(this).val().length>50 && !jQuery('#reviewparametercontainer').is(":visible")) {
jQuery('#reviewparametercontainer').slideDown();
_gaq.push(['_trackEvent', 'Reviews', 'LenghtAbove50', 'empty']);
}
}).blur(function() {
if(jQuery(this).val().trim().length<1) {
jQuery('#reviewparametercontainer').slideUp();
_gaq.push(['_trackEvent', 'Reviews', 'BlurWithoutWriting', 'empty']);
}
});
jQuery(".writeReviewDatePicker").datepicker(
{
maxDate: new Date()
});
})
</script>
<script type="text/javascript">
var reviewErrorMess = 'Some error';
var ratingErrorMess = 'Some error';
var reviewScriptErrorMess = 'Some error';
function validateReviewForm() {
var imValid = true;
var reviewlength = jQuery('#txtReviewBody').val().length;
var myspotrating = jQuery('#rating input[type="hidden"]').val().length;
if (reviewlength < 2) {
setErrorFeedbackToTheRight(jQuery('#txtReviewBody'), reviewErrorMess);
imValid = false;
}
else {
if (jQuery('#txtReviewBody').val().indexOf('<') > -1) {
setErrorFeedbackToTheRight(jQuery('#txtReviewBody'), reviewScriptErrorMess);
imValid = false;
}
}
if (rating < 1) {
setErrorFeedbackToTheRight(jQuery('#rating'), ratingErrorMess);
imValid = false;
}
return imValid;
}
jQuery(document).ready(function () {
jQuery('#ratingmyspot.error').live('click', function () {
removeErrorFeedback(jQuery(this));
});
jQuery('textarea.error').live('keyup', function () {
removeErrorFeedback(jQuery(this));
});
jQuery('#ddlTypes').change(function (ev) {
FilterReviewParams(jQuery(this).val());
});
FilterReviewParams(jQuery('#ddlTypes').val());
});
function FilterReviewParams(categoryId) {
var selector = '#reviewParameters .ratingcontrol.' + categoryId;
var jAll = jQuery('#reviewParameters .ratingcontrol:visible');
if (jAll.length > 0) {
jAll.hide({
duration: 1000,
complete: function () {
jQuery(selector).show(1000);
}
});
}
else {
jQuery(selector).show(1000);
}
}
</script>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('#listOfOffers input[type="submit"]').button();
if (jQuery(".offersFromDateTimePicker").length > 0) {
jQuery(".offersFromDateTimePicker").datetimepicker({
onSelect: function (selectedDate, sender) {
setMinDateTime(selectedDate, ".offersEndDateTimePicker");
}
});
var minDate = jQuery(".offersFromDateTimePicker").val();
jQuery(".offersEndDateTimePicker").datetimepicker({
minDate: minDate
});
}
});
</script>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('#placepageevents input[type="submit"]').button();
if (jQuery(".eventsFromDateTimePicker").length > 0) {
jQuery(".eventsFromDateTimePicker").datetimepicker({
onSelect: function (selectedDate, sender) {
setMinDateTime(selectedDate, ".eventsEndDateTimePicker");
}
});
var minDate = jQuery(".eventsFromDateTimePicker").val();
jQuery(".eventsEndDateTimePicker").datetimepicker({
minDate: minDate
});
}
});
</script>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery(".aboutplaceimages a").fancybox({
'type': 'image',
'transitionIn': 'elastic',
'transitionOut': 'elastic',
'speedIn': 600,
'speedOut': 200,
'titlePosition': 'over',
'overlayShow': false,
'showNavArrows': true
});
});
</script>
</footer>
<script src="/scripts/libs/jquery.highlightFade.js" type="text/javascript"></script>
<script src="/plugins/jqueryui/jquery-ui-timepicker-addon.js" type="text/javascript"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="/scripts/desktop/mygmap.js"></script>
<script type="text/javascript" src="/scripts/desktop/place.min.js?v=0310a"></script>
</script>
<script type='text/javascript'>
jQuery.ajax({
url: 'http://demo.easyrec.org:8080/api-js/easyrec.js',
dataType: "script",
success: function () {
if (typeof (easyrec_sendAction) != "undefined") {
easyrec_sendAction("view",
{
itemId: "48863",
itemUrl: "/mypage",
itemDescription: "Mypage",
});
}
}
});
</script>
<link rel="stylesheet" href="/plugins/jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.css"
type="text/css" media="screen" />
<script src="/plugins/jqueryui/jquery.ui.datepicker-da.js" type="text/javascript"></script>
<script type="text/javascript" src="/scripts/libs/jquery.lazyload.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery("img.lazy").lazyload();
});
</script>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['Form1'];
if (!theForm) {
theForm = document.Form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
</form>
</body>
</html>
thanks,
Thomas
Obviously you are using/loading multiple versions of jquery, jquery-ui, etc. which is definitely suboptimal
For example:
jquery-1.7.min.js
jquery.min.js (Version 1.7.1)
jquery-ui.min.js (Version 1.8.11)
...
Also the following block seems to be obsolete, so try to remove it and load the js files from your server instead from google.
<script type="text/javascript">
if (typeof jQuery == 'undefined') {
console.log("no jquery");
document.write(unescape('%3Cscript src="/scripts/libs/jquery-1.7.min.js"%3E%3C/script%3E'));
}
if (typeof jQuery.ui == 'undefined') {
console.log("no jquery ui");
document.write(unescape('%3Cscript src="plugins/jqueryui/jquery-ui-1.8.11.min.js"%3E%3C/script%3E'));
}
var defText = 'Restaurant ved åen...';
</script>
You are using many 3rd party libraries, so I cannot guarantee, that they load jquery as well
Search your solution for the Jquery.min.js file and ensure it is not getting referenced twice. If you are using a master page or a template, ensure it is not defined on that page and also on the page you are currently viewing.
Related
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("elements", "1", {packages: "transliteration"});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
function OnLoad() {
var options = {
sourceLanguage:
google.elements.transliteration.LanguageCode.ENGLISH,
destinationLanguage:
[google.elements.transliteration.LanguageCode.HINDI],
shortcutKey: 'ctrl+g',
transliterationEnabled: true
};
var control = new google.elements.transliteration.TransliterationControl(options);
control.makeTransliteratable(["txtHindi"]);
var keyVal = 32; // Space key
$("#txtEnglish").on('keydown', function(event) {
if(event.keyCode === 32) {
var engText = $("#txtEnglish").val() + " ";
var engTextArray = engText.split(" ");
$("#txtHindi").val($("#txtHindi").val() + engTextArray[engTextArray.length-2]);
document.getElementById("txtHindi").focus();
$("#txtHindi").trigger ( {
type: 'keypress', keyCode: keyVal, which: keyVal, charCode: keyVal
} );
}
});
$("#txtHindi").bind ("keyup", function (event) {
setTimeout(function(){ $("#txtEnglish").val($("#txtEnglish").val() + " "); document.getElementById("txtEnglish").focus()},0);
});
} //end onLoad function
google.setOnLoadCallback(OnLoad);
</script>
</head>
<body>
English Text: <input size="40" type="text" id="txtEnglish"/> <br/>
Hindi Text`enter code here` : <input size="40" type="text" id="txtHindi"/>
</body>
</html>
This is my normal JS code . And it does work . But my problem is i want this code to run in yii2 .
In yii2 gridview , this is my code where i need this JS code to run , how can i pass id over there in yii2 to run this code ?
MY yii2 code is :
[
'format' => 'raw',
'attribute' => 'title',
'value' => function($model, $key) {
if ($model->book->language == 1) {
$m = "<p class='n'>" . $model->book->title . "</p>";
} else {
$m = $model->book->title;
}
return $m;
}
],
In the end of your view try add following code.
<?php
$script = <<< JS
//here you write all your javascript stuff
alert();
JS;
$this->registerJs($script);
?>
I keep getting a "Uncaught TypeError: $.growl is not a function" error. Here is how I defined the Growl call and it shows how I am referencing Growl. What am I missing here? How can I fix this error?
index.php
<head>
<title>HOST Continuous Integration</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" type="text/css" href="HCIstyle.css">
<link rel="shortcut icon" href="Images/wci_favicon.ico">
<link href='http://fonts.googleapis.com/css?family=Armata' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Graduate' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Source+Code+Pro:400,900' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Audiowide' rel='stylesheet' type='text/css'>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js' type="text/javascript"></script>
<script src='http://ksylvest.github.io/jquery-growl/javascripts/jquery.growl.js' type='text/javascript'></script>
<link href="http://ksylvest.github.io/jquery-growl/stylesheets/jquery.growl.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.11.1.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<style type="text/css">
.table_outer { height: 15em; overflow: auto; }
</style>
</head>
script.js is the file where I am calling the Growl function:
// This function is called when, in the Submit Tab,
// the "Check Gerrits" button is clicked.
$("#check_gerrits_button").click(function(event) {
event.preventDefault();
if ($("#gerrits").val() == "") {
alert("Please enter gerrits.");
} else {
$("#main_form_su_validation_table").empty();
var data = { 'product_lines' : [], 'gerrits' : [], 'contacts' : [],'component' : ($("#component").val())};
//find all pl's that are checked
$("input[name=product_line]:checked").each(function() {
data['product_lines'].push($(this).val());
});
data['gerrits'] = ($("#gerrits").val()).split(",");
data['contacts'] = ($("#contacts").val()).split(",");
console.log("in chck gerrits");
console.log(data);
submitted = 'False';
$.ajax({
dataType: "json",
type: "POST",
url: "getsubmittedgerritsforSI.php",
data: data,
error: function (xhr, ajaxOptions, thrownError,response) {
// send the error mail -TBD
console.log(thrownError);
console.log(xhr);
alert(xhr.status);
alert(thrownError);
},
success : function(response){
console.log("get gerrits sucess");
console.log(response);
var data_cp = [];
var submittedlist = [];
$("input[name=product_line]:checked").each(function() {
for (var si in response) {
console.log(response[si]);
for (var i = 0; i < response[si].length; i++) {
gerrit = response[si][i]
data_cp.push(gerrit);
}
}
});
console.log(data_cp);
var ui_gerrits = ($("#gerrits").val()).split(",");
// this loop is to get the intersection of ui_gerrits and data_cp(database)
for (var i = 0; i < ui_gerrits.length; ) {
for (var j = 0; j < data_cp.length; ) {
if (ui_gerrits[i] == data_cp[j] ){
submittedlist.push(ui_gerrits[i]);
submitted = 'True';
}
j++;
}
i++;
}
console.log(submittedlist);
if (submitted = 'True' && submittedlist.length == ui_gerrits.length ){
//alert(str.fontcolor( "blue" ));
//$(function() { $.growl({ title: "Growl", message: "errits already released in SU or Submitted for SU!" })});
//$.growl(submittedlist + ": gerrits already released in SU or Submitted for SU");
$(function() {
$.growl({
title: "Growl",
message: "Gerrits already released in SU or Submitted for SU!"
});
});
}else if ((submitted = 'True') && (submittedlist.length != 0) ){
//alert(str.fontcolor( "blue" ));
//$.growl(submittedlist + ": gerrits already released in SU or Submitted for SU \nPlease remove " + submittedlist + " and resubmit remaining gerrits");
$(function() {
$.growl({
title: "Growl",
message: "Gerrits already released in SU or Submitted for SU!"
});
});
}
else{
SUValidation(data, '#main_form_su_validation_table', '#gerrits', "main_form");
}
}
});
}
});
});
You are missing the jQuery library. jQuery growl plugin is dependent on jQuery library. You can include jQuery library from a CDN like this or include it locally. But make sure to include it before the jquery growl library.
Below is how your source code should look like.
<head>
<link href="http://ksylvest.github.io/jquery-growl/stylesheets/jquery.growl.css" rel="stylesheet" type="text/css">
</head>
<body>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src='http://ksylvest.github.io/jquery-growl/javascripts/jquery.growl.js' type='text/javascript'></script>
<script type="text/javascript">
$(function() {
$.growl({
title: "Growl",
message: "errits already released in SU or Submitted for SU!"
});
});
</script>
</body>
Also, read the Installation step in jQuery growl website here
update
You have two jQuery libraries included which is causing the issue.
The cause of the issue is due to the multiple reference of the jquery files. The jquery file after the growl will recreate the $ instance and hence the growl that already registered was removed.
Please remove that or use jquery conflict.
I have created an application for downloading pdf. the pdf is based on an html table.
The application is working fine in all browser but when i run in IE9 i am getting Error in function : 'ArrayBuffer' is undefined ReferenceError: 'ArrayBuffer' is undefined. Since IE9 is HTML5 based browser jspdf should work i guess.
Working Demo
function demoFromHTML() {
var pdf = new jsPDF('p', 'pt', 'letter');
pdf.cellInitialize();
pdf.setFontSize(10);
$.each($('#customers tr'), function (i, row) {
if ($(row).text().trim().length !== 0) {
$.each($(row).find("td, th"), function (j, cell) {
var txt = $(cell).text().trim() || " ";
var width = (j == 4) ? 40 : 70;
if (j == 7) {
width = 120;
}
if(i==0)
{
pdf.setFontStyle('bold');
}
else
{
pdf.setFontStyle('normal');
}
pdf.cell(10, 10, width, 18, txt, i);
});
}
});
pdf.save('sample-file.pdf');
}
Can anyone please tell me some solution for this
Use the following code to enable downloadify:
<!doctype>
<html>
<head>
<title>jsPDF</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script type="text/javascript" src="../libs/base64.js"></script>
<script type="text/javascript" src="../jspdf.js"></script>
<script type="text/javascript" src="../libs/downloadify/js/swfobject.js"></script>
<script type="text/javascript" src="../libs/downloadify/js/downloadify.min.js"></script>
</head>
<body onload="load()">
<h1>jsPDF Downloadify Example</h1>
<p>This is an example of jsPDF using Downloadify. This works in all major browsers.</p>
<p id="downloadify">
You must have Flash 10 installed to download this file.
</p>
<script type="text/javascript">
function load(){
Downloadify.create('downloadify',{
filename: 'Example.pdf',
data: function(){
var doc = new jsPDF();
doc.text(20, 20, 'PDF Generation using client-side Javascript');
doc.addPage();
doc.text(20, 20, 'Do you like that?');
return doc.output();
},
onComplete: function(){ alert('Your File Has Been Saved!'); },
onCancel: function(){ alert('You have cancelled the saving of this file.'); },
onError: function(){ alert('You must put something in the File Contents or there will be nothing to save!'); },
swf: '../libs/downloadify/media/downloadify.swf',
downloadImage: '../libs/downloadify/images/download.png',
width: 100,
height: 30,
transparent: true,
append: false
});
}
</script>
</body>
</html>
Use the following code to lazy load Downloadify:
<script id="jspdf" src="../jspdf.js"></script>
<script id="lazy">
var jspdfScript = document.getElementByid('jspdf');
var swfobjectScript = document.createElement('script');
var downloadifyScript = document.createElement('script');
swfobjectScript.src = "../libs/downloadify/js/swfobject.js";
downloadifyScript.src = "../libs/downloadify/media/downloadify.swf";
if (window.ActiveXObject)
{
document.documentElement.insertBefore(jspdfScript, swfobjectScript);
swfobjectScript.onload = function () {
document.documentElement.insertBefore(jspdfScript, downloadifyScript);
};
downloadifyScript.onload = function () {
load();
}
</script>
I have a webpage where I load some javascript files in header. Some subpage will load aditional javascript files. On the main page everything is working just fine but on the subpage I get alot of exceptions like this :
Uncaught TypeError: Property '$' of object [object Object] is not a
function
I can see that this exception occurs in details.js, voteHandler.js and 4 times in the HTML page itself. The exception is always thrown on this line :
$("document").ready(function () {
This is how the main page that works looks like :
<head>
<script type="text/javascript" src=/Scripts/jquery-1.7.1.min.js></script>
<script type="text/javascript">
//URL for voting
var _postVoteUrl = 'http://localhost:5215/Post/Vote'
//URL for tags
var _tagsUrl = 'http://localhost:5215/Post/Tags'
//Keep track of if a cascading is loading, if so, cancel submits
var cascadingControlLoading = false;
window.latestClick = '';
function IsNotDblClick(objectID) {
if (window.latestClick != objectID &&
!cascadingControlLoading) {
window.latestClick = objectID;
return true;
} else {
return false;
}
}
$(document).ready(function () {
if($('#rightCon').text().trim().length < 1)
{$('#rightCon').hide();}
});
</script>
<script type="text/javascript" src=/Scripts/jquery-ui-1.8.20.min.js>"></script>
<script type="text/javascript" src=/Scripts/jquery.elastic.source.js></script>
<script type="text/javascript" src=/Scripts/jquery.validate.min.js></script>
<script type="text/javascript" src=/Scripts/jquery.validate.unobtrusive.min.js></script>
<script type="text/javascript" src=/Scripts/jquery.qtip.min.js></script>
<script type="text/javascript" src=/Scripts/formhandler.js></script>
<script type="text/javascript" src=/Scripts/taghandler.js></script>
<script src="/Scripts/voteHandler.js"></script>
<script type="text/javascript" src=/Scripts/select2.min.js %>"></script>
<script>
function TogglePostCon() {
$('#postListEditorCon').toggle();
}
SetupTagTextBox("txtTagBox", false);
SetupTagTextBoxPersonalTag("txtPersonalTagBox", true);
SetupTagTextBoxPersonalTag("txtPersonalIgnoreTagBox", true);
</script>
<script src="/Scripts/modernizr-2.5.3.js"></script>
</head>
And this is the subpage that throws the exceptions :
<head>
<script type="text/javascript" src=/Scripts/jquery-1.7.1.min.js></script>
<script type="text/javascript">
//URL for voting
var _postVoteUrl = 'http://localhost:5215/Post/Vote'
//URL for tags
var _tagsUrl = 'http://localhost:5215/Post/Tags'
//Keep track of if a cascading is loading, if so, cancel submits
var cascadingControlLoading = false;
window.latestClick = '';
function IsNotDblClick(objectID) {
if (window.latestClick != objectID &&
!cascadingControlLoading) {
window.latestClick = objectID;
return true;
} else {
return false;
}
}
$(document).ready(function () {
if($('#rightCon').text().trim().length < 1)
{$('#rightCon').hide();}
});
</script>
<script type="text/javascript" src=/Scripts/jquery-ui-1.8.20.min.js>"></script>
<script type="text/javascript" src=/Scripts/jquery.elastic.source.js></script>
<script type="text/javascript" src=/Scripts/jquery.validate.min.js></script>
<script type="text/javascript" src=/Scripts/jquery.validate.unobtrusive.min.js></script>
<script type="text/javascript" src=/Scripts/jquery.qtip.min.js></script>
<script type="text/javascript" src=/Scripts/formhandler.js></script>
<script type="text/javascript" src=/Scripts/taghandler.js></script>
<script src="/Scripts/details.js"></script>
<script src="/Scripts/voteHandler.js"></script>
<script>
$(function () {
//Google +1
$.getScript("http://apis.google.com/js/plusone.js", null, true);
//Twitter
$.getScript("http://platform.twitter.com/widgets.js", null, true);
//Facebook
$.getScript("http://connect.facebook.net/en_US/all.js#xfbml=1", function () {
$('body').append('<div id="fb-root"></div>');
FB.init({ status: true, cookie: true, xfbml: true });
}, true);
});
</script>
<script src="/Scripts/modernizr-2.5.3.js"></script>
</head>
I hade some of the scripts loaded at the bottom of the body before and this did not generate the exception but from what I read this is not a recomended way to go.
So why is my subpage generating these exceptions?
In "no-confict" mode, the $ shortcut is not available and the longer jQuery is used, i.e.
jQuery(document).ready(function ($) {
By including the $ in parenthesis after the function call you can then use this shortcut within the code block.
Replace your code
$(document).ready(function () {
if($('#rightCon').text().trim().length < 1)
{$('#rightCon').hide();}
});
with this
jQuery(document).ready(function ($) {
if($('#rightCon').text().trim().length < 1)
{$('#rightCon').hide();}
});
$(function()
{
$(".error").hide();
$("#submit").click(function()
{
//form validate
var name= $("input#fullname").val();
if (name == "")
{
$("label#name_error").show();
$("input#fullname").focus();
return false;
}
var email= $("input#email").val();
if (email == "")
{
$("label#email_error").show();
$("input#email").focus();
return false;
}
var subject= $("input#subject").val();
if (subject == "")
{
$("label#subject_error").show();
$("input#subject").focus();
return false;
}
var textarea= $("textarea#textarea").val();
if (textarea == "")
{
$("label#textarea_error").show();
$("textarea#textarea").focus();
return false;
}
var dataString = 'fullname='+name+'&email='+email+'&subject='+subject+'&textarea='+textarea;
//alert (dataString);return false;
$.ajax({
type: "POST",
url: "form.php",
data: dataString,
success: function()
{
$("#form").html("<div id='message'></div>");
$("#message").html("<h2 id='success'>Query Submitted!</h2>").append("<p>You will be contacted shortly...</p><p>Reload the page to submit another query.</p>").hide().fadeIn(1500)
}
})
return false;
});
});
its just a small question
I have this website which has been working perfectly for the past 2-3 months ... but today when I accidentally wandered into the resource section of chrome's console window there was an error saying
"uncaught reference error: $ is not defined"
I haven't found a satisfactory answer on the web anywhere ... your thoughts?
here is the head section... i have not included any scripts anywhere else on the page
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="cq.css" type="text/css">
<script type="text/javascript" src="form.js"></script>
<link rel="shortcut icon" href="images/favicon.ico" />
<script src="jquery.js"></script>
<script src="form.js"></script>
<!--share-->
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "ur-c6d56dfc-f929-5bbf-a456-178fc403ae45"});</script>
<!--share ends here-->
</head>
You're calling your script before referencing jQuery. Change your HTML to:
<script src="jquery.js"></script>
<script type="text/javascript" src="form.js"></script>
You're also importing the same JavaScript file (form.js) twice.