Jump to content

iwato

Members
  • Content count

    1,111
  • Joined

  • Last visited

Everything posted by iwato

  1. Oops! What works for Safari and Chrome, does not work for Firefox. Firefox permits the desired AJAX call using the ENTER/RETURN key, but rejects the same using the form button. Alas, what I though was a solution is not. On the happy side, Chrome's alert uses the word please: "Please fill out this field" Roddy
  2. I hear you, but the browser apparently does not. Is there some way to avoid having to declare the variable search_qa_input twice. Although no complaint is registered when simple alert() are performed, there is a reaction when the alert function is replaced with a function housing the AJAX call. Never mind, the problem was resolved as follows: (function() { $('#qa_searchform').on('submit', function(event) { event.preventDefault(); findAndDisplay(); }); $('.SearchButton').on('click', function() { event.preventDefault(); findAndDisplay(); }); function findAndDisplay() { var search_qa_input = $("input#qa_input").val(); var dataString = 'search_input=' + search_qa_input; $.ajax({...}); } })(); The only difficulty left is to restore my error message functionality -- namely, if (search_qa_input == "") { $("label#qa_input_error").show().append('<br />'); $("input#qa_input").focus().focusout(function() { $("label#qa_input_error").hide(); }); return false; } The following works for the form button, but not for the ENTER/RETURN key. function findAndDisplay() { 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; } var dataString = 'search_input=' + search_qa_input; $.ajax({...}); } This said, because I have indicated the input type='text' form element as required, Safari does provide a rude alert that says, "Fill out this field'. Now, unless you have a solution that is more in line with your own proposal I must move on, for I still have two major tasks to complete before I start podcasting and time is running out. Roddy
  3. Ingolme: The result is similar. Rather than a successful AJAX call, a successful alert( ) appears. Still, the form-button behavior is squelched. The following produces two successful alert( )s. (function() { // $('.error').hide(); $('#qa_searchform').on('submit', function(event) { event.preventDefault(); var search_qa_input = $("input#qa_input").val(); alert(search_qa_input); }); $('.SearchButton').on('click', function() { event.preventDefault(); var search_qa_input = $("input#qa_input").val(); alert(search_qa_input); }); })(); Roddy
  4. Hi, Ingolme. It is nice to see you back. I tried the above code, but it fails. When I change it to the following, the AJAX call works for keyboard submit, but the button-click behavior is squelched. $('#qa_searchform').on('submit', function(event) { event.preventDefault(); var search_qa_input = $("input#qa_input").val(); var dataString = 'search_input=' + search_qa_input; $.ajax({...}); }); Roddy
  5. As it did not work the first time, I simplified the procedure to the following: (function() { $('#qa_searchform').on('submit', function(event) { event.preventDefault(); var search_qa_input = $("#qa_input").val(); findAndDisplay_qa(search_qa_input); }); $('#qa_submit').on('click', function() { $('#qa_searchform').submit(); }); findAndDisplay_qa(searchString) { var dataString = 'search_input=' + searchString; $.ajax({***}); } })(); No effect. Whether I click the submit button or depress the ENTER/RETURN key, nothing happens. Roddy
  6. Dsonesuk: According to the proposed function the default behavior is first suppressed. This means that in order to achieve the additional tasks with the default behavior, the default behavior must somehow be reinstated. I do not understand your point. Please ignore the above statement. I was on my way out and too hasty to pass judgement. I have since returned and have had more time to study. I believe that I understand. You are allowing the <input type='submit'> form control behave as usual and focusing the change in default behavior on the <form> element itself, as Ingolme suggested. This will have been the first time that I have employed the .submit( ) method. i like, will give it a try, and return with the result. Roddy
  7. Having established a consensus on Ingolme's proposed solution my dilemma is how to get the same function to work for both the now understood button and the ENTER/RETURN key. It would appear to be a simple matter of reassigning the contents of Action X to the <input type='submit'> form control and the ENTER/RETURN key. In other words, something of the following order: $("REFERENCE TO FORM").on("submit", function(e){ e.preventDefault(); }); function performActionX() { Do action X; } $("REFERENCE TO FORM").on('click', performActionX); $("REFERENCE TO ENTER/RETURN KEY").on('...', performActionX); or alternatively, $("REFERENCE TO FORM").on("submit", function(e){ e.preventDefault(); $(this).on('click', function() { Do Action X; }); $("REFERENCE TO ENTER/RETURN KEY").on('...', function() { Do Action X; }); }); As I have never worked with a key before, I know neither how to assign a jQuery method to a key, nor how to identify a key-event. I would not be concerned about the seemingly haphazard manner in which action X was put together. Each piece of the code has been tested in several other places on two different Grammar Captive pages and in several contexts on each. It appears to be quite robust. Roddy
  8. 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
  9. 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
  10. 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
  11. BACKGROUND: i have created a search box for users to query the Grammar Captive database with Natural Language functionality. As the query string results in a single variable that is read into an AGAINST statement (see below), I am concerned about the overall safety of my database and web application. QUESTION ONE: Is it possible to write a prepared statement with the value of an AGAINST clause as an unknown? If not, what must one do in order to prevent against SQL injection? WHAT I HAVE CREATED SELECT letter_no, letter_title, letter_abstract, submission_date, revision_date, MATCH (letter_title, letter_abstract, letter_body) AGAINST ('$search_input') AS letter_score FROM sevengates_letter WHERE MATCH (letter_title, letter_abstract, letter_body) AGAINST ('$search_input') ORDER BY letter_score DESC WHAT I WANT TO CREATE SELECT letter_no, letter_title, letter_abstract, submission_date, revision_date, MATCH (letter_title, letter_abstract, letter_body) AGAINST ('$search_input') AS letter_score FROM sevengates_letter WHERE MATCH (letter_title, letter_abstract, letter_body) AGAINST (?) ORDER BY letter_score DESC QUESTION TWO: Will the "What I want to create" version fly? Roddy
  12. iwato

    Conditions

    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
  13. 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
  14. 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
  15. iwato

    Dysfunctional W3Schools Code?

    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
  16. iwato

    Dysfunctional W3Schools Code?

    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 🙃
  17. iwato

    Dysfunctional W3Schools Code?

    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
  18. 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
  19. 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
  20. 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.
  21. iwato

    CSS Floating <Input> Elements in Chrome

    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
  22. 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
  23. 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
  24. 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"}); });
  25. iwato

    Clickable Link that Does Not Link

    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
×