Conflict Wordpress and JS
First here is the url: http://isotopethemes.com/js-conflict/community-listings/naples/
I am using Savant theme to create a website, in the above page I am using BedStax to get a list of scopes. To get a list of scopes, I use the following code as a custom field:
<!--<script type="text/javascript" src="http://www.bedstax.com/realtorData/featuredCommunities.php?state=FL&area=Bonita Springs%20/%20Estero"></script>
//-->
<script type="text/javascript">
var state = 'FL';
var area = 'Naples';
var idx = '583';
var agent = 'xxx';
var domain = 'xxx';
function setCommunity(community,communityName) {
var cookieSet = window.state + "::" + window.area + "::" + window.idx + "::" + window.agent + "::" + window.domain + "::" + community + '::' + communityName;
document.cookie='idxCookie=' + cookieSet + '; path=/';
document.location.href = '/featured-communities-info';
}
jQuery(document).ready(function() {
jQuery.ajax({
url:"http://bedstax.com/realtorData/newFeatComm.php?state=" + window.state + "&area=" + window.area + "&idx=" + window.idx,
dataType: 'JSONP', // Notice! JSONP <-- P
success:function(json){
$('.output').html(json);
},
error:function(){
alert("Error");
},
});
});
</script>
<div class="output">
</div>
The problem is that where this code generates a list of scopes where all the JS on the page stops working, in the above page, the search popup link does not work. On this page: http://isotopethemes.com/js-conflict/about-2/ click on the search bar and it will slide down, same with the plus symbol in the top right corner.
I went through the console and got this error: Uncaught TypeError: this.on is not a function (line 16 jquery.min.js).
I have struggled for days, I can give you wp-login id and password if you want, any help would be appreciated :)
source to share
Update
It ended up with (after chatting for a minute) the jquery version appeared. The solution was to upgrade to 1.7. (NOTE: 2.0.1 would break it again, so 1.7 was a sweet spot).
We left encapsulation in the code, so I leave it in the answer as well.
Try encapsulating your jquery and see if that helps at all.
(function($){
$(function(){
$.ajax({
url:"http://bedstax.com/realtorData/newFeatComm.php?state=" + window.state + "&area=" + window.area + "&idx=" + window.idx,
dataType: 'JSONP', // Notice! JSONP <-- P
success:function(json){
$('.output').html(json);
},
error:function(){
alert("Error");
}
});
});
})(jQuery);
source to share