JavaScript framework

Hello,

I'm struggling to get the Website Favorites plug-in working because it's conflicting with other code on my site.

I understand that it's conflicting but don't really understand why it is conflicting. Can someone please explain the "right" way to setup JavaScript code to be used throughout a website?

I've got JavaScript to dock a div to the top of the page, display a photogallery and have a "suggestive" search. Should I just be using one JavaScript framework and try and get all my scripts to use this? Any best practice advice would be appreciated.

Thanks for your help.

Regards,
Greg

Re: [gversion] JavaScript framework

By Jason - December 27, 2011

Hi Greg,

It would be hard to tell what the problem is without seeing your actual code. It could be that you are including conflicting versions of jQuery on your page. One thing you could try is to include the javascript files required for the favorites plugin first and see if that helps.

If not, please let us know and attach a copy of the file you're working with.

Thanks
---------------------------------------------------
Jason Sauchuk - Project Manager
interactivetools.com

Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/

Re: [Jason] JavaScript framework

Hi Jason,

Thanks for your suggestion but unfortunately I am still struggling to get this working. Below is the <HEAD> section of my web page and I'd be grateful if you could take a look to see what might be causing the problem:

<?php
// load favorites records
list($_website_favoritesRecords, $_website_favoritesMetaData) = getRecords(array(
'tableName' => '_website_favorites',
'where' => "createdByUserNum= '".mysql_escape($CURRENT_USER['num'])."'"
));

require_once("makeLinkFunctions.php");


?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<script type="text/javascript" src="/cmsAdmin/plugins/websiteFavorites/websiteFavorites.js"></script>
<script type="text/javascript" src="/cmsAdmin/3rdParty/jquery/jquery1.3.2.js"></script>
<script type="text/javascript">jQuery.noConflict();</script>
<?php $GLOBALS['WSF_SCRIPTS_LOADED'] = true; ?>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Encoding" content="gzip" />
<meta http-equiv="Accept-Encoding" content="gzip, deflate" />
<?php if (@$specificTitle) : ?>
<?php echo $specificTitle; ?>
<?php else : ?>
<title>Product Listing</title>
<?php endif ?>
<link rel="stylesheet" type="text/css" href="/css/all_new.css" />
<script type="text/javascript" src="/js/jquery.1.6.1.js"></script>
<script type="text/javascript" src="/js-old/jquery.main.js"></script>
<!--[if lt IE 8]><link rel="stylesheet" type="text/css" href="/css/ie_new.css" /><![endif]-->


<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,300italic' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.js"></script>
<script type="text/javascript" src="/fancybox/jquery.easing-1.3.pack.js"></script>
<link rel="stylesheet" type="text/css" href="/css/jquery.smartsuggest.css" />
<script type="text/javascript" src="/js/jquery.smartsuggest.CUSTOM.js"></script>
<script type="text/javascript">

jQuery(document).ready(function() {

jQuery("#fbox1").fancybox({
'width' : '40%',
'height' : '60%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});



jQuery(".open-popup").fancybox();

jQuery(".goToItem").click(function(){
var itemNumber = jQuery(this).attr("id");

location.href = "listingDetail.php?"+itemNumber+"-"+itemNumber;
});

});

</script>

<!--For search box autofill-->
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#keyword').smartSuggest({
src: '/_jsonoutput.php',
fillbox: true,
fillBoxWith: 'primary',
executeCode: true,
showImages: false,
timeoutLength: '1',
minChars:'1'

})
});
</script>


<!-- Start of Zopim Live Chat Script -->
<script type="text/javascript">
window.$zopim||(function(d,s){var z=$zopim=function(c){z._.push(c)},$=
z.s=d.createElement(s),e=d.getElementsByTagName(s)[0];z.set=function(o
){z.set._.push(o)};$.setAttribute('charset','utf-8');$.async=!0;z.set.
_=[];$.src=('https:'==d.location.protocol?'https://ssl':'http://cdn')+
'.zopim.com/?3zHAowP0fTdznpBp2jRUVHEhBXaJprXc';$.type='text/java'+s;z.
t=+new Date;z._=[];e.parentNode.insertBefore($,e)})(document,'script')
</script>
<!-- End of Zopim Live Chat Script -->

</head>


Thanks again for your help. It would be great to get this working!

Regards,
Greg

Re: [gversion] JavaScript framework

By Jason - January 16, 2012

Hi,

I took a look and I see that you're loading your website favorites libraries up in the head section of your page, then are loading a number of different libraries down in the body of your page.

There are a couple of things I would try:

1) load all javascript libraries up in the head portion of your page so that they are easy to keep track of.

2) try removing libraries one at a time until website favorites start to work. This will tell us which library is conflicting.

3) Try re-arraning the order libraries are loaded to see if that resolves the issue.

4) if not, see if there is another script you can use that won't conflict. For example, I've had issues in the past where certain lightbox like scripts conflict with website favorites. In those cases, I've used slimbox 2 which didn't conflict:
http://www.digitalia.be/software/slimbox2

Hope this helps
---------------------------------------------------
Jason Sauchuk - Project Manager
interactivetools.com

Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/

Re: [Jason] JavaScript framework

Hi Jason,

Unfortunately I still can't get this plug-in working... :(

So to keep things simple, I have setup a brand new page using the Code Generator and inserted the Website Favorites code as instructed in the readme.txt file.

I've attached my the page with the "Add/Remove Favorite" link (addFav.php) and also the page where the user can view their favorites (viewFav.php).

I am unsure if it has something to do with the fact that I am using JQuery 1.4.1 (jquery1.4.1.js) because in the Website Favorites readme file it references JQuery 1.3.2 (jquery1.3.2.js). Are these files backward compatible?

Would you please be able to take a look and help me get things working correctly?

Thank you very much for your help.

Greg
Attachments:

addfav.php 6K

viewfav.php 2K