JavaScript framework
6 posts by 3 authors in: Forums > CMS Builder: Plugins & Add-ons
Last Post: February 3, 2012 (RSS)
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
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
By gversion - January 14, 2012
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
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
By gversion - February 1, 2012
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
Re: [gversion] JavaScript framework
By (Deleted User) - February 3, 2012
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