SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Member
    Join Date
    Jun 2014
    Location
    Ottawa, Canada
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    retrieving mysqli results via AJAX

    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?

    Code:
    // 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. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by robotsmeller View Post
    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?
    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:

    Code javascript:
    var jqxhr = $.ajax( "example.php" )
        .done(function() {
            alert( "success" );
        })
        .fail(function() {
            alert( "error" );
        })
        .always(function() {
            alert( "complete" );
        });
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Jun 2014
    Location
    Ottawa, Canada
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code:
      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. #4
    SitePoint Member
    Join Date
    Jun 2014
    Location
    Ottawa, Canada
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

    Code:
      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. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by robotsmeller View Post
    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?
    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?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Member
    Join Date
    Jun 2014
    Location
    Ottawa, Canada
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, still correct.

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by robotsmeller View Post
    Yes, still correct.
    In that case, can you link us to a web page where we can experience the trouble?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Member
    Join Date
    Jun 2014
    Location
    Ottawa, Canada
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #9
    SitePoint Member
    Join Date
    Jun 2014
    Location
    Ottawa, Canada
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    In that case, can you link us to a web page where we can experience the trouble?
    Sure thing. I've put it here temporarily. Thanks again.

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by robotsmeller View Post
    Sure thing. I've put it here temporarily. Thanks again.
    Here is where the problem is occurring.

    Code:
    $('#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.

    Code javascript:
    $(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
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #11
    SitePoint Member
    Join Date
    Jun 2014
    Location
    Ottawa, Canada
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ahhhh I see! Excellent, thanks so much. I'll look into events further. I appreciate your time and help!


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •