iwato

So, are you of the opinion that this Ingolme's proposal will work? $("REFERENCE TO FORM").on("submit", function(e){ // Stop the form from reloading the page e.preventDefault(); // Do action "X" here: performActionX(); }); Roddy

I did not suggest this code. $("REFERENCE TO FORM").on("submit", function(e){ // Stop the form from reloading the page e.preventDefault(); // Do action "X" here: performActionX(); }); I implemented it. It works great with the ENTER/RETURN key, but it silences the functionality of the <input type='submit'> form control. I would like Item 3 below to read: Click on either the Search button or ENTER/RETURN key. For the moment I can have one or the other, but not both. Roddy

JSG - The original intent of this thread was to discover a way to prevent users from blowing away form data on the one hand and allowing them to submit it in two different ways (form button and ENTER/RETURN key) on the other. This has not changed despite the various directions in which the discussion has progressed. It all began when i disabled the default behavior of the <input type='submit'> form element so that I could achieve additional tasks when the user submitted his form data using the form element. Disabling the default behavior of the this element, however, caused depression of the ENTER/RETURN key to renew the entire page and blow away the user's form data. As many user's are accustomed to submitting form data via the ENTER/RETURN key I have been looking for a way to get the form element and ENTER/RETURN key to achieve the same task. The most recently published code causes the form data to be submitted and activates the additional behavior as it should, but the same cannot be triggered by clicking on the <input type='submit'> form element. In contrast, the correction previous to the most recent correction achieved the opposite: clicking on the <input type='submit'> element caused the data to be submitted and activated the additional behavior but silenced the ability of the ENTER/RETURN key to achieve the same task. Is it not reasonable to believe that clicking on the form control and the ENTER/RETURN key could both achieve the same task -- namely, cause the user's form data to be submitted and consummate the additional tasks? I hope that this renders the matter clear. Roddy

if the question is always the same then you can assign the same class to each of the alternative options and use the class name as a jQuery selector for a handler that produces the desired message. If the question is different for each option, then your selector becomes the value of the id property assigned to each option. Have fun! Roddy

We are making progress -- sort of. For, implementing the following strategy $("REFERENCE TO FORM").on("submit", function(e){ // Stop the form from reloading the page e.preventDefault(); // Do action "X" here: performActionX(); }); results in a successful ENTER/RETURN form submission, but results in a failed button click. (function() { // $('.error').hide(); // $(".SearchButton").click(function() { $('#qa_searchform').on('submit', function(e) { e.preventDefault(); var search_qa_input = $("input#qa_input").val(); if (search_qa_input == "") { $("label#qa_input_error").show().append('<br />'); $("input#qa_input").focus().focusout(function() { $("label#qa_input_error").hide(); }); return false; } /******************************************************************************** First AJAX call. Send input search query to PHP processor for database retrieval ********************************************************************************/ var dataString = 'search_input=' + search_qa_input; $.ajax({ type: "POST", url: './_utilities/php/search_qa.php', data: dataString, dataType: 'JSON', statusCode: { 404: function() { alert( "Page not found" ); }}, /********************************* First AJAX call. Success Function *********************************/ success: function(jsonData) { $('#qa_matches').html(''); $('#qa_matches').css({'background-color':'#fff','background-image':'none'}).html("<p>Your Search Results for [ <span style='font-weight:bold;'>" + search_qa_input + "</span> ] in descending order of matched relevance are:</p>"); $.each(jsonData, function(key, object){ $('#qa_matches').append("<div class='paginate'><div class='item_info podcast_item'><div class='news_num'>No. " + object.letter_no + "</div><div class='news_title'>" + object.qa_question + "<br /><span class='pubdate'>" + object.submission_date + "</span></div></div><div class='discover'><span class='discover_text'>The Answer ...</span></div><div class='hidden_info'><div class='news_describe'>" + object.qa_answer + "</div><div class='news_link'><a href='?letter_no=" + object.letter_no + "' title='Seven Gates - Edition No. " + object.letter_no + "' target='_self'>Click and Read</a></div><div><p style='font-size:0.8em;margin-top:-0.3em;'>the newsletter in which this question and answer first appeared!</p></div></div><!-- end div.hidden_info --><hr class='hr_divide' /></div><!-- end div.paginate -->"); }); /* $('#qa_matches').append('<div>letter_no: ' + object.letter_no + '<br />qa_question: ' + object.qa_question + '<br />qa_answer: ' + object.qa_answer + '<br />submission_date: ' + object.submission_date + '<br />revision_date: ' + object.revision_date + '</div>'); */ /* $('#letter_matches').append("<div class='paginate'><div class='item_info podcast_item'><div class='news_num'>No. " + object.letter_no + "</div><div class='news_title'>" + object.letter_title + "<br /><span class='pubdate'>" + object.submission_date + "</span></div></div><div class='discover'><span class='discover_text'>Discover more ...</span></div><div class='hidden_info'><div class='news_describe'>" + object.letter_abstract + "</div><div class='news_link'><a href='?letter_no=" + object.letter_no + "' title='Seven Gates - Edition No. " + object.letter_no + "' target='_self'>Click and Read!</a></div></div><!-- end div.hidden_info --><hr class='hr_divide' /></div><!-- end div.paginate -->"); */ // }); var collection = $(".paginate"); var collNum = collection.length; var perPage = 2; collection.slice(perPage).hide(); $('#qa_matches').append("<div id='pagn'></div><!-- end div#pagn -->"); $("#pagn").pagination({ items: collNum, itemsOnPage: perPage, cssStyle: "light-theme", onPageClick: function(pageNum) { var start = perPage * (pageNum - 1); var end = start + perPage; collection.hide().slice(start, end).show(); $('body, html').animate({scrollTop: $('#qa_matches').offset().top},800); } }); /********************* Insert BEGINS here *********************/ $("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() { $('.news_link').find('a').on('click', function(event){ event.preventDefault(); 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]; data.push(data_arr); }); /*********************************************************************************************** Call the Newsletter template ***********************************************************************************************/ var nested_ajax = $.ajax({ // url: './_utilities/php/newsletter.php', url: './newsletter/template/newsletter_generator_local.php', method: 'GET', // data: {'hash': data[0][1],'letter_no': data[1][1]}, data: {'letter_no': data[0][1]}, dataType: 'html', statusCode: { 404: function() { alert( "Page not found" ); } }, success: function(template) { $("#main").css('background-image','none').html(template); $("#letter_dissemination").hide(); $('body, html').animate({scrollTop: $('#main').offset().top},800); $("#click_share").mouseenter(function() { $(this).css({'cursor':'pointer','color':'#5a4149'}); }); $("#click_share").click(function(){ $("#letter_dissemination").slideToggle(800, function(){ var jsSocialsURL ='./_utilities/javascript/jssocials.js'; $.getScript(jsSocialsURL, function() { $("#share").jsSocials( {showLabel: false, showCount: false, shares: ["email", "twitter", "facebook", "googleplus", "linkedin", "pinterest", "whatsapp"] }); }); }); }) .mouseout(function() { $(this).css({'cursor':'none','color':'#4E7F4E'}); }).end(); }, complete: function(jqXHR, textStatus) { if (history.pushState) { var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + "?letter_no=" + data[0][1]; window.history.pushState({path:newurl},'',newurl); window.pushedNewUrl = newurl; } } }); }); }); $(this).mouseup(function() { $(this).css({"color": "#ccc", "font-weight": "normal"}); }); // $('body, html').animate({scrollTop: $(this).offset().top},800); }) .mouseout(function() { $("span.discover_text").css({"cursor":"auto","line-height":"1.6em","font-size":"1em"}); }); }, complete: function(jqXHR, status) { selfSearchResults_QA = $('#main').html(); /********************* Insert ENDS here *********************/ } }); }); })(); Further elaboration is requested. Roddy

Please find below the three critical pieces of code used to implement button-and-key functionality as proposed by Ingolme. They have been tested locally, but not remotely. Without Ingolme's proposal the local and remote versions are identical. The HTML (overview.html) <div id="search_qa_div"> <div id='qa_header'> <h1 style='padding-top: 2.9em;'>The Onsite<br />Grammar Captive<br />Question and Answer<br />Search Engine</h1> <form id='qa_searchform' style='margin-top:2em;'> <fieldset id='qa_field'> <legend>Search and Find</legend> <input id='qa_input' type="text" class='SearchInput' placeholder='Enter keywords and phrases here ...' name='search_qa_input' required> <input id='qa_submit' type="button" class='SearchButton' value="Search"> </fieldset><!-- end fieldset#qa_field --> <label id="qa_input_error" class="error" for="qa_input">Please enter what interests you. Else, there is nothing to search.</label> <p class='Hint'><span class='InlineHeading'>search guide</span>: A phrase surrounded by <em>double</em>-quotation marks<br />returns only those question and answer pairs that contain the exact phrase.</p> </form> </div><!-- end div#qa_header --> <div id='qa_matches'>Your matches will display here ...</div><!-- end div#qa_matches --> </div><!-- end #search_qa_div --> jQUERY LOAD FUNCTIONS (overview.js) $("#search_qa").mouseover(function() { $(this).css({"cursor": "pointer", "font-weight":"800"}); }) .mouseout(function() { $(this).css("font-weight", "normal"); }); //Causes the weight of the font to change, displays the hidden text to appear in the #main <div> element, and brings about a change in color. $("#search_qa").mouseover(function() { $(this).css({"cursor": "pointer", "font-weight":"800"}); }) .click(function() { if (window.selfSearchResults_QA !== null) { var aside_height = $('aside').height(); // $('#main').html(selfSearchResults_QA); $('#main').html(selfSearchResults_QA).css('min-height', aside_height); $.getScript('_utilities/javascript/search_second_go_qa.js'); $.getScript('_utilities/javascript/search_qa.js'); } else { var aside_height = $('aside').height(); var searchQAContent = $("#search_qa_div").html(); // $("#main").html(searchQAContent); $("#main").html(searchQAContent).css('min-height', aside_height); $("#main .error").hide(); $.getScript('_utilities/javascript/search_qa.js'); } }) .mouseup(function() { $(this).css({"color": "#fadb9d","font-weight": "normal"}); $('body, html').animate({scrollTop: $('#main').offset().top},800); }); The PROPOSED, but failed JAVASCRIPT (function() { // $('.error').hide(); // $(".SearchButton").click(function() { var form_var = document.getElementById("qa_searchform"); var input_var = document.getElementById("qa_input"); form_var.addEventListener("submit", search, false); function search(e) { e.preventDefault(); var search_qa_input = input_var.value; if (search_qa_input == "") { $("#qa_input_error").show().append('<br />'); $("#qa_input").focus().focusout(function() { $("#qa_input_error").hide(); }); return false; } // Send an AJAX request var dataString = 'search_input=' + search_qa_input; $.ajax({ type: "POST", url: './_utilities/php/search_qa.php', data: dataString, dataType: 'JSON', statusCode: { 404: function() { alert( "Page not found" ); }}, /********************************* First AJAX call. Success Function *********************************/ success: function(jsonData) { $('#qa_matches').html(''); $('#qa_matches').css({'background-color':'#fff','background-image':'none'}).html("<p>Your Search Results for [ <span style='font-weight:bold;'>" + search_qa_input + "</span> ] in descending order of matched relevance are:</p>"); $.each(jsonData, function(key, object){ $('#qa_matches').append("<div class='paginate'><div class='item_info podcast_item'><div class='news_num'>No. " + object.letter_no + "</div><div class='news_title'>" + object.qa_question + "<br /><span class='pubdate'>" + object.submission_date + "</span></div></div><div class='discover'><span class='discover_text'>The Answer ...</span></div><div class='hidden_info'><div class='news_describe'>" + object.qa_answer + "</div><div class='news_link'><a href='?letter_no=" + object.letter_no + "' title='Seven Gates - Edition No. " + object.letter_no + "' target='_self'>Click and Read</a></div><div><p style='font-size:0.8em;margin-top:-0.3em;'>the newsletter in which this question and answer first appeared!</p></div></div><!-- end div.hidden_info --><hr class='hr_divide' /></div><!-- end div.paginate -->"); }); /* $('#qa_matches').append('<div>letter_no: ' + object.letter_no + '<br />qa_question: ' + object.qa_question + '<br />qa_answer: ' + object.qa_answer + '<br />submission_date: ' + object.submission_date + '<br />revision_date: ' + object.revision_date + '</div>'); */ /* $('#letter_matches').append("<div class='paginate'><div class='item_info podcast_item'><div class='news_num'>No. " + object.letter_no + "</div><div class='news_title'>" + object.letter_title + "<br /><span class='pubdate'>" + object.submission_date + "</span></div></div><div class='discover'><span class='discover_text'>Discover more ...</span></div><div class='hidden_info'><div class='news_describe'>" + object.letter_abstract + "</div><div class='news_link'><a href='?letter_no=" + object.letter_no + "' title='Seven Gates - Edition No. " + object.letter_no + "' target='_self'>Click and Read!</a></div></div><!-- end div.hidden_info --><hr class='hr_divide' /></div><!-- end div.paginate -->"); */ // }); var collection = $(".paginate"); var collNum = collection.length; var perPage = 2; collection.slice(perPage).hide(); $('#qa_matches').append("<div id='pagn'></div><!-- end div#pagn -->"); $("#pagn").pagination({ items: collNum, itemsOnPage: perPage, cssStyle: "light-theme", onPageClick: function(pageNum) { var start = perPage * (pageNum - 1); var end = start + perPage; collection.hide().slice(start, end).show(); $('body, html').animate({scrollTop: $('#qa_matches').offset().top},800); } }); /********************* Insert BEGINS here *********************/ $("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() { $('.news_link').find('a').on('click', function(event){ event.preventDefault(); 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]; data.push(data_arr); }); /*********************************************************************************************** Call the Newsletter template ***********************************************************************************************/ var nested_ajax = $.ajax({ // url: './_utilities/php/newsletter.php', url: './newsletter/template/newsletter_generator_local.php', method: 'GET', // data: {'hash': data[0][1],'letter_no': data[1][1]}, data: {'letter_no': data[0][1]}, dataType: 'html', statusCode: { 404: function() { alert( "Page not found" ); } }, success: function(template) { $("#main").css('background-image','none').html(template); $("#letter_dissemination").hide(); $('body, html').animate({scrollTop: $('#main').offset().top},800); $("#click_share").mouseenter(function() { $(this).css({'cursor':'pointer','color':'#5a4149'}); }); $("#click_share").click(function(){ $("#letter_dissemination").slideToggle(800, function(){ var jsSocialsURL ='./_utilities/javascript/jssocials.js'; $.getScript(jsSocialsURL, function() { $("#share").jsSocials( {showLabel: false, showCount: false, shares: ["email", "twitter", "facebook", "googleplus", "linkedin", "pinterest", "whatsapp"] }); }); }); }) .mouseout(function() { $(this).css({'cursor':'none','color':'#4E7F4E'}); }).end(); }, complete: function(jqXHR, textStatus) { if (history.pushState) { var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + "?letter_no=" + data[0][1]; window.history.pushState({path:newurl},'',newurl); window.pushedNewUrl = newurl; } } }); }); }); $(this).mouseup(function() { $(this).css({"color": "#ccc", "font-weight": "normal"}); }); // $('body, html').animate({scrollTop: $(this).offset().top},800); }) .mouseout(function() { $("span.discover_text").css({"cursor":"auto","line-height":"1.6em","font-size":"1em"}); }); }, complete: function(jqXHR, status) { selfSearchResults_QA = $('#main').html(); /********************* Insert ENDS here *********************/ } }); } // }); })(); The above code works until something is entered into the search box, whereupon clicking the Search button or depressing the ENTER/RETURN key yields nothing. Roddy

REQUEST: Please compare the results in the middle panel of the following two actions: ACTION ONE: Click on the phrase Weekly Podcasts under the heading Products in the navigation bar of the Grammar Captive mainpage. Scroll to the bottom of the page and view how the middle panel exceeds the height of the navigation bar and side panel. ACTION TWO: While on the same page with the same panel open click on the phrase Click and Listen. This will bring you to a different document in the same window. Notice that the middle panel does not exceed the height of the navigation bar and side panel. Also, note that the panel's scroll functionality is well in place. Now return to the Grammar Captive mainpage and perform the following: Find the phrase Q&A under the heading Search Grammar Captive in the navigation bar and click on it. Notice the absence of a border around the middle panel. Enter the word Frage in the search box and click on the Search button. (Do not hit the ENTER/RETURN key, else you will be blown away) Notice that middle content is now enclosed in a border and that the height of the content is nearly that of the navigation bar and side panel. (I acknowledge that there are some problems with the CSS, and I believe that I know how to fix them.) Click on the phrase The Answer ... wherever you would like and notice that the content of the middle panel fill below either of the two side panels. Click on the phrase Click and Read below the answer on watch the role of digital toilet paper unravel. It is this phenomenon that I am seeking to prevent with the introduction of scroll functionality. The Javascript that works for ACTION TWO on the Podcast hostpage refuses to work on the Grammar Captive mainpage. if (status === 'success') { var aside_height = $('aside').height(); $('#main').css('min-height', aside_height); $('#pagn').show(); } This, no matter the placement or alteration. Adding the property-value pair 'overflow-y' : 'scroll' achieves nothing. $('#main').css({'min-height':aside_height,'overflow-y':'scroll'}); Any ideas? Roddy

No. It is not the problem. Please do not go away. It will take me a good ten minutes or so to put this one together for you. Roddy

Safari 11.0.3 I tried again. The scroll function does work, but the scroll bar only appears after one has attempted to scroll. There is nothing to tell you that the scroll functionality is available, but the appearance of an arrow. It is somewhat misleading. The same is true of Firefox and Chrome -- well, at least, in an Apple environment. Thank you for the encouragement to try again. Roddy

Ingolme: I tried your code, but it failed. As a result, I am going to try to rewrite it in jQuery -- a version of Javascript that I understand a little better. In order to achieve this, however, I would like very much for you to answer the following questions in regard to your own code. QUESTION ONE: Is it possible for Javascript to be confused by the creation of new variables called form and input? Might these not already exist within the javascript namespace? QUESTION TWO: How does the word false function in the following expression. How might I replicate its functionality with the jQuery .on( ) or .submit( ) methods? form.addEventListener("submit", search, false); MY ATTEMPT TO IMPLEMENT YOUR CODE (function() { // $('.error').hide(); // $(".SearchButton").click(function() { var form = document.getElementById("qa_searchform"); var input = document.getElementById("qa_input"); form.addEventListener("submit", search, false); function search(e) { e.preventDefault(); var search_qa_input = input.value; if (search_qa_input == "") { $("#qa_input_error").show().append('<br />'); $("#qa_input").focus().focusout(function() { $("#qa_input_error").hide(); }); return false; } // Send an AJAX request var dataString = 'search_input=' + search_qa_input; $.ajax({ type: "POST", url: './_utilities/php/search_qa.php', data: dataString, dataType: 'JSON', statusCode: { 404: function() { alert( "Page not found" ); }}, /********************************* First AJAX call. Success Function *********************************/ success: function(jsonData) { $('#qa_matches').html(''); $('#qa_matches').css({'background-color':'#fff','background-image':'none'}).html("<p>Your Search Results for [ <span style='font-weight:bold;'>" + search_qa_input + "</span> ] in descending order of matched relevance are:</p>"); $.each(jsonData, function(key, object){ $('#qa_matches').append("<div class='paginate'><div class='item_info podcast_item'><div class='news_num'>No. " + object.letter_no + "</div><div class='news_title'>" + object.qa_question + "<br /><span class='pubdate'>" + object.submission_date + "</span></div></div><div class='discover'><span class='discover_text'>The Answer ...</span></div><div class='hidden_info'><div class='news_describe'>" + object.qa_answer + "</div><div class='news_link'><a href='?letter_no=" + object.letter_no + "' title='Seven Gates - Edition No. " + object.letter_no + "' target='_self'>Click and Read</a></div><div><p style='font-size:0.8em;margin-top:-0.3em;'>the newsletter in which this question and answer first appeared!</p></div></div><!-- end div.hidden_info --><hr class='hr_divide' /></div><!-- end div.paginate -->"); }); /* $('#qa_matches').append('<div>letter_no: ' + object.letter_no + '<br />qa_question: ' + object.qa_question + '<br />qa_answer: ' + object.qa_answer + '<br />submission_date: ' + object.submission_date + '<br />revision_date: ' + object.revision_date + '</div>'); */ /* $('#letter_matches').append("<div class='paginate'><div class='item_info podcast_item'><div class='news_num'>No. " + object.letter_no + "</div><div class='news_title'>" + object.letter_title + "<br /><span class='pubdate'>" + object.submission_date + "</span></div></div><div class='discover'><span class='discover_text'>Discover more ...</span></div><div class='hidden_info'><div class='news_describe'>" + object.letter_abstract + "</div><div class='news_link'><a href='?letter_no=" + object.letter_no + "' title='Seven Gates - Edition No. " + object.letter_no + "' target='_self'>Click and Read!</a></div></div><!-- end div.hidden_info --><hr class='hr_divide' /></div><!-- end div.paginate -->"); */ // }); var collection = $(".paginate"); var collNum = collection.length; var perPage = 2; collection.slice(perPage).hide(); $('#qa_matches').append("<div id='pagn'></div><!-- end div#pagn -->"); $("#pagn").pagination({ items: collNum, itemsOnPage: perPage, cssStyle: "light-theme", onPageClick: function(pageNum) { var start = perPage * (pageNum - 1); var end = start + perPage; collection.hide().slice(start, end).show(); $('body, html').animate({scrollTop: $('#qa_matches').offset().top},800); } }); /********************* Insert BEGINS here *********************/ $("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() { $('.news_link').find('a').on('click', function(event){ event.preventDefault(); 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]; data.push(data_arr); }); /*********************************************************************************************** Call the Newsletter template ***********************************************************************************************/ var nested_ajax = $.ajax({ // url: './_utilities/php/newsletter.php', url: './newsletter/template/newsletter_generator_local.php', method: 'GET', // data: {'hash': data[0][1],'letter_no': data[1][1]}, data: {'letter_no': data[0][1]}, dataType: 'html', statusCode: { 404: function() { alert( "Page not found" ); } }, success: function(template) { $("#main").css('background-image','none').html(template); $("#letter_dissemination").hide(); $('body, html').animate({scrollTop: $('#main').offset().top},800); $("#click_share").mouseenter(function() { $(this).css({'cursor':'pointer','color':'#5a4149'}); }); $("#click_share").click(function(){ $("#letter_dissemination").slideToggle(800, function(){ var jsSocialsURL ='./_utilities/javascript/jssocials.js'; $.getScript(jsSocialsURL, function() { $("#share").jsSocials( {showLabel: false, showCount: false, shares: ["email", "twitter", "facebook", "googleplus", "linkedin", "pinterest", "whatsapp"] }); }); }); }) .mouseout(function() { $(this).css({'cursor':'none','color':'#4E7F4E'}); }).end(); }, complete: function(jqXHR, textStatus) { if (history.pushState) { var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + "?letter_no=" + data[0][1]; window.history.pushState({path:newurl},'',newurl); window.pushedNewUrl = newurl; } } }); }); }); $(this).mouseup(function() { $(this).css({"color": "#ccc", "font-weight": "normal"}); }); // $('body, html').animate({scrollTop: $(this).offset().top},800); }) .mouseout(function() { $("span.discover_text").css({"cursor":"auto","line-height":"1.6em","font-size":"1em"}); }); }, complete: function(jqXHR, status) { selfSearchResults_QA = $('#main').html(); /********************* Insert ENDS here *********************/ } }); } // }); })(); THE ONLINE REFERENCE (without your code) Proceed to the Grammar Captive mainpage. Find the word Q&A under the heading Search Grammar Captive Enter the word Frage in the search box. Click on the Search button. When I replace this code with the above code, there are no error messages, but nothing appears. Roddy

WONDERMENT: In anticipation of my next question while I continue my struggle with the implementation of optional key and button functionality on my own website, I thought that it might be helpful to bring the following to your attention. https://www.w3schools.com/CSSref/playit.asp?filename=playcss_overflow-y&preval=scroll QUESTION: Is there a good reason why the scroll bar does not appear when the [scroll] option has been selected? Roddy 🙃

If I have understood you correctly, I would then add the following listener in order to make the AJAX request via activation of the ENTER/RETURN key form.addEventListener('keyup', search, false); Is this correct? In effect, I would have two listeners attached to the same form event. Have I got it now? Roddy

In the end, it was simply better to set the width of the <input type='text' ... > to 75%, eliminate all div elements, as well as the flex box. The responsive design that worked for Firefox and Safari is now gone, but the appearance is now consistent across all browsers and reasonable responsive format has been achieved. In any case, thank you for your suggestion. Roddy

Finally, I have time again and would like to return to your suggestion. Unfortunately, our communication was not entirely successful, and I would like to turn your attention to the following: (function() { $(".SearchButton").click(function() { var search_podcast_input = $("#podcast_input").val(); if (search_podcast_input == "") { $("#podcast_input_error").show().append('<br />'); $("#podcast_input").focus().focusout(function() { $("#podcast_input_error").hide(); }); return false; } var dataString = 'search_input=' + search_podcast_input; $.ajax(); }); })(); Under current conditions and among other user actions either of two events could occur: When the user clicks on the <input type='submit' class='SearchButton'> submit button the undefined AJAX call in the above code is sent to a PHP processing page. When the user clicks on the ENTER/RETURN key, he refreshes the page, eliminates what he just entered into the form, and must start all over again. What i do not understand is how to prevent the ENTER/RETURN key from refreshing the page on the one hand and cause the form to be submitted on the other. Now, it is easy to understand how the computer knows that the form button or ENTER/RETURN key has been activated, and it is easy to bind a particular action to a form button. Binding an action to the ENTER/RETURN key is, however, completely different, in so far as the key has many uses and can be performed at any time. I simply do not understand, how to insure that activating the ENTER/RETURN key will produce the desired effect at the time that it is desired and no other. Can you help with my understanding in this regard? For example, is it the location of the cursor inside a form that tells the ENTER/RETURN key what action to trigger? Roddy

The twelve lines of code that you are dismissing are a carry-over from another implementation that uses an AJAX call that is unnecessary for the current implementation. You are correct; they could be left out, as they are a waste of CPU time. Roddy

OK. Having resolved the dysfunctional link I may now return to the key problem. Please find below my most recent attempt at including the .keyup() method. Unfortunately, it too has failed. Roddy $("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){ //event.preventDefault(); 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]; data.push(data_arr); }); if(event.keyCode === 13) { $('.podcast_link').find('a').click(); } }); }); $(this).mouseup(function() { $(this).css({"color": "#ccc", "font-weight": "normal"}); }); $('body, html').animate({scrollTop: $(this).offset().top},800); }) .mouseout(function() { $("span.discover_text").css({"cursor":"auto","line-height":"1.6em","font-size":"1em"}); });

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! Roddy

It makes no difference whether it is 100%, 80%, or 70%, the result is similar. I tried these thinking the same. Roddy

What i have learned is that the mysqli result object behaves differently with mysqli object and myslqi statement objects. The technique that I am using resolves these differences. I learned it in one of the footnotes to prepared statements along while ago and no longer recall the source. In any case, '"..."' does not appear to work. What I have learned is that single quotation marks are automatically placed around unquoted words that are read into placeholders. Thus, Where along the following chain it occurs I do not know, but a single-word entry with no quotation marks is translated into one with single quotation marks. <input type='text' name='podcast_input' > $podcast_input = $_POST['podcast_input']; mysqli_stmt->bind_param(s, $podcast_input); Thus, lorem ipsum entered into an input form control becomes 'lorem ipsum' by the time something is matched against it. This makes no difference, however, as words contained within single quotation marks are treated singly. Roddy

BACKGROUND: The same HTML/CSS set-up produces different results in different browsers. In this case Firefox and Safari agree, but Chrome does not. I have no idea how the following looks in Internet Explorer. The problem is one of horizontal alignment. For some reason Chrome forces the second input form control (type='submit') to the following line. Surely I could resolve the problem with Flexbox, but I would like to know what is going on instead. The HTML <div id="search_podcast_div"> <div id='podcast_header'> <h1 style='padding-top:1em;'>The Onsite<br />Grammar Captive<br /><span style='font-family:Bradley Hand, cursive;font-size:1.8em;color:#5a4149'>Weekly Podcasts</span><br />Search Engine</h1> <form id='podcast_searchform'> <fieldset id='podcast_field'> <legend>Search and Find</legend> <input id='podcast_input' type="text" class='SearchInput' placeholder='Enter keywords and phrases here ...' name='search_podcast_input' required> <input id='podcast_submit' type="button" class='SearchButton' value="Search"> </fieldset><!-- end fieldset#podcast_field --> <label id="podcast_input_error" class="error" for="podcast_input">Please enter what interests you. Else, there is nothing to search.</label> <p class='Hint'><span class='InlineHeading'>search guide</span>: A phrase surrounded by <em>double</em>-quotation marks<br />returns only those podcasts that contain the exact phrase.</p> </form> </div><!-- end div#podcast_header --> <div id='podcast_matches'>Your matches will display here ...</div><!-- end div#podcast_matches --> </div><!-- end #search_podcast_div --> The CSS #letter_header h1, #podcast_header h1, #qa_header h1 { text-align: left; } #letter_searchform, #podcast_searchform, #qa_searchform { background: linear-gradient(60deg, #5a4149, #f0efef); /* Standard syntax */ text-align: center; width:auto; margin: 2.5em auto 1.5em auto; padding-top: 1.5em; padding-bottom: 1.5em; } #letter_field, #podcast_field, #qa_field { margin-left: 0.5em; margin-right: 0.5em; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; } #letter_field legend, #podcast_field legend, #qa_field legend { color: #ffffff; } .SearchInput { margin: 0em 0.5em 0em 1em; width: 80%; border-radius: 15%; } .SearchInput:focus { background: #5a4149; color: #ffffff; border: 1px solid #ffffff; } .SearchButton { margin-right: 1em; border-radius: 5px; color:#5a4149; } .SearchButton:hover { background-color:#5a4149; color:#ffffff; } label.error { display:block; /* clear:both; float:right; */ color:#fadb9d; font-size:0.8em; font-weight:bold; margin-top:0.5em; margin-bottom:0.5em; } .Hint { font-size: 0.6em; color: #ffffff; font-weight: bold; } .InlineHeading { font-variant: small-caps; } jsRoddy You can view the resulting phenomenon by clicking on either Newsletters or Podcasts under the subheading Search Grammar Captive in the navigation bar of the Grammar Captive mainpage.

Which anchor is "that anchor"? Roddy

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() { $("#podcast_input_error").hide(); }); return false; } var dataString = 'search_input=' + search_podcast_input; $.ajax({ 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" }).appendTo("head"); $("<link/>", { rel: "stylesheet", type: "text/css", href: "./_utilities/css/podcast_select.css" }).appendTo("head"); $('#podcast_matches').html(''); $('#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; collection.slice(perPage).hide(); $('#podcast_matches').append("<div id='pagn'></div><!-- end div#pagn -->"); $("#pagn").pagination({ 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); } }); /******************** BEGIN PODCAST INSERT ********************/ $("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){ event.preventDefault(); 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]; data.push(data_arr); }); }); }); $(this).mouseup(function() { $(this).css({"color": "#ccc", "font-weight": "normal"}); }); $('body, html').animate({scrollTop: $(this).offset().top},800); }) .mouseout(function() { $("span.discover_text").css({"cursor":"auto","line-height":"1.6em","font-size":"1em"}); }); /******************** END PODCAST INSERT ********************/ }, complete: function(jqXHR, status) { if (status === 'success') { var aside_height = $('aside').height(); $('#main').css('min-height', aside_height); $('#pagn').show(); } selfSearchResults_Podcast = $('#main').html(); } }); }); })(); Please advise. Roddy

As every that I have tried still fails, I would like to a hold on this problem. I will return to it later.

As handleClick, handleMouseUp, and handleMouseOver are all called functions should they not be inserted as such -- namely, $("#search_letter").mouseover(handleMouseOver()).click(handleClick()).mouseup(handleMouseUp()); Roddy

You are welcome to see the code, but it is difficult for me to find the kind of error that would produce the unwanted effect. By the way, I ran the same statement without the placeholder (?) using "Seven Gates" (notice, they are double, not single quotes) with phpMyAdmin and was returned the same entries that I can only otherwise produce with the single word entries seven and gates. Voilá la code! <?php ini_set('display_errors', 0); ini_set('error_log', '/Users/kiusau/Sites/error.log'); ini_set('log_errors', 1); // error_reporting(E_ALL); if(isset($_POST['search_input'])) { $prelim_result = []; $letter_input = $_POST['search_input']; require_once('./classes/class.lunarpages.php'); $lunarpages = new Lunarpages(); $mysqli_obj = $lunarpages->get_mysqli_obj(); $sql ="SELECT letter_no, letter_title, letter_abstract, submission_date, revision_date, MATCH (letter_title, letter_abstract, letter_body) AGAINST (?) AS letter_score FROM sevengates_letter WHERE MATCH (letter_title, letter_abstract, letter_body) AGAINST (?) ORDER BY letter_score DESC"; $mysqli_stmt = $mysqli_obj->stmt_init(); $mysqli_stmt->prepare($sql); $mysqli_stmt->bind_param("ss", $letter_input, $letter_input); $mysqli_stmt->execute(); $meta = $mysqli_stmt->result_metadata(); while ($field = $meta->fetch_field()) { $params[] = &$row[$field->name]; } call_user_func_array(array($mysqli_stmt, 'bind_result'), $params); while ($mysqli_stmt->fetch()) { foreach($row as $key => $val) { $c[$key] = $val; } $prelim_result[] = $c; } echo json_encode($prelim_result); // print_r($prelim_result); } ?> Roddy