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: [gversion] JavaScript framework

By (Deleted User) - February 3, 2012

Hi Greg,

I've reviewed the code you sent over and it works on my local server.

Can you clarify in what way the plugin is not working (ie is it not storing favorites, returning an error message or simply not doing anything at all?).

At this point it would also be best to look at the current implementation of the code on your website - could you let me know which page you are using the code on (if you could create a test page with all the current javascript/jQuery features turned on that might be best).

jQuery and Java errors are normally traceable back to simple function calls not looking in the right place or not being instantiated correctly so I have high hopes that with a complete page to review the error will become apparent.

Thanks,

Tom