Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: AJAX nie ładuje za pierwszym kliknięciem
Forum PHP.pl > Forum > XML, AJAX
tjakob
Witam i zwracam się z prośbą pomoc w rozwiązaniu takiego oto problemu. Używam plugin Q-Tip i chcę załadować dynamicznie kod PHP do Qtip-a. Oto mój kod:

  1. $(document).ready(function(){
  2. $('.mapa').qtip({
  3. show: 'click',
  4. hide: 'click',
  5. content:{
  6.  
  7. text: function(event, api) {
  8. $.ajax({
  9. url: '/google_maps/mapa.php'
  10. })
  11. .then(function(content) {
  12. api.elements.tooltip.html(content);
  13. }, function(xhr, status, error) {
  14. api.set('content.text', status + ': ' + error);
  15. });
  16. return 'Loading...';
  17.  
  18. },
  19. },
  20. position: {
  21. my: 'top right',
  22. at: 'top center',
  23. viewport: $(window)
  24. },
  25. style: {
  26. classes: 'qtip-blue',
  27.  
  28. }
  29. });
  30. });


Klikam link z id = 'mapa', aby załadować Q-Tip z kodem PHP. Pierwsze kliknięcie nie ładuje kodu, zaś drugie i kolejne kliknięcia Q-Tip działa OK. Jeśli odświeżę stronę, znowu pierwsze nie działa, następne wszystko OK. Czy ktoś może mi pomóc? Błąd popełniam w zapytaniu AJAX? Czy gdzie indziej? Bardzo dziękuję za wszelką pomoc.
Pyton_000
a co na to konsola przeglądarki ?
tjakob
Konsola przy pierwszym naciśnięciu wyrzuca
  1. ReferenceError: google is not defined
  2.  
  3.  
  4. geocoder = new google.maps.Geocoder();
  5.  
  6.  

czyli odnosi się do skryptu, który ma się załadować w Qtip, przy następnym naciśnięciu już błędu nie ma i jest OK.
To jest ten skrypt pobrany z google maps API
  1. <script type='text/javascript'>
  2.  
  3. //This javascript will load when the page loads.
  4. jQuery(document).ready( function($){
  5.  
  6. //Initialize the Google Maps
  7. var geocoder;
  8. var map;
  9.  
  10. var markersArray = [];
  11. var infos = [];
  12.  
  13. geocoder = new google.maps.Geocoder();
  14. var myOptions = {
  15.  
  16. zoomControl: false,
  17. scaleControl: false,
  18. disableDefaultUI: true,
  19. // mapTypeId: google.maps.MapTypeId.ROADMAP
  20. }
  21. //Load the Map into the map_canvas div
  22. var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  23. google.maps.event.addDomListener(window, 'load', function () {
  24. map.setZoom(0);
  25. });
  26.  
  27. //Initialize a variable that the auto-size the map to whatever you are plotting
  28. var bounds = new google.maps.LatLngBounds();
  29.  
  30. //Initialize the encoded string
  31. var encodedString;
  32. //Initialize the array that will hold the contents of the split string
  33. var stringArray = [];
  34. //Get the value of the encoded string from the hidden input
  35. encodedString = document.getElementById("encodedString").value;
  36. //Split the encoded string into an array the separates each location
  37. stringArray = encodedString.split("****");
  38.  
  39. var x;
  40. for (x = 0; x < stringArray.length; x = x + 1)
  41. {
  42. var addressDetails = [];
  43. var marker;
  44. //Separate each field
  45. addressDetails = stringArray[x].split("&&&");
  46. //Load the lat, long data
  47. var lat = new google.maps.LatLng(addressDetails[1], addressDetails[2]);
  48. //Create a new marker and info window
  49. var image = '/google_maps/icons/pin.png';
  50. marker = new google.maps.Marker({
  51. map: map,
  52. position: lat,
  53. icon: image,
  54. //Content is what will show up in the info window
  55. content: addressDetails[0]
  56. });
  57. //Pushing the markers into an array so that its easier to manage them
  58. markersArray.push(marker);
  59. google.maps.event.addListener( marker, 'click', function () {
  60. closeInfos();
  61. var info = new google.maps.InfoWindow({content: this.content});
  62. //On click the map will load the info window
  63. info.open(map,this);
  64. infos[0]=info;
  65. });
  66. //Extends the boundaries of the map to include this new location
  67. bounds.extend(lat);
  68. }
  69. //Takes all the lat, longs in the bounds variable and autosizes the map
  70. map.fitBounds(bounds);
  71.  
  72. //Manages the info windows
  73. function closeInfos(){
  74. if(infos.length > 0){
  75. infos[0].set("marker",null);
  76. infos[0].close();
  77. infos.length = 0;
  78. }
  79. }
  80.  
  81. });
  82. </script>


ale teraz to już wogóle O.o
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2024 Invision Power Services, Inc.