iwato

As you probably know, I work with inserts rather than frames, and Ioad the CSS, HTML, and Javascript only when the insert is called. In effect, my goal is two-fold: one, load the CSS, HTML, and Javascript at the same place in the host page; two, leave as small a footprint as possible in the HTML that defines the document. By keeping the CSS, HTML, and Javascript together it is easy to see what is going on. Placing the Javascript at the top of the host page separates it from the rest of the insert "package". I suppose I could write a snippet that would insert a <script> tag at the top of the host page. For, after all, this is how I get the CSS to run. What, however, would be the advantage of this? Roddy

Thank you, Ingolme. The idea is to use the same code in different places more than once. Kind of like a class in PHP. Roddy

This problem has been resolved with the following additional else {} statement. $('#nl_tongue').change(function() { if ($('#nl_tongue').val() == 'other_tongue') { $('#nl_other').show(); } else { $('#nl_other').hide(); } }); Roddy

QUESTION: What is the best way to trigger a script stored in a fetched file. BACKGROUND: I send a query string via an HTTPRequest to a file that upon confirmation loads a script containing AJAX calls. I want to know the best way to get the AJAX calls to run when the file in which they are contained is loaded into the file that contains the HTTPRequest. PROPOSAL: Someone on the internet suggested that the code be placed in an anonymous function that is triggered with the ( ) operator. //data.js function() { code to trigger } $.getScript('data.js', function(data) { (); } Does this make sense? What would you recommend? Roddy

Can you think of a different way? I purposely used hover to make possible to see what is available at a glance. Roddy

UNDERSTANDING THE PROBLEM: Probably the best way to understand the problem that the following piece of code produces is to observe the problem in action. Please do the following: Open to the Grammar Captive podcast_hostpage.php. Look for the following path in the navigation bar on your left: Podcast Archives/Concept/Podcast Index ... Click on the words Podcast Index ... Run your mouse over the list stopping at various places within the list until the following effect is produced. An unending back and forth opening and closing of the <li> elements of a particular <ul> element. Caution: only the first three <li> elements are active. The RELEVANT CODE $("#main").html(concept_var); $("#main").find('.cat_list').children().hide(); $("#main").find('.cat_list').each(function(){ $(this).hover(function(){ $(this).children().show(400); $(this).find('li').mouseenter(function(){ $(this).css('cursor','pointer'); }).click(function(){ ... }); }); }, function(){ $(this).children().hide(400); } ); }); QUESTION: How does one insure that one list is closed before another is open, and that no two lists or sublists is open at the same time" Roddy

Insert the following code echo $row['amount']; after the following line of code $row = $cf->fetch(PDO::FETCH_ASSOC); and see if its value is, indeed, greater than zero. For, if it is not, you have not met the condition of the if-statement in which the header() function is located. Roddy

According to the online PHP manual for the PHP mail( ) function: bool mail ( string $to , string $subject , string $message [, string $additional_headers [, string $additional_parameters ]] ) You have written: mail(string $formproc','string $headers); The word string is simply telling you the variable type to be entered. You do not include it as part of the function's argument(s). Also, may I venture to suggest that the value of the variable that you have labeled $headers in the following line of code is indeed the email address of the recipient. $headers = $formproc->SafeDisplay('email'); If so, why are you assigning it to a variable named $headers? and not $to or $email or what ever variable name you chose. The mail( ) function only cares that the variable type of what you enters is correct, and that what you enter is entered in the proper order. All arguments written in brackets in the PHP manual are optional. You appear to have nothing more than an email address, and the function requires both a subject heading and message. Try, $to = $formproc->SafeDisplay('email'); $subject = 'An email subject heading of your choice'; $message = 'A message to be placed in the body of the email. Once again, you get to choose.'; And, then do as Don suggested. Roddy ps. Do not forget to check the trophy in the heart pop-up, if our answers help.

SET-UP: Please find below three items including; one, the relevant form elements of a much larger form; two, the Javascript that determine what data will be sent to a PHP processing page via a $_POST variable, and three, The actual implementation of the code. The question follows the presentation of the code. The HTML <div id='language_options' style='clear:both;'> <label for='nl_tongue'>Native Tongue:<span class="formlabel">*</span></label> <span class="rightfloat"> <select id="nl_tongue" name="language" style="width:150px;"> <option selected value="0">Select Language</option> <optgroup label='africa [east]'> <option value='mg'>Malagasy</option> <option value=sw>Swahili</option> </optgroup> <optgroup label='africa [central]'> <option value=ny>Chichewa</option> <option value=sn>Shona</option> </optgroup> <optgroup label='Not found?'> <option value='other_tongue'>Click and enter!</option> </optgroup> </select> </span> </div><!-- end div#language_options --> <div id='nl_other'> <span class="rightfloat"><input id='nl_other_input' type='text' name='other' value=''></span> </div><!-- end div#nl_other --> <label id="nl_tongue_error" class="error" for="nl_tongue">This field is required.</label> The JAVASCRIPT $.get('./newsletter_filler.html', function(data) { $('#main').html(data); $('#nl_other').hide(); var tongue = ''; $('#nl_tongue').change(function() { if ($('#nl_tongue').val() == 'other_tongue') { $('#nl_other').show(); } }); }).done(function(){ $('.error').hide(); $(".button").click(function() { --- Other Code --- /********************************* The language Variable *********************************/ var language = $("select#nl_tongue").val(); if (language == "0") { $("label#nl_tongue_error").html("<p style='line-height:1.3em'>Please select your first language! Or, click on the <span style='font-weight:bold;'>\"Not found?\"</span> option at the bottom of the list of languages.</p>").show().css('float','left'); $("select#nl_tongue").focus().focusout(function() { $("label#nl_level_error").hide(); }); return false; } if (language == 'other_tongue') { language = $("#nl_other input").val(); if($("#nl_other input").val() == '') { $("label#nl_tongue_error").html("<p style='line-height:1.3em'>Please enter your first language.</p>").show().css('float','left'); $("nl_other_input").focus().focusout(function() { $("label#nl_tongue_error").hide(); $("#nl_other_input).hide(); }); return false; } } }); --- More Code --- }); IMPLEMENTATION: Sequence of Events Go to the Grammar Captive mainpage and do the following: Click on the word Subscribe under the heading Info/Newsletter. Click on the final <option> Click and enter! under the Not Found? <optgroup> at the bottom of the Select Language list. Enter a language of some sort. Click where it says Not found? and select a different language. Submit the form. The Outcome: The selected language takes precedence over the entered language, and the former is sent to the data base. DILEMMA: In order to correct this problem I have experimented in a variety of ways, but to know avail. What would you recommend and why? Roddy

If you would like to experience what you have enable Just click on the word Subscribe under the heading Info/Newsletter in the navigation bar on the Grammar Captive main page, fill out the form, and submit your information. Then, watch what happens, Roddy

$.ajax({ type: "POST", url: "./formPageAlt.php", data: dataString, success: function(text_data) { $('#contact_form').html("<div id='message'></div>"); $('#message').html("<h2>Congratulations, <span style='font-family: Bradley Hand, cursive';font-size:1.2em;'>" + text_data + "</span>!</h2>") .append("<p> Your contact form has been submitted securely to the Grammar Captive database using TSL/SSL protocol! It will stored on the Lunarpages webserver in Orange, California USA.</p><p>If you have any doubt about the safety of your information, please look under the headings Other/Internet Security and Other/Legal Privacy in the navigation bar on your left, or email the Grammar Captive webmaster at <a href='mailto:admin@grammarcaptive.com?subject=Grammar%20Captive%20Webmaster%20-%20Question%20About%20Internet%20Security' title='The Grammar Captive webmaster' target='_blank'>admin@grammarcaptive.com</a></p>") .hide() .fadeIn(1500, function() { $('#message').append("<img id='checkmark' src='images/check.png' />"); }); } }); var dataString = 'name='+ name + '&email=' + email + '&mobile=' + mobile;

Sometimes simple is better. It worked! Hooray, hooray, hooray. An entire morning of experimentation resolved. Thank you! Roddy

OK. Then for the continued purpose of experimentation what would the setting be for receiving echoed text from the PHP file. I set dataType to 'TEXT' in the javascript file and echoed the variable $name in the PHP file as output. Still the AJAX response was not received. The console.log() function showed nothing and the name was missing from error message. In effect, var dataString = JSON.stringify(name,email,mobile); $.ajax({ type: "POST", url: "./formPageAlt.php", data: dataString, dataType: 'TEXT', success: function(text_data) { $('#contact_form').html("<div id='message'></div>"); $('#message').html("<h2>Congratulations, <span style='font-family: Bradley Hand, cursive';font-size:1.2em;'>" + text_data + "</span>!</h2>") .append("<p> Your contact form has been submitted securely to the Grammar Captive database using TSL/SSL protocol! It will stored on the Lunarpages webserver in Orange, California USA.</p><p>If you have any doubt about the safety of your information, please look under the headings Other/Internet Security and Other/Legal Privacy in the navigation bar on your left, or email the Grammar Captive webmaster at <a href='mailto:admin@grammarcaptive.com?subject=Grammar%20Captive%20Webmaster%20-%20Question%20About%20Internet%20Security' title='The Grammar Captive webmaster' target='_blank'>admin@grammarcaptive.com</a></p>") .hide() .fadeIn(1500, function() { // $('#message').append("<img id='checkmark' src='images/check.png' />"); $('#message').append("<img id='checkmark' src='images/check.png' />"); }); } }); and <?php /* If ($_POST['name'] && $_POST['email'] && $_POST['mobile']) { $name = $_POST['name']; header('content-type','application/json'); echo json_encode($name); // echo $name; } */ If ($_POST['name'] && $_POST['email'] && $_POST['mobile']) { $name = $_POST['name']; // header('content-type','application/text'); // echo json_encode($name); echo $name; } ?> Roddy

Why do you think that would work? to show or echo out I tried to edit the error in the previous entry, but apparently it did not go through. I have now tried the following with both GET and POST variables and have added the contentType property to the AJAX request object and header() function to the PHP file. Although the PHP file generates the proper response, it is not received by AJAX. The JAVASCRIPT $.ajax({ type: "GET", url: "./formPageAlt.php", data: dataString, dataType: 'JSON', contentType: 'application/json', success: function(jsonData) { console.log(jsonData); // alert(jsonData); $('#contact_form').html("<div id='message'></div>"); $('#message').html("<h2>Welcome" + jsonData + "Your contact form has been submitted!</h2>") .append("<p>We will be in touch soon.</p>") .hide() .fadeIn(1500, function() { $('#message').append("<img id='checkmark' src='images/check.png' />"); }); } }); The PHP <?php /* If ($_POST['name'] && $_POST['email'] && $_POST['mobile']) { $name = $_POST['name']; header('content-type','application/json'); echo json_encode($name); // echo $name; } */ If ($_GET['name'] && $_GET['email'] && $_GET['mobile']) { $name = $_GET['name']; header('content-type','application/json'); echo json_encode($name); // echo $name; } ?> I feel like what I am doing is forbidden. Is it true? Roddy

This is just experimentation. What I will be returning is more complex. Roddy

OK, so why does the message containing the jsonData string fail. Am I not rendering the string properly? <?php If (!($_POST['name'] && $_POST['email'] && $_POST['mobile'])) { $name = $_POST['name']; echo json_encode($name); } ?> Roddy

So, if I have understood you correctly, I cannot expect the following code snippet to append to <div id='main> a message that contains the value of a JSON string returned from .newsletter_filler_form.php by AJAX. Is this correct? $("#sevengates").submit(function(e){ $.ajax({ type: "POST", url: "./newsletter_filler_form.php", data: dataString, dataType: 'JSON', success: function(jsonData) { $('#main').html("<div id='message'></div>"); $('#message').html("<h2>Welcome " + jsonData.name + ", your contact form has been submitted!</h2>") .append("<p>We will be in touch soon.</p>") .hide() .fadeIn(1500, function() { $('#message').append("<img id='checkmark' src='images/check.png' />"); }); } }); return false; }); Roddy

BACKGROUND: Using AJAX I have successfully filled a <div> element with HTML that contains a <form> element whose action attribute points to a $_SERVER_REQUEST superglobal in the same filled <div> element. I have also set the target attribute of the <form> element to _self. Unfortunately, when the <input type='submit'> form control is clicked the entire page is replaced. I want only that the contents of the <div> element is replaced. DILEMMA: I want to suppress this replacement behavior, but still process the form data with the PHP contained within the <div> element. Although I have managed to suppress the replacement, I do not know how to process the form data within the <div> element. The CODE: .click(function() { $("#main").html(''); $.ajax({ url: './_utilities/php/newsletter_filler.php', method: 'GET', data: {name : 'personal', length : 200}, dataType: 'JSON', statusCode: { 404: function() { alert( "Page not found" ); }}, success: function(jsonData) { console.log(jsonData); $.getScript('./_utilities/javascript/wordcount.js', function(data) { $.each(jsonData, function(subfield, obj) { setWordConstraint(obj.id, obj.length); }); }); } }); $("<link/>", { rel: "stylesheet", type: "text/css", href: "./_utilities/css/newsletter_filler.css" }).appendTo("head"); $.get('./newsletter_filler.html', function(data) { $('#main').html(data); }).done(function(){ var tongue = ''; $('#tongue').change(function() { if ($('#tongue').val() == 'other_tongue') { $('#other').show(); } }); $("#sevengates").submit(function(e){ return false; }); }); The jQuery object $("#sevengates") refers to the id of the <form> element. $("#sevengates").submit(function(e){ return false; }); QUESTION: How can I have my cake and eat it too? Or, how do I set the $_POST superglobal without leaving the filled <div>? Roddy

Since you have a paid host, and you are trying to access files located on their server, they ought willingly to provide you with the support that you need. Try support@paidhostname.someextension. Roddy

Got it! This works. $(document).ready(function() { $.ajax({ url: 'newsletter_filler.php', data: {name : 'personal', length : 200}, dataType: 'JSON', statusCode: { 404: function() { alert( "Page not found" ); }}, success: function(jsonData) { $.getScript('wordcount.js', function(data) { $.each(jsonData, function(subfield, obj) { setWordConstraint(obj.id, obj.length); }); }); } }); }); Roddy

I am making progress. The value of dataType was not enclosed in quotation marks. There is still more to be done, though. Roddy

Thanks for the correction, but even writing console.log(jsonData); fails to produce any visible output. Also, the id variable contains the # already. Look at the output from newsletter_filler.php. I will write it again. {"personal":{"id":"#personal","length":"200"}} And, please note that the above result appears as the output in the resource panel. The above string is created by the AJAX call. In effect, the call succeeds, the success function fails. Once again, I am baffled. Is there something that could be preventing the produced output from being read by the AJAX call? Roddy

OK. I have rearranged wordcount.js so that it appears as a function, load it with $.getScript() in the AJAX success function, and call it with a callback function assigned to $.getScript(). WORDCOUNT.JS function setWordConstraint(id, max) { $(id + ' span.word_limit').text(max); $(id + ' textarea').on('keydown', function(e) { var words = $.trim(this.value).length ? this.value.match(/\S+/g).length : 0; if (words <= max) { $(id + ' span.display_count').text(words); $(id + ' span.words_remaining').text(max-words); }else{ if (e.which !== 8) e.preventDefault(); } }); } AJAX SCRIPT $.ajax({ url: 'newsletter_filler.php', data: {name : 'personal', length : 200}, dataType: JSON, statusCode: { 404: function() { alert( "Page not found" ); }}, success: function(jsonData) { console_log(jsonData); $.getScript('wordcount.js', function(jsonData) { $.each(jsonData, function(subfield, obj) { setWordConstraint(obj.id, obj.length); }); }); } }); OUTPUT PRODUCED BY newsletter_filler.php WHEN CALLED BY AJAX {"personal":{"id":"#personal","length":"200"}} THE HTML <div id='personal' style='margin-top:1em;'> <label for='personal' style='color:green;'>Self-Introduction</label><br /> <textarea name='personal' placeholder="Enter this week's abstract here!"></textarea><br /> Word Count: <span class='display_count'>0</span> Words Remaining: <span class='words_remaining'>0</span> <br />A <span class='word_limit'>max</span>-word abstract on this week's topic </div><!-- end div#letter_abstract --> Please note I cannot even get the above console_log() statement to reproduce the output that I am certain is generated by newsletter_filler.php. There are no error messages in the Javascript Console. None! Roddy

What is the code that generated the failed permissions. Your error message should show the source of the error message. Roddy

BACKGROUND: My objective is to replace the content of an existent <div> element with new content that depends on newly loaded javascript, css, and a JSON object retrieved from a PHP processing file by an AJAX call. To this end I have written the following brief piece of code. To be clear the script contained in wordcount.js depends on the value of wordmax. Further this same script is triggered when text is entered into a <textarea> form control found in newsletter.html. Please review the code and answer the questions that follow. .click(function() { $('#main').html(''); ajax_obj = $.ajax({ url: 'newsletter_filler.php', data: {name : 'personal, length : 200}, dataType: JSON, statusCode: { 404: function() { alert( "Page not found" ); }}, success: function(jsonData) { $.getScript('wordcount.js', function(data) { var wordmax = jsonData; }); $.get('newsletter.css', function(data) { $('head style').append(data); } $.get('newsletter.html', function(data) { $('#main').html(data); } } }); } QUESTION ONE: Under the assumption that all of the code in the called files has been properly written and that the content of the .css and .html files is properly placed will the script contained in wordcount.js execute properly when triggered by the content of newsletter.html? QUESTION TWO: Will the content of the files newsletter.css and newsletter.html find their proper place and function as one might expect from such code, if it had been placed in the main document in the elements indicated by jQuery selector at the outset? Roddy