Как удалить строки в базе данных MySQL с помощью маркеров Leaflet? - PullRequest
Новая
       5

Как удалить строки в базе данных MySQL с помощью маркеров Leaflet?

0 голосов
/ 13 июля 2020

Я пытаюсь глубже изучить Leaflet + MySQL Connection, но начинаю терять обзор. У меня есть база данных geomarkers с несколькими маркерами, в которых хранятся разные атрибуты. Я хочу применить функциональность для пользователя, чтобы удалить маркеры, которые не представляют интереса, нажав кнопку «удалить» во всплывающем окне маркера. Но здесь все усложняется. Как я могу получить индивидуальный идентификатор (из базы данных) для выбранного маркера (нажмите «Удалить» в PopUp) и как передать это команде PHP, чтобы эта точка была удалена из базы данных? Я использовал метод $_Post для загрузки данных, но в данном случае он не работает. 

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css"/>
    <link rel="stylesheet" href="http://leaflet.github.io/Leaflet.draw/leaflet.draw.css"/>
    <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Norican">
</head>



<body>

    <div id="map" >
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <!--<script type="text/javascript" src="assets/bootstrap/js/bootstrap.min.js"></script>-->
        <script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script>
        <script src="http://leaflet.github.io/Leaflet.draw/leaflet.draw.js"></script>

        <script>

            $(document).ready(function() {
            getUsers();
            });


            var map = L.map('map').setView([47.000,-120.554],13);
            mapLink =
            '<a href="http://openstreetmap.org">OpenStreetMap</a>';
            L.tileLayer(
            'https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
            attribution: 'Map data: &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: &copy; <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)',
            maxZoom: 18,
            }).addTo(map);
    
            var greenIcon = L.icon({
            iconUrl: 'http://leafletjs.com/examples/custom-icons/leaf-green.png',
            iconSize:     [30, 38], // size of the icon
            });
    
            
            function getUsers() {
                $.getJSON("getData.php", function (data) {
                for (var i = 0; i < data.length; i++) {
                var location    = new L.LatLng(data[i].lat, data[i].lng);
                var id          = data[i].id;
                var species     = data[i].species;
                var diameter    = data[i].average_diameter;
                var quality     = data[i].quality;
                var damage      = data[i].damage;
                var notes       = data[i].additional_information;

                var marker      = L.marker([data[i].lat, data[i].lng], {icon: greenIcon}).addTo(map);
                                    marker.bindPopup(id + "<br>" + species + "<br>" + diameter + "<br>" + quality + "<br>" + damage + "<br>" + notes + "<br>" + "<br>" +
                                    '<input type="submit" id = "delete" name="action" data-value = " + id + " value="Delete" method = "post"/>');
                                    
                            
                                    
                        }
                    })
                }       
                
        </script>
   </div>


    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>    
<script type="text/javascript">
    $(function(){
        $('#delete').click(function(d){
            
        var id = document.getElementById("delete").getAttribute("data-value");

            $.ajax({
                type: 'POST',
                url: 'delete.php',
                data: {id:id}
                success: function(data) {
                    alert(data);
                }
                error: function(data){
                        alert('Something went wrong while deleting.');}
        });
    });
});
</script>




    
</script>
    
</body>
</html>

getData. php

<?php   
    $connect = mysqli_connect("localhost", "root", "", "useraccounts");  
    $sql = "SELECT * FROM geomarker";  
    $result = mysqli_query($connect, $sql);  
    $json_array = array();  
        while($data = mysqli_fetch_assoc($result))  
            {  
        $json_array[] = $data;  
            }  

       echo json_encode($json_array);  
?>

delete. php

<?php   

if(isset($_POST)){

    $id                 = $_POST['id'];

    $connect = mysqli_connect("localhost", "root", "", "useraccounts");  
    $sql = "DELETE FROM geomarker WHERE id = ($id)";  
    $result = mysqli_query($connect, $sql);  
    if($result){
            echo 'Data successfully deleted.';
        }else{
            echo 'There were erros while deleting the data.';
        }
    
}
?>

Ответы [ 3 ]

1 голос
/ 14 июля 2020

@ DrSnuggles Таким образом, вы можете перейти к функции удаления во всплывающем окне 

marker.on('popupopen', function(e) {
  // your delete function
});

Пример обновления 

let config = {
  minZoom: 7,
  maxZomm: 18,
};
const zoom = 16;
const lat = 52.2297700;
const lon = 21.0117800;

let points = [
  [52.230020586193795, 21.01083755493164, 'point 1'],
  [52.22924516170657, 21.011320352554325, 'point 2'],
  [52.229511304688444, 21.01270973682404, 'point 3'],
  [52.23040500771883, 21.012146472930908, 'point 4']
];

const map = L.map('map', config).setView([lat, lon], zoom);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

// loop that adds many markers to the map
for (let i = 0; i < points.length; i++) {
  const lat = points[i][0];
  const lng = points[i][1];
  const popupText = `<button data-value="test-${i+1}" class="delete">${points[i][2]}</button>`;

  marker = new L.marker([lat, lng])
    .bindPopup(popupText)
    .addTo(map);

  marker.on('popupopen', function(e) {

    const btns = document.querySelectorAll('.delete');
    btns.forEach(btn => {
      btn.addEventListener('click', () => {
        alert(btn.getAttribute('data-value'));
      })
    })

  });

}
* {
  margin: 0;
  padding: 0
}

html {
  height: 100%
}

body,
html,
#map {
  height: 100%;
  margin: 0;
  padding: 0
}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" />

<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>

<div id="map"></div>
1 голос
/ 13 июля 2020

Если ваш 

'<a href="#"  id = "delete" data-value = id >delete</a>'

каким-то образом завершает вызов функции delete() где-то и передает ей атрибут data-value, все, что вам, возможно, нужно сделать, это написать его так, чтобы фактический используется значение идентификатора на момент его определения: 

'<a href="#"  id = "delete" data-value = "' + id + "' >delete</a>'
0 голосов
/ 14 июля 2020

Окончательный код:

Наконец мне удалось разгадать все вместе, getUsers() получить некоторую корректировку: 

function getUsers() {
                $.getJSON("getData.php", function (data) {
                for (var i = 0; i < data.length; i++) {
                var location    = new L.LatLng(data[i].lat, data[i].lng);
                var id          = data[i].id;
                var species     = data[i].species;
                var diameter    = data[i].average_diameter;
                var quality     = data[i].quality;
                var damage      = data[i].damage;
                var notes       = data[i].additional_information;

                var popupText   = `<button data-value= "${data[i].id}" class="delete">Delete</button>`;
                
                var marker      = new L.marker([data[i].lat, data[i].lng], {icon: greenIcon}).addTo(map);
                                    marker.bindPopup("ID:"+ id + "<br>" + "Species: " + species + "<br>" + "Diameter: " + diameter +"cm" + "<br>" +"Quality: " + quality + "<br>" +"Damage: " + damage + "<br>" +"Notes: " + notes + "<br>" + "<br>" + popupText);
                                    
                            
                                marker.on('popupopen',function(e){
                                    
                                        const btns = document.querySelectorAll('.delete');
                                            btns.forEach(btn => {
                                            btn.addEventListener('click', () => {
                                            
                                            var id = btn.getAttribute('data-value');
                                            
                                                $.ajax({
                                                    type: 'POST',
                                                    url: 'delete.php',
                                                    data: {id1:id},
                                                    success: function(data){
                                                        alert(data);},
                                                    error: function(data){
                                                        alert('Something went wrong.');}
                        
                        
                                                });
                                            
                                            })
                                            });

                                        
                                    
                                    
                                });                 
                }
                

                })
            }

, а также delete.php получит некоторые корректировки: 

<?php   

    $id= $_POST['id1'];

    $connect = mysqli_connect("localhost", "root", "", "useraccounts");  
    $sql = "DELETE FROM geomarker WHERE id = ($id)";  
    $result = mysqli_query($connect, $sql);  
    if($result){
            echo 'Data successfully deleted.';
        }else{
            echo 'There were erros while deleting the data.';
        }
    
?>

Спасибо за помощь!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...