{"id":60350,"date":"2023-08-11T03:01:22","date_gmt":"2023-08-10T17:01:22","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=60350"},"modified":"2023-08-09T11:34:35","modified_gmt":"2023-08-09T01:34:35","slug":"drag-and-drop-via-hotlinked-javascript-global-variable-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/drag-and-drop-via-hotlinked-javascript-global-variable-tutorial\/","title":{"rendered":"Drag and Drop via Hotlinked Javascript Global Variable Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/draganddrop_hotwiring.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Drag and Drop via Hotlinked Javascript Global Variable Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/drag_and_drop_hotwiring_external_javascript_fix.jpg\" title=\"Drag and Drop via Hotlinked Javascript Global Variable Tutorial\" style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Drag and Drop via Hotlinked Javascript Global Variable Tutorial<\/p><\/div>\n<p>The recent <a title='Drag and Drop via Hotlinked External Javascript Tutorial' href='#ddhejt'>Drag and Drop via Hotlinked External Javascript Tutorial<\/a> had an annoyance, whereby, regarding its modus operandi of &#8230;<\/p>\n<blockquote cite='\/\/www.rjmprogramming.com.au\/ITblog\/drag-and-drop-via-hotlinked-external-javascript-tutorial\/'>\n<ul>\n<li>write their own HTML (and derived Javascript) via a textarea element with initial template HTML code<\/li>\n<li>construct a personalized HTML webpage after the light green submit button press &#8230; so that &#8230;<\/li>\n<li>downloading the HTML is possible via &#8220;View Page Source&#8221; (context option) and Copy\/Paste into a text editor <font size=1>(and then, perhaps, onto local system web server environment development via an Apache\/PHP\/MySql local web server product such as <a target=_blank title='MAMP' href='http:\/\/www.mamp.info'>MAMP<\/a>)<\/font><\/li>\n<\/ul>\n<\/blockquote>\n<p> &#8230; in its <i>middle phase<\/i> that if you &#8230;<\/p>\n<ul>\n<li>clicked into that <i>middle phase<\/i>&#8216;s HTML textarea element &#8230; the logic was the same as the &#8230;<\/li>\n<li>external Javascript&#8217;s &#8230;<br \/>\n<table border=1 style='font-size:8px;'>\n<tr>\n<td>\n<code style='font-size:8px;'><br \/>\n<br \/>\n    parent.document.getElementById('textareaaction').click();<br \/>\n<br \/>\n<\/code>\n<\/td>\n<td>\n<code style='font-size:8px;'><br \/>\n  <font color=blue>function doit(what) {<br \/>\n    if (viaej) { eval(what); }<br \/>\n  }<\/font><br \/>\n<\/code>\n<\/td>\n<\/tr>\n<\/table>\n<\/li>\n<\/ul>\n<p> &#8230; but we really only want that HTML textarea element (id=&#8217;textareaaction&#8217;) <font color=blue><i>onclick<\/i> logic<\/font> &#8230;<\/p>\n<p><code><br \/>\n&lt;textarea style=background-color:silver; ontouchdown='<font color=purple>viaej=false;<\/font> event.stopPropagation();' onmousedown='<font color=purple>viaej=false;<\/font> event.stopPropagation();' onclick=<font color=blue>doit(this.value);<\/font> data-onblur=doit(this.value); rows=5 cols=80 placeholder='Please place your drop action to do Javascript here below ...' id=textareaaction&gt;<br \/>\n  alert('You just dropped off');<br \/>\n&lt;\/textarea&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; to happen in the second scenario, but not the first <font size=1>(which is really just a mechanism to give the textarea element the webpage focus)<\/font>.  How can we differentiate?  Well, there are probably a lot of ways, but our preferred way is to involve a new global var<font size=1>iable<\/font> &#8230;<\/p>\n<p><code><br \/>\n  <font color=purple>var viaej=false;<\/font><br \/>\n<\/code><\/p>\n<p> &#8230; which our external Javascript can reference, usefully, <font color=purple>via code like<\/font> &#8230;<\/p>\n<p><code><br \/>\n<br \/> <br \/>\n function dolaterwo() {<br \/>\n   window.opener.viaej=false;<br \/>\n }<br \/>\n <br \/>\n <font color=purple>function dolaternonwo() {<br \/>\n   parent.viaej=false;<br \/>\n }<\/font><br \/>\n <br \/>\n    <font color=purple>if (typeof(parent.viaej) !== 'undefined') {<br \/>\n      parent.viaej=true;<br \/>\n    } <\/font><br \/>\n    parent.document.getElementById('textareaaction').click();<br \/>\n    <font color=purple>if (typeof(parent.viaej) !== 'undefined') {<br \/>\n      setTimeout(dolaternonwo, 3000); \/\/parent.viaej=false;<br \/>\n    }<\/font><br \/>\n<\/code><\/p>\n<p> &#8230; so that an onclick event&#8217;s click or touch into the textarea element equates to global var<font size=1>iable<\/font> viaej having value <i>false<\/i> (because onmousedown or ontouchdown (<font size=5>yayyyy!!!<\/font>) events precede <i>onclick<\/i> event) and for the external Javascript <i>parent.document.getElementById(&#8216;textareaaction&#8217;).click()<\/i> call equates to a timing where global var<font size=1>iable<\/font> viaej having value <i>true<\/i> (and the function doit&#8217;s eval logic is executed).<\/p>\n<p>In order to fix this issue <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.js------GETME\">we made changes<\/a> to our external Javascript <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.js------GETME\">countries.js<\/a> &#8220;Drag and Drop specialist&#8221; use by <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/draganddrop_hotwiring.php-GETME\">our changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/draganddrop_hotwiring.php-GETME\">&#8220;second draft proof of concept&#8221;<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/draganddrop_hotwiring.php\">PHP draganddrop_hotwiring.php web application<\/a> you can <a href='#myifdd'>try below<\/a>.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/drag-and-drop-via-hotlinked-javascript Global-variable-tutorial\/'>Drag and Drop via Hotlinked Javascript Global Variable Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ddhejt'>Previous relevant <a target=_blank title='Drag and Drop via Hotlinked External Javascript Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/drag-and-drop-via-hotlinked-external-javascript-tutorial\/'>Drag and Drop via Hotlinked External Javascript Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/draganddrop_hotwiring.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Drag and Drop via Hotlinked External Javascript Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/drag_and_drop_hotwiring_external_javascript.gif\" title=\"Drag and Drop via Hotlinked External Javascript Tutorial\" style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Drag and Drop via Hotlinked External Javascript Tutorial<\/p><\/div>\n<p>There are three very useful <a target=_blank title='Inline linking information from Wikipedia ... thanks'  href='https:\/\/en.wikipedia.org\/wiki\/Inline_linking'>&#8220;hotwiring&#8221;<\/a> ideas that usually work with your web applications &#8230;<\/p>\n<ul>\n<li>via absolute image URLs<\/li>\n<li>via absolute stylesheet URLs<\/li>\n<li>via absolute <font size=1>external<\/font> Javascript URLs<\/li>\n<\/ul>\n<p> &#8230; and that last one is what we want to hone in regarding, with an idea we had to allow a user to &#8230;<\/p>\n<ul>\n<li>write their own HTML (and derived Javascript) via a textarea element with initial template HTML code<\/li>\n<li>construct a personalized HTML webpage after the light green submit button press &#8230; so that &#8230;<\/li>\n<li>downloading the HTML is possible via &#8220;View Page Source&#8221; (context option) and Copy\/Paste into a text editor <font size=1>(and then, perhaps, onto local system web server environment development via an Apache\/PHP\/MySql local web server product such as <a target=_blank title='MAMP' href='http:\/\/www.mamp.info'>MAMP<\/a>)<\/font><\/li>\n<\/ul>\n<p>In order to allow this more generic approach <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.js-----GETME\">we made changes<\/a> to our external Javascript <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.js-----GETME\">countries.js<\/a> &#8220;Drag and Drop specialist&#8221; use by our <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/draganddrop_hotwiring.php_GETME\">&#8220;first draft proof of concept&#8221;<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/draganddrop_hotwiring.php\">PHP draganddrop_hotwiring.php web application<\/a> you can try below <font size=1>(where a context option like &#8220;View Frame Source&#8221; might more be the go regarding downloading your HTML invention)<\/font> &#8230;<\/p>\n<p><iframe id=myifdd src=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/draganddrop_hotwiring.php?rand=7658765\" style=\"width:100%;height:800px;\"><\/iframe><\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d60328' onclick='var dv=document.getElementById(\"d60328\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/external-javascript\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d60328' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d60350' onclick='var dv=document.getElementById(\"d60350\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/global-variable\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d60350' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>The recent Drag and Drop via Hotlinked External Javascript Tutorial had an annoyance, whereby, regarding its modus operandi of &#8230; write their own HTML (and derived Javascript) via a textarea element with initial template HTML code construct a personalized HTML &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/drag-and-drop-via-hotlinked-javascript-global-variable-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,37],"tags":[2824,52,2525,360,2237,364,4385,409,452,2537,1839,1664,3081,4430,4431,576,587,652,714,744,861,1919,3267,2411,932,997,1105,1262,1319,1345,1891,1721,1418],"class_list":["post-60350","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-absolute","tag-absolute-url","tag-child","tag-download","tag-drag","tag-drag-and-drop","tag-drop","tag-external-javascript","tag-form","tag-generic","tag-genericization","tag-global","tag-global-variable","tag-hotwire","tag-hotwiring","tag-html","tag-iframe","tag-javascript","tag-local-web-server","tag-mamp","tag-onclick","tag-onmousedown","tag-ontouchdown","tag-parent","tag-php","tag-programming","tag-script","tag-textarea","tag-tutorial","tag-url","tag-user","tag-variable","tag-webpage"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/60350"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=60350"}],"version-history":[{"count":13,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/60350\/revisions"}],"predecessor-version":[{"id":60363,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/60350\/revisions\/60363"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=60350"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=60350"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=60350"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}