How can i make ajax call via anchor tag in information window?

[leonguyen0202]

Hi,
First of all, i would like to say thanks for this awesome package, cuz I can work with map easier in laravel. I have been working with this package not too long and I have been stuck with this issue for 2 days.

My issue

I would like to have an ajax call via anchor tag in info window

My controller

Mapper::marker(
     $site[$i]->latitude,
     $site[$i]->longitude,
     $this->render_content(Auth::user(), $site, $i),
);

private function render_content($user, $site, $i)
{
  $uuid = Uuid::generate(4);
  $content = [
     'content' => $site[$i]->title . '<br/>
         <div class="map-parent">
           <input type="hidden" class="map" id="' . $uuid . '" name="map" value="' . $i . '">
         </div>
         <a href="?q='.$uuid.'" class="btn btn-link map-join">Join</a>
         <a href="?q='.$uuid.'" class="btn btn-link map-details">Details</a>',
     'animation' => 'DROP',
     'icon' => 'https://maps.google.com/mapfiles/ms/icons/red-dot.png',
  ];
}

My javascript file

$(document).on('click', '.map-join', function (e) {
    e.preventDefault();

    var parentElement = $(this).parent('.map-parent');

    var id = $(parentElement).find('.map').val();

    Swal.fire({
        type: 'error',
        title: "Sweet alert fire",
        showConfirmButton: false,
        timer: 1000
    })
})

Expected behaviour

Sweet alert fires so that i can move forward with later $.ajax()

Actual behaviour

page reload with ?q=$uuid append

Step has added

$content = [
   'content' => $site[$i]->title . '<br/>
         <div class="map-parent">
         <input type="hidden" id="' . $uuid . '" name="map" value="' . $i . '">
         </div>
         <a href="?q='.$uuid.'" class="btn btn-link map-join">Join</a>
         <a href="?q='.$uuid.'" class="btn btn-link map-details">Details</a>',
   'animation' => 'DROP',
   'icon' => 'https://maps.google.com/mapfiles/ms/icons/red-dot.png',
   'eventAfterLoad' => 'console.log("after load");'
];

Also have added

Mapper::marker(
     $site[$i]->latitude,
     $site[$i]->longitude,
     $this->render_content(Auth::user(), $site, $i),
     [
          'eventAfterLoad' => 'console.log("after load");'
     ]
);

Extra info
I use Query Builder for getting result of $site

Thank you for reading and please help me ! I am very appreciated any comment that can help me.

[bradcornford]

Hi there,

I assume you have jQuery loaded in the page, and that your script tag is after the map render.

I had luck with the following:

$uuid = Uuid::generate(4);
$content = $site[$i]->title . '<br/>
         <a href="#' class="btn btn-link map-join" data-uuid="' . $uuid . '">Join</a>
         <a href="#" class="btn btn-link map-details" data-uuid="' . $uuid . '">Details</a>';

Mapper::marker(
     $site[$i]->latitude,
     $site[$i]->longitude,
     $content,
     [
          'animation' => 'DROP',
          'icon' => 'https://maps.google.com/mapfiles/ms/icons/red-dot.png'
     ]
);

$(document).on('click', '.map-join', function (e) {
    e.preventDefault();

    var id = $(this).attr('data-uuid');

    alert(id);
});