Reputation: 173
Alright guys, so I have some javascript on my application.html.erb page. The page is functioning as a container for other html pages that are being loaded. This issue is that my javascript seems to be overriding any link_to paths and/or href tags on the page or any html pages loaded inside of the container. There is quite a bit of javascript but I believe I have isolated the issue and the problem lies within the following javascript.The entire javascript is listed below it. When I comment the problem javascript out, the links are functioning correctly again, but of course the divs are not being hidden which is an issue. Can anyone tell why the code is causing the issue? And what a solution in javascript may be?
The problem:
/* Wheel */
$('#wheel').hide();
$('#wheelartist').hide();
$('#wheel-link').on('click', function( e ){
var pageID = $("div.page:visible");
var $this = $(this);
//alert("Visible: " + pageID);
$(pageID).fadeTo(300, 0.1,function(){
if ( $this.hasClass('artist') ) {
$("#wheelartist").fadeIn(300);
}
else {
$("#wheel").fadeIn(300);
}
});
//$("#libPage").fadeIn("slow");
e.preventDefault();
});
$('*').on('click', function( e ){
var pageID = $("div.page:visible");
if ($("#wheel, #wheelartist").is(':visible')) {
$("#wheel, #wheelartist").fadeOut(300, function(){
$(pageID).fadeTo(300, 1.0);
});
}
e.preventDefault();
});
Entire javascript:
<script>
$(function() {
/* Page Load */
$('body').keyup(function(event) {
$('div.popup').hide();
$('div.popup:nth-child('+(event.which-47)+')').show();
switch(event.which) {
case 56:
$('div.popup.friendPics div.friendPicsCont').slimScroll({
height: '370px',
width: '350px',
position: 'right',
railVisible: false,
alwaysVisible: true,
railColor: '#4f4c6a',
opacity: .7,
color: '#4f4c6a'
});
break;
}
});
/* Clear Input */
$('#searchBox').focus(function () {
if ($(this).val() == $(this).attr("title")) {
$(this).val("");
}
}).blur(function () {
if ($(this).val() == "") {
$(this).val($(this).attr("title"));
}
});
/* Marquee */
$('#marqueeBlock div.marquee.headline, #adBlock div.marquee.ad').marquee({
speed: 18000,
gap: 50,
delayBeforeStart: 0,
direction: 'left',
duplicated: true,
pauseOnHover: true
});
/* Chat Box */
$('#chatbox').keypress(function(e) {
if(e.which == 13) {
$(this).val("");
/*$('aside#chat .convo').css({'color':'red'});*/
var chatbox = $('aside#chat .convo');
$(chatbox)/('<span>Seth:</span><p>Waddup bro!</p>');
setTimeout(function() {
$(chatbox).append('<span>Josh:</span><p>Yoo!<br>Whats up?</p>');
}, 3000);
setTimeout(function() {
$(chatbox).append('<span>Seth:</span> <p>Chillin dude<br>wbu?</p>');
}, 6000);
setTimeout(function() {
$(chatbox).append('<span>Josh:</span><p>Not too much man, just downloading some new tunes.</p>').scrollTop($(chatbox)[0].scrollHeight);
}, 9000);
setTimeout(function() {
$(chatbox).append('<span>Seth:</span><p>Dope. Who??</p>').scrollTop($(chatbox)[0].scrollHeight);
}, 12000);
setTimeout(function() {
$(chatbox).append('<span>Josh:</span><p>The new Wolfgang Gartner album :)</p>').scrollTop($(chatbox)[0].scrollHeight);
}, 15000);
setTimeout(function() {
$(chatbox).append('<span>Seth:</span><p>OMG YES!</p>').scrollTop($(chatbox)[0].scrollHeight);
}, 18000);
setTimeout(function() {
$(chatbox).append('<span>Josh:</span><p>Yea, its going down.</p>').scrollTop($(chatbox)[0].scrollHeight);
}, 21000);
}
});
/* Navigation */
var wrap = $('content');
wrap.load('register_temp/');
/*$('#wheel-link').on('click', function( e ) {
var href = $(this).attr('href');
wrap.load( href + '#wheel' )
.hide().delay(100).fadeIn(500);
e.preventDefault();
});*/
$('#profileHome-link').on('click', function( e ) {
var href = $(this).attr('href');
wrap.load( href + '#home' )
.hide().delay(100).fadeIn(500);
e.preventDefault();
});
/* $('#openLib').on('click', function( e ) {
var href = $(this).attr('href');
wrap.load( href + '#libPage' )
.hide().delay(100).fadeIn(500);
e.preventDefault();
}); */
$('#adBlock div.marquee.ad a').on('click', function( e ) {
var href = $(this).attr('href');
wrap.load( href + '#sponsorAdPage' )
.hide().delay(100).fadeIn(500);
e.preventDefault();
});
$('.music-search-bar a').on('click', function( e ) {
var href = $(this).attr('href');
wrap.load( href + '#music-search' )
.hide().delay(100).fadeIn(500);
e.preventDefault();
});
$('#userLibrary .albumPic a').on('click', function( e ) {
var href = $(this).attr('href');
wrap.load( href + '#artistProfile' )
.hide().delay(100).fadeIn(500);
e.preventDefault();
});
$('#circle a#homebuttonLink').on('click', function( e ) {
var href = $(this).attr('href');
wrap.load( href + '#home' )
.hide().delay(100).fadeIn(500);
e.preventDefault();
});
$('#circle a#searchbuttonLink').on('click', function( e ) {
var href = $(this).attr('href');
wrap.load( href + '#musicSearch' )
.hide().delay(100).fadeIn(500);
e.preventDefault();
});
$('#circle a#prefbuttonLink').on('click', function( e ) {
var href = $(this).attr('href');
wrap.load( href + '#prefPage' )
.hide().delay(100).fadeIn(500);
e.preventDefault();
});
$('#circle a#pointsbuttonLink').on('click', function( e ) {
var href = $(this).attr('href');
wrap.load( href + '#pointsPage' )
.hide().delay(100).fadeIn(500);
e.preventDefault();
});
$('#circle a#contestsbuttonLink').on('click', function( e ) {
var href = $(this).attr('href');
wrap.load( href + '#contestsPage' )
.hide().delay(100).fadeIn(500);
e.preventDefault();
});
$('#circle a#cartbuttonLink').on('click', function( e ) {
var href = $(this).attr('href');
wrap.load( href + '#artistMerch' )
.hide().delay(100).fadeIn(500);
e.preventDefault();
});
$('#circle a#directorybuttonLink').on('click', function( e ) {
var href = $(this).attr('href');
wrap.load( href + '#directoryPage' )
.hide().delay(100).fadeIn(500);
e.preventDefault();
});
$('#circle a#msgsbuttonLink').on('click', function( e ) {
var href = $(this).attr('href');
wrap.load( href + '#msgsPage' )
.hide().delay(100).fadeIn(500);
e.preventDefault();
});
$('#circleartist a#homebuttonLink').on('click', function( e ) {
var href = $(this).attr('href');
wrap.load( href + '#home' )
.hide().delay(100).fadeIn(500);
e.preventDefault();
});
$('#circleartist a#searchbuttonLink').on('click', function( e ) {
var href = $(this).attr('href');
wrap.load( href + '#musicSearch' )
.hide().delay(100).fadeIn(500);
e.preventDefault();
});
$('#circleartist a#prefbuttonLink').on('click', function( e ) {
var href = $(this).attr('href');
wrap.load( href + '#prefPage' )
.hide().delay(100).fadeIn(500);
e.preventDefault();
});
$('#circleartist a#pointsbuttonLink').on('click', function( e ) {
var href = $(this).attr('href');
wrap.load( href + '#pointsPage' )
.hide().delay(100).fadeIn(500);
e.preventDefault();
});
$('#circleartist a#contestsbuttonLink').on('click', function( e ) {
var href = $(this).attr('href');
wrap.load( href + '#contestsPage' )
.hide().delay(100).fadeIn(500);
e.preventDefault();
});
$('#circleartist a#cartbuttonLink').on('click', function( e ) {
var href = $(this).attr('href');
wrap.load( href + '#artistMerch' )
.hide().delay(100).fadeIn(500);
e.preventDefault();
});
$('#circleartist a#directorybuttonLink').on('click', function( e ) {
var href = $(this).attr('href');
wrap.load( href + '#directoryPage' )
.hide().delay(100).fadeIn(500);
e.preventDefault();
});
$('#circleartist a#msgsbuttonLink').on('click', function( e ) {
var href = $(this).attr('href');
wrap.load( href + '#msgsPage' )
.hide().delay(100).fadeIn(500);
e.preventDefault();
});
$('#circleartist a#mapbuttonLink').on('click', function( e ) {
var href = $(this).attr('href');
wrap.load( href + '#artistCareerMap' )
.hide().delay(100).fadeIn(500);
e.preventDefault();
});
$('#circleartist a#profitsbuttonLink').on('click', function( e ) {
var href = $(this).attr('href');
wrap.load( href + '#artistProfits' )
.hide().delay(100).fadeIn(500);
e.preventDefault();
});
$('#circleartist a#statsbuttonLink').on('click', function( e ) {
var href = $(this).attr('href');
wrap.load( href + '#artistStats' )
.hide().delay(100).fadeIn(500);
e.preventDefault();
});
/* Wheel
$('#wheel').hide();
$('#wheelartist').hide();
$('#wheel-link').on('click', function( e ){
var pageID = $("div.page:visible");
var $this = $(this);
//alert("Visible: " + pageID);
$(pageID).fadeTo(300, 0.1,function(){
if ( $this.hasClass('artist') ) {
$("#wheelartist").fadeIn(300);
}
else {
$("#wheel").fadeIn(300);
}
});
//$("#libPage").fadeIn("slow");
e.preventDefault();
});
$('*').on('click', function( e ){
var pageID = $("div.page:visible");
if ($("#wheel, #wheelartist").is(':visible')) {
$("#wheel, #wheelartist").fadeOut(300, function(){
$(pageID).fadeTo(300, 1.0);
});
}
e.preventDefault();
});
<!-- seems to be the javascript issue -->
*/
function grow(elem){
elem.animate({"width" : "+=7", "height":"+=7"}, 200);
}
function shrink(elem){
elem.animate({"width" : "-=7", "height":"-=7"}, 200);
}
$('.circle img, .circleartist img').mouseenter(function(){grow($(this));}).mouseleave(function(){shrink($(this));});
$("img#homebutton").click(function(){
$("#wheel, #wheelartist").fadeOut("slow");
});
$("img#msgsButton").click(function(){
$("#wheel, #wheelartist").fadeOut("slow");
});
$("img#directoryButton").click(function(){
$("#wheel, #wheelartist").fadeOut("slow");
});
$("img#cartButton").click(function(){
$("#wheel, #wheelartist").fadeOut("slow");
});
$("img#contestsButton").click(function(){
$("#wheel, #wheelartist").fadeOut("slow");
});
$("img#pointsButton").click(function(){
$("#wheel, #wheelartist").fadeOut("slow");
});
$("img#prefButton").click(function(){
$("#wheel, #wheelartist").fadeOut("slow");
});
$("img#searchButton").click(function(){
$("#wheel, #wheelartist").fadeOut("slow");
});
$("img#mapButton").click(function(){
$("#wheelartist").fadeOut("slow");
});
$("img#profitsButton").click(function(){
$("#wheelartist").fadeOut("slow");
});
$("img#statsButton").click(function(){
$("#wheelartist").fadeOut("slow");
});
/* Search */
$('#search-suggestions').on('click', function( e ){
$('#search-suggestions').toggle();
$('#searchBox').val('Search Friends, Artists, and Songs');
});
/* Library */
$('#libPage').hide();
$('#openLib, #home a.libraryButton, #profile a.libraryButton').on('click', function( e ){
var pageID = $("div.page:visible");
$(pageID).fadeTo(300, 0.05,function(){
$("#libPage").fadeIn(300);
});
e.preventDefault();
});
$('#userLibrary a, #userLibrary .libraryCloseX a').on('click', function( e ){
var pageID = $("div.page:visible");
$("#libPage").fadeOut(300, function(){
$(pageID).fadeTo(300, 1.0);
});
e.preventDefault();
});
$('.libraryScroll1').slimScroll({
height: '380px',
width: '650px',
position: 'right',
railVisible: true,
alwaysVisible: true,
//railColor: '#4f4c6a',
opacity: .7,
color: '#4f4c6a'
});
$('.librarybox2').slimScroll({
height: '380px',
width: '180px',
position: 'right',
railVisible: true,
alwaysVisible: true,
//railColor: '#4f4c6a',
opacity: .7,
color: '#4f4c6a'
});
/* Player */
/* $('a.musicNote').click(function(){
var pageID = $("div.page:visible");
//alert("Visible: " + pageID);
$(pageID).fadeOut("slow",function(){
$("#libPage").fadeIn("slow");
});
}); */
/* Radio */
$('.radio').css({
'display':'none'
});
$('a.radioTower').on('click', function( e ){
var pageID = $("div.page:visible");
$(pageID).fadeTo(300, 0.1, function(){
$('.radio').fadeIn(300);
});
e.preventDefault();
});
$('.radio img.image').on('click', function( e ){
var pageID = $("div.page:visible");
$('.radio').fadeOut(300, function(){
$(pageID).fadeTo(300, 1.0);
});
e.preventDefault();
});
/* Live Listening */
$('.live-listening').css({
'display':'none'
});
$('.icon-live-listening img').on('click', function( e ){
var pageID = $("div.page:visible");
$(pageID).fadeTo(300, 0.1, function(){
$('.live-listening').fadeIn(300);
});
e.preventDefault();
});
$('.live-listening img.image').on('click', function( e ){
var pageID = $("div.page:visible");
$('.live-listening').fadeOut(300, function(){
$(pageID).fadeTo(300, 1.0);
});
e.preventDefault();
});
});
</script>
Application.html.erb (with redacted code for readabilty):
<!DOCTYPE html>
<html>
<head>
<title>Atmosphere</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body leftmargin="auto" topmargin="auto" marginwidth="auto" marginheight="auto">
<div id="wrapper">
<a class="logout" href="viewmore/">View More</a>
<img class="atmov1_img" src="/assets/Atmov1_4.png">
<div class="fade-slider-edges"> </div>
<div class="fade-slider-edges2"> </div>
<div id="container2">
<div id="marqueeBlock">
</div>
</div>
<div class="advanced-slider" id="carousel">
<ul class="slides">
</ul>
</div>
<a id="ui-carousel-next"><span>next</span></a> <a id="ui-carousel-prev"><span>prev</span></a>
</div>
<form name="simple_bar" class="search" method="get" action="">
<input class="submit" type="submit" value="" >
<input id="searchBox" type="search" name="" value="Search Friends, Artists, and Songs" title="Search Friends, Artists, and Songs" size="27" maxlength="50" onFocus="if(this.value=='Search Friends, Artists, and Songs')this.value='';jQuery('#search-suggestions').toggle();">
<div id="search-suggestions">
<table>
</table>
</div>
</form>
<form name="simple_bar" class="searchLibrary" method="get" action="">
<input type="search" name="" value="Library" size="9" maxlength="30">
<input class="submit" type="submit" value="" >
</form>
<aside style="left: 10px;">
<div class="advanced-slider" id="library">
<ul class="slides">
<li class="slide">
<div class="html">
</div>
</li>
<li class="slide">
<div class="html">
</div>
</li>
<li class="slide">
<div class="html">
</div>
</li>
</ul>
</div>
<a id="openLib" class="libraryLink hvr-wobble-horizontal" href=""> </a>
<ul class="library-stats">
</ul>
</aside>
<content class="loadContent">
<ul>
<li><%= link_to "login", hud_login_path %></li>
<li><%= link_to "register", hud_register_path %></li>
</ul>
<%= yield %>
</content>
<aside id="chat">
<div class="convo">
</div>
</aside>
<a id="wheel-link" href="">
<img class="logo-left hvr-grow" src="/assets/atmosphere-logo.png" alt="">
</a>
<a id="profileHome-link" href="homepage_splash/1">
<img class="half-circles hvr-grow" src="/assets/icons/home.png" alt="">
</a>
<div class="adsLeft">
<div class="bottomLeftAds" id="responsive-slider">
<ul class="slides">
</ul>
<a class="createAnAd" href="" ></a>
</div>
</div>
<div class="playerBG">
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio">
<div class="jp-type-single">
<div class="jp-gui jp-interface">
<ul class="jp-controls">
<a class="musicNote hvr-grow" href=""> </a>
<a class="radioTower hvr-grow" href=""> </a>
<div id="cp_container_1" class="cp-container jp-container" style="z-index:9990;">
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/colorpicker/colorpicker-min.js"></script>
<!-- here are the MP3 links, which are decorated with the 360 canvas element/UI etc. -->
<div id="sm2-container">
<!-- sm2 flash goes here -->
</div>
<div class="sm2-inline-list"> <!-- remove this class to have one item per line -->
<!-- player/mp3 url housed here: -->
<div class="ui360 ui360-vis">
</div>
</div>
</div>
</ul>
<div style="text-align:center; width:600px; margin-left:auto; margin-right:auto;">
</div>
</div>
<div class="jp-no-solution">
</div>
</div>
</div>
</div>
<div class="radio">
<img class="image" src="/assets/radio-widget.png" alt=""/>
</div>
<form name="simple_bar" class="searchFriends" method="get" action="">
<input type="search" name="" value="friends" size="9" maxlength="30">
<input class="submit" type="submit" value="" >
</form>
<div class="chatBox">
<ul>
</ul>
<div style="float:left; margin-right:10px;">
<textarea id="chatbox" name="chatbox"></textarea>
</div>
<div class="friendList">
<ul>
</ul>
</div>
<span class="friendsToggle"> <a href="">◀ </a> Joshua Richard<a href=""> ▶</a></span>
</div>
<div class="live-listening">
<img class="image" src="/assets/live-listening.png" alt=""/>
</div>
<div id="libPage" style="position:absolute; top:161px; left:252px; z-index:999999;">
<div id="userLibrary">
<span style="display:block;text-align:center;margin-bottom:4px;">My Atmosphere Library</span>
<div class="librarybox1">
<div class="libraryScroll1">
<div class="albumPic">
<p><a href="artist_profile/">Adele</a></p>
<strong> 21 (2011) </strong>
<a href="artist_profile/"><img src="/assets/albums/adele21.png" alt="" /></a>
</div>
<ul>
</ul>
<div class="albumPic">
<p><a href=""></a></p>
<a href="artist_profile/"><img src="/assets/albums/aesoprockLaborDays.jpg" alt="" /></a>
</div>
<ul>
</ul>
</div>
</div>
<div class="librarybox2">
<label>Playlist <a href="">+</a></label>
<ul>
</ul>
<label></label>
</div>
<div class="myLabNav">
<img src="/assets/other_images/shuggleIcon.png"/>
<img src="/assets/other_images/rewindOne.png"/>
<img src="/assets/other_images/rewindAll.png"/>
<a class="sinkWithAtmosphere" href="" >Sync with The Atmosphere</a>
</div>
<div class="libraryCloseX"><a href=""><img src="/assets/closeX.png"/></a></div>
</div>
</div>
<div id="wheel" style="position:absolute; top:131px; left:577px; z-index:999999;">
<div id="circle" class="circle">
<a id="homebuttonLink" href="userprofile/profile/0/"><img id="homebutton" title="Home" src="/assets/icons/user.png" alt=""></a>
<a id="msgsbuttonLink" href="messages/"><img id="msgsButton" title="Messages" src="/assets/icons/mail.png" alt=""></a>
<a id="directorybuttonLink" href="directory/"><img id="directoryButton" title="Directory" src="/assets/icons/book.png" alt=""></a>
<a id="cartbuttonLink" href="shopping_cart/"><img id="cartButton" class="shopingCart" title="Shopping Cart" src="/assets/icons/shopping.png" alt=""></a>
<a id="contestsbuttonLink" href="contests_list/"><img id="contestsButton" class="planet" title="Planet" src="/assets/icons/planet.png" alt=""></a>
<a id="pointsbuttonLink" href="points/"><img id="pointsButton" class="awards" title="Awards" src="/assets/icons/awards.png" alt=""></a>
<a id="prefbuttonLink" href="preferences/"><img id="prefButton" class="tools" title="Tools" src="/assets/icons/tools.png" alt=""></a>
<a id="searchbuttonLink" href="search/"><img id="searchButton" class="headphones" title="Search" src="/assets/icons/music.png" alt=""></a>
</div>
</div>
<div id="wheelartist" style="position:absolute; top:131px; left:536px; z-index:999999;">
<div id="circleartist" class="circleartist">
<a id="homebuttonLink" href="artist_profile/"><img id="homebutton" title="Home" src="/assets/icons/user.png" alt=""></a>
<a id="msgsbuttonLink" href="messages/"><img id="msgsButton" title="Messages" src="/assets/icons/mail.png" alt=""></a>
<a id="directorybuttonLink" href="directory/"><img id="directoryButton" title="Directory" src="/assets/icons/book.png" alt=""></a>
<a id="cartbuttonLink" href="shopping_cart/"><img id="cartButton" class="shopingCart" title="Shopping Cart" src="/assets/icons/shopping.png" alt=""></a>
<a id="contestsbuttonLink" href="contests_list/"><img id="contestsButton" class="planet" title="Planet" src="/assets/icons/planet.png" alt=""></a>
<a id="pointsbuttonLink" href="points/"><img id="pointsButton" class="awards" title="Awards" src="/assets/icons/awards.png" alt=""></a>
<a id="prefbuttonLink" href="preferences/"><img id="prefButton" class="tools" title="Tools" src="/assets/icons/tools.png" alt=""></a>
<a id="searchbuttonLink" href="search/"><img id="searchButton" class="headphones" title="Search" src="/assets/icons/music.png" alt=""></a>
<a id="mapbuttonLink" href="artist_careermap/"><img id="mapButton" title="Career Map" src="/assets/icons/map.png" alt=""></a>
<a id="profitsbuttonLink" href="artist_profits/"><img id="profitsButton" title="Profits" src="/assets/icons/profits.png" alt=""></a>
<a id="statsbuttonLink" href="artist_stats/"><img id="statsButton" title="Stats" src="/assets/icons/stats.png" alt=""></a> </div>
</div>
</div>
<form id="logintype" class="logintype">
<input type="hidden" name="logintype" id="logintypeemail" value="" />
</form>
</body>
</HTML>
Upvotes: 4
Views: 73
Reputation: 9298
This is your problem function. You're using the very slow jQuery method of $('*')
, which grabs everything in the DOM. Then you're calling e.preventDefault()
on everything it grabbed, thus disabling your links.
$('*').on('click', function( e ){ // this is a dangerous and slow
var pageID = $("div.page:visible");
if ($("#wheel, #wheelartist").is(':visible')) {
$("#wheel, #wheelartist").fadeOut(300, function(){
$(pageID).fadeTo(300, 1.0);
});
}
e.preventDefault(); // This is breaking your links.
});
Quickest solution is to remove the e.preventDefault(). If you can't, then I would recommend getting rid of $('*')
and using a more specific selector. A div wrapping the entire page might work for you.
Upvotes: 1