Coding Notes

jquery validate only on selected radio buttons
Working Preview: https://plnkr.co/edit/kvUZOtYDJe60hBWcElIk?preview
https://forum.jquery.com/topic/validate-certain-fields-dependent-on-radio-select
https://jqueryvalidation.org/

Setup

Close iFrame popup

<a href='#' class='mt-1 btn btn-success' onclick='window.parent.Fancybox.close();'>Close</a> <!-- escape key close --> <script type="text/javascript"> $(document).ready(function() { document.body.addEventListener("keydown", (e) => { if (e.keyCode === 27) { window.parent.Fancybox.close(); } }); }); </script>

Regular Gallery Picture

NEW (Use Role='button' to give a pointer hand when hovering) <a data-fancybox='Gallery' data-src='$ImageToDisplayLarge' data-caption='<strong>$AnimalName #$AnimalIDNumber</strong> $Gender $Breeds' role='button'> <img class='img-fluid img-thumbnail rounded float-start img-shadow' src='$ImageToDisplayThumb' alt='$AnimalName' width='350'/> </a> OLDER WAY <a href="/admin/images/Dragon-Blue_Large.jpg" data-fancybox="Gallery" data-caption="<strong>Blue Dragon</strong>"> <img src="/admin/images/Dragon-Blue_Small.jpg" class='img-fluid img-thumbnail'/> </a> - - - - - - - - - <script> Fancybox.bind('[data-fancybox="Gallery"]', { Toolbar: { display: { left: ["infobar"], middle: [ "zoomIn", "zoomOut", "toggle1to1", "rotateCCW", "rotateCW", "flipX", "flipY", ], right: ["slideshow", "thumbs", "close"], }, }, Thumbs : { type: "modern" } }); </script>

Iframe

View Page NO RELOAD

Inline Setup - referencing data-fancybox="ViewPage", also make sure to have data-preload="false" <a href="blank.php?ID=777" class='btn btn-info' data-fancybox="ViewPage" data-type="iframe" data-preload="false" data-width="95%" data-height="95%" > Preloading is disabled, use for page popups <i class='fas fa-eye'></i> ID=777 </a> - - - - - - - - - <script> Fancybox.bind('[data-fancybox="ViewPage"]', { Toolbar: { display: { left: ["infobar"], middle: [ "zoomIn", "zoomOut", "toggle1to1", "rotateCCW", "rotateCW", "flipX", "flipY", ], right: ["slideshow", "thumbs", "close"], }, }, Thumbs : { type: "modern" } }); </script>

View Page RELOAD

Inline Setup - referencing data-fancybox="ReloadPage", also make sure to have data-preload="false"
SAME PAGE scripting, notice location.href is set. <a href=\"admin_products_options_edit.php?PrimaryID=$PrimaryID\" class='btn btn-danger btn-sm' data-fancybox='ReloadPage' data-type='iframe' data-preload='false' data-width='95%' data-height='95%' > $PrimaryID <i class='fas fa-edit'></i></a>   </a> - - - - - - - - - <!-- Reload parent page https://codesandbox.io/s/angry-feather-vl8tne?file=/index.html --> <script> Fancybox.bind('[data-fancybox="ReloadPage"]', { on: { close: () => { //window.location.reload(); //This reloaded twice for some strange reason, maybe other scripts or setups duplicating. location.href = 'admin_products_options.php'; } } }); </script>

Launch from ID

Inline Setup - ID is set <button id="iFrame500x500"> Launch iFrame500x500 (by id) </button> - - - - - - - - - <!-- using info below where to go and how to size --> <script> $(document).ready(function() { document.getElementById("iFrame500x500").addEventListener("click", () => { Fancybox.show([ { src: "https://www.w3.org/", type: "iframe", preload: false, width: 500, height: 500, }, ]); }); } ); </script>

CLASS

Be sure to put this on the PARENT Page for it to work.
<a id='PopupBox' class='PopupBoxClass btn btn-sm btn-default' data-fancybox='PopupBox' data-type='iframe' data-src='/admin_users_add.php'> <i class="fas fa-user-plus"></i> Add User </a> -- or -- <a id='PopupBox' data-fancybox='PopupBox' data-type='iframe' data-src='admin_lcedit_fancybox.php?PrimaryID=$PrimaryID' href='javascript:;' class='PopupBoxClass mb-2 mr-2 btn btn-success btn-xs'> Edit </a> ---------- <script type='text/javascript'> $(document).ready(function() { $('.PopupBoxClass').fancybox( { afterClose:function () { // parent.location.reload(true); //this works but not if the previous page is sending me to popup location.href = 'order_shipping.php'; } }); }); </script> ----- MAYBE TRY this on the popup ----- <script> $(document).ready(function() { $(".fancybox").fancybox({ afterClose: function () { parent.location.reload(true); } }); } ); </script>

ID (not using class)

Notice this one doesn't have the after close function wrapping around the inside
<a id='AddNewPopupBoxClass' class='PopupBoxClass btn btn-xs btn-info' data-fancybox='AddNewPopupBoxClass' data-type='iframe' data-src='/admin_users_add.php'> <i class="fas fa-user-plus"></i> Add User </a> ----------- <script type="text/javascript"> $(document).ready(function() { $("#AddNewPopupBoxClass").fancybox( { type: 'iframe', afterClose: function () { // USE THIS IT IS YOUR ANSWER THE KEY WORD IS "afterClose" parent.location.reload(true); } }); </script>

Admin url: https://www.google.com/recaptcha/admin/site/345665355
https://stackoverflow.com/questions/50405977/how-to-verify-google-recaptcha-v3-response
https://developers.google.com/recaptcha/docs/verify
https://codeforgeek.com/google-recaptcha-v3-tutorial/
https://medium.com/@ben.ritthichai/implementing-and-testing-recaptcha-v3-in-your-front-end-41def016d3b5
In the header (site key): <script src="https://www.google.com/recaptcha/api.js?render=6LefibAfAAAAACd4mJ4-65Rqm-pbGjn590-mdtjA"></script> Modify the submit button: <button class="btn btn-lg btn-primary g-recaptcha" data-sitekey="6LefibAfAAAAACd4mJ4-65Rqm-pbGjn590-mdtjA" data-callback='onSubmit' data-action='submit'><i class='fa fa-sign-in'></i> Login </button> Add the script at the end of the page: <script> function onSubmit(token) { document.getElementById("MemberLogin").submit(); } </script> On the SUBMIT page to pull the score: //to check the code and set CAPTCHA if exists. if (isset($_POST['g-recaptcha-response'])) { $captcha = $_POST['g-recaptcha-response']; if($LMDebug == 'True') { echo "<hr>captcha POST: $captcha<br><br> LoginUserName: $LoginUserName<br> LoginPassword: $LoginPassword<br> <hr>"; } } else { $captcha = false; if($LMDebug == 'True'){ echo "<hr>captcha post = false.<hr>";} } $reCAPTCHA_secret_key = '6LcsRVoiAAAAAGOWGOz0pEtJBUH6xWanGGCNGh_q'; //construct the url to send your private Secret Key, token and (optionally) IP address of the form submitter to Google to get a spam rating for the submission (I've saved '$reCAPTCHA_secret_key' in config.php) $url = 'https://www.google.com/recaptcha/api/siteverify?secret=' . urlencode($reCAPTCHA_secret_key) . '&response=' . urlencode($captcha) . '&remoteip=' . urlencode($ip); //save the response, e.g. print_r($response) prints { "success": true, "challenge_ts": "2019-07-24T11:19:07Z", "hostname": "your-website-domain.co.uk", "score": 0.9, "action": "contactForm" } $response = file_get_contents($url); //decode the response, e.g. print_r($responseKeys) prints Array ( [success] => 1 [challenge_ts] => 2019-07-24T11:19:07Z [hostname] => your-website-domain.co.uk [score] => 0.9 [action] => contactForm ) $responseKeys = json_decode($response, true); $RSsuccess = $responseKeys["success"]; // 1 $RSaction = $responseKeys["action"]; // submit $RSscore = $responseKeys["score"]; // 0.9 $RSerrorcodes = $responseKeys["error-codes"];

Create the INPUT box, using different id (for script) and Name for passing value <div class='col-md-12 col-lg-12'> <input type='text' class='form-control' name='ProductItemIDToAttachPicTo' id='ProductItemIDToAttachPicToID' value='$PrintItemPrimaryID' > This attaches the images to the Product Item ID. Do NOT exceed max images that can be used. Leave empty for not attaching. Default Priority is 3. </div> Add the code after the foot scripts <script> $(document).ready(function($){ $('#ProductItemIDToAttachPicToID').autocomplete({ source:'autocomplete_ProductItemIDToAttachPicTo_search.php', minLength:2 }); }); </script>
Create the .php page that searches the database (referenced in the script tag) include_once($_SERVER['DOCUMENT_ROOT'] . "/admin/session.inc.php"); /* retrieve the search term that autocomplete sends */ $term = trim(strip_tags($_GET['term'])); //strtolower($term); $a_json = array(); $a_json_row = array(); if ($data = $mysqli -> query(" SELECT PrimaryID, MainTitle, SubTitle FROM product WHERE MainTitle LIKE '%$term%' OR SubTitle LIKE '%$term%' OR PrimaryID LIKE '%$term%' ORDER BY MainTitle ASC ")) { $CountedQueryRows = mysqli_num_rows($data); if($CountedQueryRows == 0) { $a_json_row['value'] = ""; $a_json_row['label'] = "Product Itemd does not exist."; array_push($a_json, $a_json_row); } while ($row = $data->fetch_array()) { $a_json_row["value"] = $row['PrimaryID']; //$a_json_row["userName"] = $row['userName']; //$a_json_row["firstName"] = $row['firstName']; //$a_json_row["lastName"] = $row['lastName']; $a_json_row["label"] = $row['MainTitle'].' ('.$row['PrimaryID'].' - '.$row['SubTitle'].')'; //$a_json_row["label"] = $row['PrimaryID']; array_push($a_json, $a_json_row); //Label = what you see in drop down, Value is what is inserted when clicking. } } // jQuery wants JSON data echo json_encode($a_json); flush(); //$mysqli -> close();

https://getdatepicker.com/5-4/Usage/ https://momentjscom.readthedocs.io/en/latest/moment/04-displaying/01-format/ https://www.php.net/manual/en/function.date.php also keep note of locale, [newLocale] Takes a string of any valid moment locale e.g. de for German. https://github.com/moment/moment/tree/develop/locale You must include moment-with-locales.js or a local js file. MAKE SURE YOU HAVE DOC READY FUNCTION TO NOT BREAK THE TIME DATE VERSION FIELDS in: footer_scripts_datetime.php file. header_scripts.php <link rel='stylesheet' href='/css/tempusdominus-bootstrap-4-5.39.0.css'> footer_scripts.php <script type='text/javascript' src='/js/jquery-3.5.1.js'></script> <script type='text/javascript' src='/js/moment-2.29.0.min.js'></script> <script type='text/javascript' src='/js/tempusdominus-bootstrap-4-5.39.0.js'></script> Input Boxes <div class='input-group date' id='datetimepicker7' data-target-input='nearest'> <label for='datetimepicker7' ><strong>datetimepicker7</strong></label> <input type='text' class='form-control datetimepicker-input' data-target='#datetimepicker7' name='datetimepicker7TEST' value='$datetimepicker7mysqldateForDisplay' /> <div class='input-group-append' data-target='#datetimepicker7' data-toggle='datetimepicker'> <div class='input-group-text'><i class='fa fa-calendar'></i></div> </div> </div> <div class='input-group date' id='datetimepicker8' data-target-input='nearest'> <label for='datetimepicker8' ><strong>datetimepicker8</strong></label> <input type='text' class='form-control datetimepicker-input' data-target='#datetimepicker8' name='datetimepicker8TEST' value='$datetimepicker8mysqldateForDisplay'/> <div class='input-group-append' data-target='#datetimepicker8' data-toggle='datetimepicker'> <div class='input-group-text'><i class='fa fa-calendar'></i></div> </div> </div> Script (After Footer_scripts section) <script type="text/javascript"> $(function () { $('#datetimepicker7').datetimepicker({ inline: false, sideBySide: true, calendarWeeks: true, //format: 'YYYY-MM-DD HH:mm' format: 'L LT' }); $('#datetimepicker8').datetimepicker({ useCurrent: false, inline: false, sideBySide: true, calendarWeeks: true }); $("#datetimepicker7").on("change.datetimepicker", function (e) { $('#datetimepicker8').datetimepicker('minDate', e.date); }); $("#datetimepicker8").on("change.datetimepicker", function (e) { $('#datetimepicker7').datetimepicker('maxDate', e.date); }); }); </script> Converting date strings passed //&datetimepicker7TEST=01%2F18%2F2022+1%3A42+AM //&datetimepicker8TEST=01%2F28%2F2022+1%3A43+AM $datetimepicker7 = $_GET["datetimepicker7TEST"] ?? $datetimepicker7 = ''; $datetimepicker8 = $_GET["datetimepicker8TEST"] ?? $datetimepicker8 = ''; //https://www.php.net/manual/en/function.date.php#refsect1-function.date-parameters //01/27/2022 2:09 AM = 'Month/Day/Year Hour:minute am/pm'; //$datetimepicker7mysqldate = date( 'Y/m/d H:i:s', $datetimepicker7 ); $timestampConverted7 = strtotime($datetimepicker7); $datetimepicker7mysqldate = date("Y-m-d H:i:s", $timestampConverted)7; $timestampConvertedForDisplay7 = strtotime($datetimepicker7mysqldate); $datetimepicker7mysqldateForDisplay = date("m/d/Y g:i a", $timestampConvertedForDisplay7); $timestampConverted8 = strtotime($datetimepicker8); $datetimepicker8mysqldate = date("Y-m-d H:i:s", $timestampConverted8); $timestampConvertedForDisplay8 = strtotime($datetimepicker8mysqldate); $datetimepicker8mysqldateForDisplay = date("m/d/Y g:i a", $timestampConvertedForDisplay8);