Jump to content

Clickable Link that Does Not Link


Recommended Posts

REQUEST:  Please compare the following two links:  one works and the other does not.

LINK ONE (functional):  This link is accessed by going to the Grammar Captive mainpage and clicking on the words Weekly Podcast under the Products heading in the navigation bar.  When the panel opens find the phrase Click and Listen.  You should be redirected to the podcast_hostpage.

LINK TWO (dysfunctional):  This is accessed by going to the mainpage and clicking on the word Podcasts under the heading Search Grammar Captive in the navigation bar.  When the panel opens search for the single word podcast.  A list of options should become available.  Click on the phrase Discover more ... under any of them.   When the hidden data appears click on the phrase Click and Listen.  Nothing happens.

DISCUSSION:  Both links (LINK ONE and LINK TWO) are identical in every way, but the query strings.  One works, the other does not.  With the  exception to some problematic links to Facebook created by jSocials the console indicates no error.  Interestingly, in the dysfunctional case the timer runs as if an infinite loop had been created.  Careful scrutiny of the code yields no common source of error.

QUESTION:  What is likely causing LINK TWO to fail?

(function() {
	$(".SearchButton").click(function() {
		Displays error message, if no input is present when the submit
		button is clicked.  Hides the error message when a proper search
		is initiated. 
		var search_podcast_input = $("#podcast_input").val();
		if (search_podcast_input == "") {
			$("#podcast_input_error").show().append('<br />');
			$("#podcast_input").focus().focusout(function() {
			return false;
		var dataString = 'search_input=' + search_podcast_input;
			type: "POST",
			url: './_utilities/php/search_podcast.php',
			data: dataString,
			dataType: 'JSON',
			statusCode: {
				404: function() {
				alert( "Page not found" );
			success: function (jsonData){
				$("<link/>", {
				   rel: "stylesheet",
				   type: "text/css",
				   href: "./_utilities/css/podcast_list.css"
				$("<link/>", {
				   rel: "stylesheet",
				   type: "text/css",
				   href: "./_utilities/css/podcast_select.css"
				$('#podcast_matches').css({'background-color':'#fff','background-image':'none'}).html("<p>Your Search Results for [ <span style='font-weight:bold;'>" + search_podcast_input + "</span> ] in descending order of matched relevance are:</p>");
				$.each(jsonData, function(key, object){
					$('#podcast_matches').append("<div class='paginate'><div class='item_info podcast_item'><div class='pod_num'>" + object.podcast_no_item + "</div><div class='pod_title'>" + object.item_title + "<br /><span class='pubdate'>" + object.item_pubdate + "</span></div></div><div class='pod_describe'>" + object.item_description + "</div><div class='discover'><span class='discover_text'>Discover more ...</span></div><div class='hidden_info'><div class='podcast_link'><a href='podcast_hostpage.php?hash=" + object.item_guid + "&podcast_no=" + object.podcast_no_item + "' title='' target='_self'>Click and Listen</a></div><div class='duration'>Duration: " + object.itunes_duration + "</div><div class='summary'><h2>Summary</h2>"+ object.itunes_summary + " </div></div><!-- end div.hidden_info --><hr class='hr_divide' /></div><!-- end div.paginate -->");

				var collection = $(".paginate");
				var collNum = collection.length;
				var perPage = 3;
				$('#podcast_matches').append("<div id='pagn'></div><!-- end div#pagn -->");
					items: collNum,
					itemsOnPage: perPage,
					cssStyle: "light-theme",
					onPageClick: function(pageNum) {
						var start = perPage * (pageNum - 1);
						var end = start + perPage;
//									console.log(event);
//									console.log(pageNum);
						collection.hide().slice(start, end).show();
						$('body, html').animate({scrollTop: $('#podcast_matches').offset().top},800);

				$("div.discover").mouseover(function() {
					$(this).find("span.discover_text").css({"cursor": "pointer","line-height":"1.6em","font-size":"1.4em"});
				$("div.discover").click(function() {
					$(this).next("div.hidden_info").slideToggle(800, function() {
						$('.podcast_link').find('a').on('click', function(event){
						var attribute = $(this).attr('href');
						var href_arr = attribute.split('?');
						var query_str = href_arr[1];
						var pairs = query_str.split('&');
						var data = [];
						$.each(pairs, function(i, v){
							var pair = v.split('=');
							var key = pair[0];
							var value = pair[1];
							var data_arr = [key, value];
					$(this).mouseup(function() {
						$(this).css({"color": "#ccc", "font-weight": "normal"});
					$('body, html').animate({scrollTop: $(this).offset().top},800);
				.mouseout(function() {
			complete: function(jqXHR, status) {
				if (status === 'success') {
					var aside_height = $('aside').height();
					$('#main').css('min-height', aside_height);
				selfSearchResults_Podcast = $('#main').html();

Please advise.


Link to comment
Share on other sites

I'm not sure where you attach it, but there are 2 click handlers on that anchor element.  If I remove one of them then the browser will load the URL, so you must be stopping the default behavior so that the browser doesn't follow the URL.  If you don't want the browser to just follow the URL then look at your click handler to figure out what it's doing.

Link to comment
Share on other sites

14 minutes ago, justsomeguy said:

I'm not sure where you attach it, but there are 2 click handlers on that anchor element.

Which anchor is "that anchor"?


Edited by iwato
Link to comment
Share on other sites

I found the problem.  In order to build my search engines I copied code from several different places on my website.  In so doing I copied an event.preventDefault statement that was unnecessary in the given context.  Both search engines work well now.  Thank you for your help.  Have a great weekend!


Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Create New...