Retrieving mysqli results via AJAX

JavaScript
1

Hi all! I’m hoping someone here can help me out with this issue that’s been vexing me.

I’ve got a Google map with markers (using gmaps.js) that, when clicked, hit a PHP script, query a database and returns info in a modal window - ideally, anyway. It works standalone (ie, with the country data hardcoded for each marker) but when I try to hook up the AJAX and do it all dynamically, the modal comes up empty, giving me a “TypeError: openOverlay(…) is undefined” error in the console.

When I hit the PHP query script manually, it works flawlessly so I can’t figure out what’s going wrong with the JS part. Can anyone tell me why this isn’t jiving?


// modal
function openOverlay(olEl) {
        $oLay = $(olEl);

        if ($('#modal-shade').length == 0)
            $('body').prepend('<div id="modal-shade"></div>');

        $('#modal-shade').fadeTo(300, 0.6, function() {
            var props = {
                oLayWidth       : $oLay.width(),
                scrTop          : $(window).scrollTop(),
                viewPortWidth   : $(window).width()
            };

            var leftPos = (props.viewPortWidth - props.oLayWidth) / 2;

            $oLay
                .css({
                    display : 'block',
                    opacity : 0,
                    top : '-=300',
                    left : leftPos+'px'
                })
                .animate({
                    top : props.scrTop + 40,
                    opacity : 1
                }, 500);
        });
    }

    function closeOverlay() {
        $('.modal').animate({
            top : '-=300',
            opacity : 0
        }, 400, function() {
            $('#modal-shade').fadeOut(300);
            $(this).css('display','none');
        });
    }

    $('#modal-shade, .modal a').on('click', function(e) {
        closeOverlay();
        if ($(this).attr('href') == '#') e.preventDefault();
    });


// interactive map
var map;
$(document).ready(function(){
	map = new GMaps({
	el: '#map',
	lat: 13.2133,
	lng: 18.3381,
	zoom: 3,
	scrollwheel: false,
	zoomControl: false,
	streetViewControl: false,
	mapTypeControl: false,
	overviewMapControl: false
  });

  map.addMarker({
  lat: 34.5333,
  lng: 69.1333,
  title: 'Afghanistan',
  click: function(e){
		var a= $(this).attr("title");
        $.ajax({
            url: 'inc/parser.php?country='+a,
            type: 'POST',
            data: a,
            });
        openOverlay('.modal').html(data);   // This is where I'm getting the error
        preventDefault(e);
  }
});
2

After the ajax command, it seems that you’re opening the overlay with no data.
You’re supposed to give the ajax command a success function, so that the retrieved data can be passed to it.

This can be done by using the .done() method that jQuery provides. For example:


var jqxhr = $.ajax( "example.php" )
    .done(function() {
        alert( "success" );
    })
    .fail(function() {
        alert( "error" );
    })
    .always(function() {
        alert( "complete" );
    });
3

Hi Paul, thanks for that. I had tried using .done before with no luck. I gave it another whirl and no matter what I do, I keep getting the openOverlay undefined error.

  map.addMarker({
  lat: 34.5333,
  lng: 69.1333,
  title: 'Afghanistan',
  click: function(e){
		var a= $(this).attr("title");
	  	var jqhxr = $.ajax( "inc/parser.php?country="+a )
			.done(function() { 
				openOverlay('.modal').html(data);
				preventDefault(e);
			})		
	  }
});

Am I still coming at this wrong?

4

After a little more google fu, I have the code firing up as intended, but now the closeOverlay function isn’t closing the modal after it is populated and open (overlay code provided in the first post). I’m just having all sorts of bad luck.

Any thoughts on why it’s not allowing the modal to close?

  map.addMarker({
  lat: 34.5333,
  lng: 69.1333,
  title: 'Afghanistan',
  click: function(){
    var a = $(this).attr('title');
    var jqhxr = $.ajax( 'inc/parser.php?country='+a )
    .done(function(data) {
      $('.modal').html(data);
      openOverlay('.modal');
      return false;
      });
    });
  }
});
5

From what I see in the code that you posted, the closeModel method is active on elements that match the following selectors: ‘#modal-shade, .modal a’
Are those selectors still correct?

6

Yes, still correct.

7

In that case, can you link us to a web page where we can experience the trouble?

8

It’s on a dev server but I’ll try to get it on a temp live site tomorrow AM. I really appreciate your willingness to help. Cheers!

9

Sure thing. I’ve put it here temporarily. Thanks again.

10

Here is where the problem is occurring.

$('#modal-shade, .modal a').on('click', function (e) {

The reason why the close button isn’t triggering the function is because it didn’t exist when the above code was run.

You can get around that by attaching the event to the document, and give that event the selectors to keep a watch for.


$(document).on('click', '#modal-shade, .modal a', function (e) {

This way, when jQuery adds the content to the page, it will also be able to keep a watch for those selectors and attach the event to them.
Further details about delegated events (or live events) can be found at http://api.jquery.com/on/#direct-and-delegated-events

11

Ahhhh I see! Excellent, thanks so much. I’ll look into events further. I appreciate your time and help!