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: [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

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