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 post
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 post
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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...