0

I have three Javascript functions:

Function 1) Load a google map and markers for it from an XML file and pass them to function 2.

Function 2) Create markers on the map using the data from function 1.

Function 3) Load users who are connected to the marker/event, using a request to the database with Ajax.

I call function 3 from within function 2 like this, to get the string function 3 produces:

var memberslist = showEventMembers(MapTitle)

but when I reference the string the string undefinedis only printed out to the HTML. I don't understand why the value from function 3 is not passed to var memberlist in function 2.

Function 3 returns a string of the users, I have confirmed this by using document.getElementById("event_members").innerHTML = this.responseText;, and it changes the text of a div object I placed outside of script tags. It can however not change the html-text of the span tag that I generate within function 2.

So what I need is to pass the returned value of function 3 to the script generated HTML tags within function 2, but I cant get it to work with either replacing the HTML, or by passing a value to a variable and use that variable in the generated HTML.

Hope my question is clear enough, English isn't my first language, any help is really appreciated!

(I use jQuery and Laravel if it's of any importance, the PHP is in a Laravel "controller").

Function1 / Load map and marker data:

$(document).ready(function() {
  var mapCenter = new google.maps.LatLng(47.6145, -122.3418); //Google map Coordinates


  map_initialize(); // initialize google map

  function map_initialize() {
    var googleMapOptions = {
      center: mapCenter, // map center
      zoom: 17, //zoom level, 0 = earth view to higher value
      panControl: true, //enable pan Control
      zoomControl: true, //enable zoom control
      zoomControlOptions: {
        style: google.maps.ZoomControlStyle.SMALL //zoom control size
      },
      scaleControl: true, // enable scale control
      mapTypeId: google.maps.MapTypeId.ROADMAP // google map type
    };

    map = new google.maps.Map(document.getElementById("map"), googleMapOptions);

    //var map = new google.maps.Map(document.getElementById('map'), {
    //    zoom: 4,
    //    center: {lat: -25.363882, lng: 131.044922 }
    //});     

    //Load Markers from the XML File, Check (/laravel/stumbler/stumbler/public/phppages/map_process.php)
    $.get("/laravel/stumbler/stumbler/markerxml", function(data) {
      $(data).find("marker").each(function() {
        //Get user input values for the marker from the form
        var author = $(this).attr('author');
        var name = $(this).attr('name');
        var address = '<p>' + $(this).attr('address') + '</p>';
        var type = $(this).attr('type');
        var point = new google.maps.LatLng(parseFloat($(this).attr('lat')), parseFloat($(this).attr('lng')));

        //call create_marker() function for xml loaded maker
        create_marker(author, point, name, address, false, false, false, "/laravel/stumbler/stumbler/public/images/icons/pin_blue.png");
      });
    });

    //drop a new marker on right click
    google.maps.event.addListener(map, 'rightclick', function(event) {
      //Edit form to be displayed with new marker
      var EditForm = '<p><div class="marker-edit">' +
        '</div></p>';

      //call create_marker() function
      create_marker('', event.latLng, 'Exiting event!', 'Log in or Sign up to create an event here :)', true, true, true, "/laravel/stumbler/stumbler/public/images/icons/pin_green.png");
    });
  }
});

Function 2 / Create markers and put on the map

function create_marker(MapAuth, MapPos, MapTitle, MapDesc, InfoOpenDefault, DragAble, Removable, iconPath) {
  //new marker
  var marker = new google.maps.Marker({
    position: MapPos,
    map: map,
    draggable: DragAble,
    animation: google.maps.Animation.DROP,
    title: "Hello World!",
    icon: iconPath
  });
  showEventMembers(MapTitle);
  var memberslist = showEventMembers(MapTitle);

  //Content structure of info Window for the Markers
  var contentString = $('<div class="marker-info-win">' +
    '<div class="marker-inner-win"><span class="info-content">' +
    '<h1 class="marker-heading">' + MapTitle + '</h1>' +
    MapDesc + '<p><strong>Creator: </strong>' + MapAuth + '</p>' +
    '</span>' +
    'Event members: ' + '<span id="event_members">This text is not being replaced</span><br>' +
    memberslist + //this returns the string "undefined"
    '<p><br>Sign up or Log in to join this event!</p>' +
    '</div></div>');


  //Create an infoWindow
  var infowindow = new google.maps.InfoWindow();
  //set the content of infoWindow
  infowindow.setContent(contentString[0]);

  // add click listener for the marker       
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map, marker); // click on marker opens info window 
  });


  if (InfoOpenDefault) //whether info window should be open by default
  {
    infowindow.open(map, marker);
  }
}

Function 3 / Load users who are connected to the event

function showEventMembers(str) {

  if (str == "") {
    document.getElementById("event_members").innerHTML = "";
    return;
  } else {
    if (window.XMLHttpRequest) {
      // code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp = new XMLHttpRequest();
    } else {
      // code for IE6, IE5
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange = function() {

      if (this.readyState == 4 && this.status == 200) {
        document.getElementById("event_members").innerHTML = this.responseText;
        return this.responseText;
      }
    };
    xmlhttp.open("GET", "/laravel/stumbler/stumbler/get_event_members/" + str);
    xmlhttp.send();
  }
}

The PHP (That returns the users and marker connections)

public function get_event_members($eventname){
$signed_up_users = DB::table('users_to_events')->where('event_name', '=', $eventname)->get();

$userlist ="";

foreach ($signed_up_users as $signed_up_user)
{
    $userlist .= $signed_up_user->username.'<br>';
}
exit($userlist);}
t.niese
  • 39,256
  • 9
  • 74
  • 101
snubbus
  • 387
  • 1
  • 2
  • 8
  • 2
    Please have a read of [mcve] Far too much code here and no clear pointer to where you have the issue. Did you look in the console for errors too? – mplungjan Nov 20 '16 at 10:03
  • Why would you use `exit()` instead of `echo`? Laravel is perfectly capable of sending a JSON response which would be mir suitable for further usage with JS – mazedlx Nov 20 '16 at 10:07
  • 1
    In the `onreadystatechange` of your `showEventMembers` function you have `return this.responseText;`. This `return` statement belongs the callback function and not to `showEventMembers`. Beside that your request is async, so at the time the `showEventMembers` is left, the request will still be in progress. See the linked duplicate for more details. – t.niese Nov 20 '16 at 10:09
  • thanks for the comments, I've read the answers on the other question but find it hard to apply to my code, maybe I'm to new to understand.. Anyways, I've solved the issue by replacing the HTML of a static HTML tag instead. – snubbus Nov 21 '16 at 05:01

0 Answers0