P.K. P.K. - 1 month ago 7
jQuery Question

jquery not loading on wordpress / web page

I have Wordpress blog page which imported JS file. JS code should be started after page load, but it's not working. I don't know why.

Following file exists on server: http://.. /wp-content/themes/XXXX/js/script.js
No errors in FF console,

Generated html looks like this:

<html xmlns="http://www.w3.org/1999/xhtml" pl-pl>

<head profile="http://gmpg.org/xfn/11">
<title>XXXX test &rsaquo; Just another WordPress site</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--
<meta property="og:title" content="XXXX" />
<meta property="og:site_name" content="The easiest and fastest way to claim your PAYE tax refund."/>
-->

<link href="http://localhost/wp-content/themes/XXXX/css/bootstrap.min.css" type="text/css" media="screen" rel="stylesheet" />
<link href="http://localhost/wp-content/themes/XXXXX/style.css" title="very`plaintxt" rel="stylesheet" media="screen,projection" />

<link rel="stylesheet" type="text/css" media="print" href="http://localhost/wp-content/themes/XXXXX/print.css" />

<link rel="alternate" type="application/rss+xml" href="http://localhost/?feed=rss2" title="XXXXX test RSS feed" />
<link rel="alternate" type="application/rss+xml" href="https://XXXXX.disqus.com/latest.rss" title="XXXXXX test comments RSS feed" />

<link rel="pingback" href="http://localhost/xmlrpc.php" />
<script>
var theChampSiteUrl = 'http://localhost';
</script>
<div id="fb-root"></div>
<script>
var theChampFBKey = '';
var theChampFBLang = 'en_US';
</script>
<script>
var theChampForceFBComment = false;
var theChampFBCommentTitle = '';
var theChampFBCommentUrl = 'http://localhost/?p=44';
var theChampFBCommentColor = '';
var theChampFBCommentNumPosts = '';
var theChampFBCommentWidth = '100%';
var theChampFBCommentOrderby = '';
var theChampFBCommentMobile = '';
var theChampFBAppID = '';
var theChampSiteUrl = 'http://localhost';
var theChampWPCommentingContent = '';
var theChampFBCommentingContent = '';
var theChampCommentingLoadFbFirst = 1;
var theChampCommentingSwitchWpText = 'Switch to default commenting';
var theChampCommentingSwitchFbText = 'Switch to Facebook commenting';
var theChampCommentingHandle = false;
</script>
<script>
var theChampSharingAjaxUrl = 'http://localhost/wp-admin/admin-ajax.php';
var theChampCloseIconPath = 'http://localhost/wp-content/plugins/super-socializer/images/close.png';
var theChampPluginIconPath = 'http://localhost/wp-content/plugins/super-socializer/images/logo.png';
var theChampHorizontalSharingCountEnable = 1;
var theChampVerticalSharingCountEnable = 0;
</script>
<link rel='stylesheet' id='open-sans-css' href='//fonts.googleapis.com/css?family=Open+Sans%3A300italic%2C400italic%2C600italic%2C300%2C400%2C600&#038;subset=latin%2Clatin-ext&#038;ver=4.0.1' type='text/css' media='all' />
<link rel='stylesheet' id='dashicons-css' href='http://localhost/wp-includes/css/dashicons.min.css?ver=4.0.1' type='text/css' media='all' />
<link rel='stylesheet' id='admin-bar-css' href='http://localhost/wp-includes/css/admin-bar.min.css?ver=4.0.1' type='text/css' media='all' />
<link rel='stylesheet' id='core-css' href='http://localhost/wp-content/plugins/simple-subscribe/assets/styleFrontEnd.css?ver=4.0.1' type='text/css' media='all' />
<link rel='stylesheet' id='the-champ-frontend-css-css' href='http://localhost/wp-content/plugins/super-socializer/css/front.css?ver=3.4.2' type='text/css' media='all' />
<link rel='stylesheet' id='really_simple_share_style-css' href='http://localhost/wp-content/plugins/really-simple-facebook-twitter-share-buttons/style.css?ver=4.0.1' type='text/css' media='all' />
<script type='text/javascript' src='http://localhost/wp-includes/js/jquery/jquery.js?ver=1.11.1'></script>
<script type='text/javascript' src='http://localhost/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>

<script type='text/javascript' src='http://localhost/wp-content/themes/XXXXX/js/script.js?ver=4.0.1'></script>

<script type='text/javascript' src='http://localhost/wp-content/plugins/super-socializer/js/front/social_login/general.js?ver=3.4.2'></script>
<script type='text/javascript' src='http://localhost/wp-content/plugins/super-socializer/js/front/facebook/sdk.js?ver=3.4.2'></script>
<script type='text/javascript' src='http://localhost/wp-content/plugins/super-socializer/js/front/facebook/commenting.js?ver=3.4.2'></script>
<script type='text/javascript' src='http://localhost/wp-content/plugins/super-socializer/js/front/sharing/sharing.js?ver=3.4.2'></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://localhost/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://localhost/wp-includes/wlwmanifest.xml" />
<meta name="generator" content="WordPress 4.0.1" />

<script type="text/javascript">
<!--
var a2a_config = a2a_config || {},
wpa2a = {
done: false,
html_done: false,
script_ready: false,
script_load: function() {
var a = document.createElement('script'),
s = document.getElementsByTagName('script')[0];
a.type = 'text/javascript';
a.async = true;
a.src = 'http://static.addtoany.com/menu/page.js';
s.parentNode.insertBefore(a, s);
wpa2a.script_load = function() {};
},
script_onready: function() {
if (a2a.type == 'page') {
wpa2a.script_ready = true;
if (wpa2a.html_done) wpa2a.init();
}
},
init: function() {
for (var i = 0, el, target, targets = wpa2a.targets, length = targets.length; i < length; i++) {
el = document.getElementById('wpa2a_' + (i + 1));
target = targets[i];
a2a_config.linkname = target.title;
a2a_config.linkurl = target.url;
if (el) {
a2a.init('page', {
target: el
});
el.id = '';
}
wpa2a.done = true;
}
wpa2a.targets = [];
}
};
a2a_config.tracking_callback = ['ready', wpa2a.script_onready];
a2a_config.onclick = 1;
a2a_config.show_title = 1;
//-->
</script>
<script type="text/javascript">
//<![CDATA[

! function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (!d.getElementById(id)) {
js = d.createElement(s);
js.id = id;
js.src = "https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
}
}(document, "script", "twitter-wjs");

//]]>
</script>
<style type="text/css" media="all">
/*<![CDATA[*/
/* CSS inserted by theme options */

body {
font-family: 'times new roman', times, serif;
font-size: 90%;
}
body div#container {
float: left;
margin: 0 -200px 2em 0;
}
body div#content {
margin: 3em 200px 0 0;
}
body div.sidebar {
float: right;
}
body div#content div.hentry {
text-align: left;
}
body div#content h2,
div#content h3,
div#content h4,
div#content h5,
div#content h6 {
font-family: arial, helvetica, sans-serif;
}
body div#wrapper {
max-width: 55em;
min-width: 35em;
width: 80%;
}
body div.sidebar {
text-align: center;
}
/*]]>*/
</style>
<style type="text/css">
.recentcomments a {
display: inline !important;
padding: 0 !important;
margin: 0 !important;
}
</style>
<style type="text/css" media="print">
#wpadminbar {
display: none;
}
</style>
<style type="text/css" media="screen">
html {
margin-top: 32px !important;
}
* html body {
margin-top: 32px !important;
}
@media screen and ( max-width: 782px) {
html {
margin-top: 46px !important;
}
* html body {
margin-top: 46px !important;
}
}
</style>
</head>


JS file:

$(function () {
alert("aaa");
/*
$('#elp_txt_email').addClass('form-control');
$('#elp_txt_button').addClass('hide');
*/
});

Answer

Try this:

You can wrap your javascript inside a self-invoking function, then pass jQuery as an argument to it, using $ as the local variable name. For example:

(function($) {
   $(document).ready(function(){
      alert('aaa');
   });
}(jQuery));

The jQuery library included with WordPress is set to the noConflict() mode. This is to prevent compatibility problems with other JavaScript libraries that WordPress can link.

In the noConflict() mode, the global $ shortcut for jQuery is not available.

Comments