0

My site:

  • http://student.athabascau.ca/~coreyhe/homepage.html
  • Vistor inputs location and date
  • js file gets coordinates from geobytes.com and date from jquery-ui datepicker.
  • js file passes decimal coordinates and date to PHP file.
  • The PHP file queries tables and return activities and locations nearby
  • In the "Dark Sky Preserves" output section I have coded a button in the PHP file that has the coordinates as content

The Button:

  • When clicked I have the coordinates copied to computer clipboard, then a new tab opens to lightpollutionmap.info.
  • Once that website has loaded, the user is to paste to the input field and the site zooms to coordinates.
  • Purpose is to make it less tedious for user to find out light pollution in their area.
  • I used the onclick=gotoLPM() for invoking.
  • The gotoLPM() script is placed inside the <head> section.
  • I have utilized the jquery.copy-to-clipboard.js plug-in and it's in the <head> section as well.

The Problem:

  • I would like to invoke this button via external jquery file - to keep js separate.
  • Have tried putting the <script src=> in both <head> and <body> sections, but script would not execute.
  • The script should execute after the PHP file has output/rendered the button into its designated <p> element with rest of MySQL queries.
  • In short I would like to use a DOM event handler, not HTML like I have done.
  • I am thinking I may have to dynamically append a button with jquery after PHP output
  • Any suggestions?
  • Note: lightpollutionmap.info may be slow....

The PHP code:

echo "<h1>Dark Sky Preserves</h1>";

if (mysqli_num_rows($resultDarksky) > 0) {
    // Output of MySQL rows 
    while($row = mysqli_fetch_assoc($resultDarksky)) {
        echo $row["name"]. "<br>";
        echo "GPS coordinates: " . $row["latitude"] . ", " . $row["longitude"] . "<br/>";
        echo "Hectacres: " . $row["area"] . str_repeat('&nbsp;', 5) . " Bortle scale: " . $row["bortle"] ."<br/>";
        echo "<a href='".$row["link"]."' target='_blank'>". $row["link"] ."</a><br/>";
        echo $row["comment"]. "<br/>";
        echo "<br/>";

    // BUTTON for lightpollutionmap.info
    }
        echo "<br/>";
        echo "Check out the light pollution at your location. Click on your coordinates below and ";
        echo "then paste into the top-left input field in lightpollutionmap.info<br/>";
        echo "<button id='lightPollutionMapButton' onclick='gotoLPM()'>" .$q. "," .$r. "</button>";
        echo "<br/>";

}   // if no records match query - print 0 results
    // BUTTON for lightpollutionmap.info
    else {
        echo "No designated dark sky preserve nearby, but click on your coordinates below and ";
        echo "then paste into the top-left input field in ";
        echo "lightpollutionmap.info website for dark skies near you:<br/>";
        echo "<button id='lightPollutionMapButton' onclick='gotoLPM()'>" .$q. "," .$r. "</button>";
}

The script file (inside HTML <head> section):

function gotoLPM(){ $("#lightPollutionMapButton").CopyToClipboard(); window.open("https://www.lightpollutionmap.info", "_blank"); };

greasyHamster
  • 1
  • 2
  • PHP does not "inject" into HTML. It creates the HTML. See [here](https://stackoverflow.com/questions/13840429/what-is-the-difference-between-client-side-and-server-side-programming) – miken32 Jun 14 '19 at 21:57
  • I couldn’t tell on my phone; is the button and all the info added dynamically, or is it a new page from a form submission? If it’s from Ajax, it’s not in the dom, and you must search the document for it. For example, if you’re waiting for a click event, you have to: $(document).on(‘click’, ‘identifier’, function () { // do something }); I’m not sure how to reference it in your situation, but that’s probably what you’re up against. – Tim Morton Jun 15 '19 at 00:00

2 Answers2

0

You can use the javascript "defer" attribute to run delay your script reading the DOM. The script or events is not working because the script file is loading first and trying to read the DOM before the page load is complete. Here is how can do this

Move the 
<script src="filepath_to_your_js"></script>

from <head></head> section to the end of the body i.e right before the </body> tag. Also add the "defer" attribute to your script tag like below

<script src="filepath_to_your_js" defer></script>
Haseeb Afsar
  • 619
  • 5
  • 7
0

UPDATE:

  • The <script> 'defer' parameter did not work.
  • The 'injected' HTML into the <p id='astroStuff'> element was a PHP file located on a remote server via AJAX, so it was not in the DOM.
  • As per suggestion by Tim, I made an external file and put my code inside 'do something'.

$(document).on(‘click’, ‘identifier’, function () { // do something });

  • Script is working

Thanks to Tim for the tip!

greasyHamster
  • 1
  • 2