title: receiving and displaying html data via AJAX
body: <p><strong>** UPDATE **</strong></p>
  
  <p>I have the AJAX working (See below) but now the modal overlay won't close after it's been opened. Any thoughts why? (see the jsfiddle on the original post for the overlay JS)</p>
  
  <pre><code>  map.addMarker({
    lat: 34.5333,
    lng: 69.1333,
    title: 'Afghanistan',
    click: function(){
      if ($('#modal-shade').length == 0)
      var a = $(this).attr('title');
      var jqhxr = $.ajax( 'inc/parser.php?country='+a )
          .done(function(data) {  
              $('.modal').html(data);
              openOverlay('.modal');
              return false;
           });
        }
    });
  </code></pre>
  
  <p><strong>** ORIGINAL POST **</strong></p>
  
  <p>I'm using gmaps.js (<a href="http://hpneo.github.io/gmaps/" rel="nofollow">http://hpneo.github.io/gmaps/</a>) to show a map with several markers on different countries. I'm trying to get it set up so that when a user clicks on a specific marker, it hits up a PHP script (ie, script.php?country=USA), queries a database to populate a chunk of html with country specific data, and returns that country data to display in a modal (<a href="http://jsfiddle.net/istvanv/uQj7t/28/" rel="nofollow">http://jsfiddle.net/istvanv/uQj7t/28/</a>), all via AJAX. </p>
  
  <p>I'm not a javascript guy at all, and I'm not sure how I can go about making this work dynamically, without having the code for each modal individually on the page, making the page size huge. Here's what I'm doing:</p>
  
  <pre><code>map.addmarker({
      lat: 0.0000,
      lng: 0.0000,
      title: USA,
      click: function(e){
      $.ajax({
          url: 'inc/parser.php?country=USA',
          type: 'GET',
          data: 'USA',
          });
      openOverlay('.USA').html(data);
      preventDefault();
      }
  });
  
  // more map markers here
  </code></pre>
  
  <p>parser.php is just a php/mysql query grabbing the country data based on the passed variable and filling out a template - this part works fine when I hit the page with a country variable:</p>
  
  <pre><code>if(isset($_GET['country']) &amp;&amp; !empty($_GET['country'])) {
      $country = $_GET['country'];
  
  //connection stuff here
  
  $results = $mysqli-&gt;query("SELECT * FROM table WHERE country = '". $country ."' LIMIT 1");
  
  while($row = $results-&gt;fetch_object()) {
      echo 'Population: '. $row-&gt;population .' people
            etc
            etc
            etc';
      }
  }
  $mysqli-&gt;close();
  </code></pre>
  
  <p>I know it's likely hideous and laughable but I've been hacking away at it and it's a complete hatchet job now. Can someone give me hand with that AJAX?</p>