Beiträge: 17
Themen: 10
Registriert seit: Mar 2022
Bewertung:
0
Hi, gibt es eine Möglichkeit, einen Eventlistener zu nicht wie üblich auf ein click oder Tastendruck zu betätigen. Sondern bei Aufruf einer Funktion. Also wenn Funktion XY aufgerufen wird, soll auch danach der der Eventlistener aktiv werden? Geht das?
Beiträge: 636
Themen: 65
Registriert seit: Feb 2021
Bewertung:
14
Gehen tut das alles.- Kannst du mal erklären, was du genau hast, dann könnte ich dir mal ein Beispiel fertig machen.
Mir fällt gerade kein Grund ein wofür man sowas brauch
Beiträge: 17
Themen: 10
Registriert seit: Mar 2022
Bewertung:
0
Also,
ich baue mir gerade eine Webseite zusammen, in der ich nebeneinander eine Benutzeroberfläche und ein div habe, indem ich google maps mit markern (pins) ausführe.
Auf der map kann ich mir mit diesem Beispiel: ( https://developers.google.com/maps/docum...-waypoints) den Weg zeichnen lassen von Ort A zu Ort B über verschiedene Zwischenstops. Gleichzeitig habe ich in meiner Benutzeroberfläche eine Draggable/Sortable list mit den Wegpunken.
Das Hauptproblem ist, sobald ich mit dem Beispiel auf der map einen Weg zeichnen möchte, muss ich das wohl in der Funktion initmap() ausführen. Also rufe ich einen eventlistener in initmap() auf, der den Weg zeichnet. Die Ausführung der Draggable/sortable list, liegt aber außerhalb dieser Funktion initmap(). Wenn ich die Reihenfolge der Liste, die ja sortable ist, durch verschieben verändere, starte ich eine Funktion changePHP_ListOrder(), die die die Reihenfolge der Liste, in einer Datenbank (localhost) verändert und speichert. Ich möchte jetzt in der Funktion initmap, einen eventlistener ausführen, der getriggert wird, nachdem changePHP_ListOrder() ausgeführt wurde. Also nachdem ich durch verschieben die Reihenfolge meiner Liste verändert habe.
Nachdem also die Reihenfolge der Liste mit den Wegpunkten verändert wurde, soll das Programm den Weg einfach noch mal mit der neuen Reihenfolge der Wegpunkte neuzeichen.
in etwa so:
Code: changePHP_ListOrder().addEventListener("nach Ausführung", function() {
Draw Way})
Ich hoffe das ist technisch möglich 
Beiträge: 636
Themen: 65
Registriert seit: Feb 2021
Bewertung:
14
Verstanden habe ich es so etwa.
Dein Link geht nicht, poste bitte nochmal den Link.
Mit einem kompletten Code, den man testen kann, ist es einfacher, dann kann man sehen wie der Code aufgebaut ist.
Eine Funktion in einen Eventlistener auszuführen , oder eine eventlistener in eine Funktion ist eigentlich kein Problem , solange es die Elemente und Funktionen auch gibt.
Genauer kann man es zeigen, wenn du den Link postet oder am besten noch deinen aktuellen Code online verfügbar machst (deine Homepage , Codepen usw. )
Beiträge: 17
Themen: 10
Registriert seit: Mar 2022
Bewertung:
0
Beiträge: 17
Themen: 10
Registriert seit: Mar 2022
Bewertung:
0
Hi, ich habe die Datei jetzt soweit reduziert, dass das Zeichnen aus dem Beispiel auch ohne meine Datenbank funktioniert. Unter der Map, befindet sich ein Modal( in dieser Version leider nicht draggable), mit einem submit-Button. Wenn man diesen Button klickt, öffnet sich eine Liste mit Städten unterhalb, die sortable ist. Gleichzeitig wird eine Verbindung zwischen den Städten gezeichnet. Ich möchte nun, dass wenn ein Element der Liste an eine andere Stelle verschoben wird, die Verbindungen mit der neuen Reihenfolge neugezeichnet werden.
So wie ich es verstanden habe, muss der Befehl( eventlistener) aus der init funktion kommen.(Wieso verstehe, ich auch nicht ganz. Es wäre nämlich auch möglich, auf sortable einen Eventlistener anzusetzen. Leider weiß ich aber nicht wie das geht.
Nach dem verschieben einer Stadt in der unteren Liste, startet eine Funktion phpchangeOrder( die die Reihenfolge in der Datenbank verändert. Ich dachte man kann das zeichnen auch in die Funktion setzen. Leider hat es bei mir nicht geklappt.
Deswegen hatte ich die Idee in der Initfunktion einen eventlisterner einzubauen, der nach aufruf von phpChangeOrder() startet.
Ein weiteres Problem, ist, dass ich nicht weiß, wie die alten Verbindungen verschwinden können, bevor bei weiterer Betätigung des Submit-Buttons eine neue Verbindung gezeichnet wird.
Vielen Dank für deine Hilfe
Code: <!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="D:\Privat\Entwicklung\windowjs-master\windowjs-master/window.css" />
<script src="D:\Privat\Entwicklung\windowjs-master\windowjs-master/window.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/95e77da10e.js" crossorigin="anonymous"></script>
<script src="D:\xampp\htdocs\supertramp\jquery.js"></script>
<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
<link rel="stylesheet" href="bootstrap.min.css">
<script src="bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<title>Document</title>
<link rel="stylesheet" href="css_ts.css">
</head>
<body>
<div class="container">
<div class="main_container">
<div class="map_window">
<div id="map">
</div>
</div>
</div>
</div>
</div>
</main>
</div>
<div id="modal_your_trip" class="my-modal">
<header class="handle">
<button id="btn_close_your_trip" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="my-modal-title">Modal 3</h4>
</header>
<main>
<div class="modal-body">
<div class="ModalButtons">
</div>
<h2>plan your trip</h2>
<button id="submit">submit</button>
<div id="sortable" class="items ul_list">
</div>
<div id="routesCollection_yours"></div>
</div>
</main>
</div>
</div>
</div>
</body>
<script>
map_window = document.querySelector("map_window")
modal3 = document.getElementById("modal_your_trip")
function CreateDraggableItems3(output){
//list_stops = output
list_stops = ["Praga","Warschau","Berlin","Kiel","Dortmund"]
let div_grandpar_your = document.getElementById("sortable");
div_grandpar_your.innerHTML = '<div id="sortable" class="items ul_list">';
WayPoints = [];
for (let x = 0; x < list_stops.length; x++) {
let div = document.createElement('div');
i_icon_town = document.createElement('i')
i_icon_town.classList.add('fas');
i_icon_town.classList.add('fa-city');
input = document.createElement('input');
if (x == 0){Origin_Beg = list_stops[x]}
if (x == list_stops.length-1){Direction_End = list_stops[x],console.log(list_stops[x])}
if(x> 0){
if(x< list_stops.length-1){
WayPoints.push(list_stops[x])
}
}
placeHolder_input = "-";
input.setAttribute("placeholder", placeHolder_input);
input.setAttribute("size", 1)
i_icon_trash = document.createElement('i')
i_icon_trash.classList.add('fa');
i_icon_trash.classList.add('fa-trash');
span = document.createElement('span');
span.appendChild(i_icon_town);
span.appendChild(input);
span.appendChild(i_icon_trash);
div.appendChild(span)
//div.innerHTML = '<span> <i class="fas fa-city"></i> days: <input type="text"><i class="fa fa-trash"></i></span>';
div.classList.add("icons_your_trip");
div.setAttribute("id", x);
let div_par1 = document.createElement("div")
div_par1.innerText = list_stops[x]
div_par1.classList.add("town_name_your_trip")
div_par1.appendChild(div)
let div_par2 = document.createElement("div");
div_par2.classList.add("ui-state-default")
div_par2.classList.add("available_trip_list")
div_par2.classList.add("linkList")
div_par2.appendChild(div_par1)
div_par2.setAttribute("id", x);
div_grandpar_your.appendChild(div_par2)
//this[this.selectedIndex].text
trashes = document.querySelectorAll(".fa-trash");
id = x;
}
const directionsService = new google.maps.DirectionsService();
const directionsRenderer = new google.maps.DirectionsRenderer();
directionsRenderer.setMap(map);
calculateAndDisplayRoute2(directionsService, directionsRenderer,Origin_Beg,Direction_End,WayPoints);
}
$(function () {
$("#sortable").sortable();
$("#sortable").disableSelection();
});
$(function () {
$("#sortable").sortable({
stop: (event, ui) => {
moved_id = ui.item.attr('id');
next_id = ui.item.next().attr('id');
links = document.querySelectorAll(".linkList");
if (typeof next_id == "undefined") {
ui.item.attr("id", links.length - 1);
for (let x = 0; x < links.length - 1; x++) {
links[x].id = x;
}
}
else if (next_id == 0) {
for (let x = 0; x < links.length; x++) {
links[x].id = x;
}
}
else {
ui.item.attr("id", next_id - 1);
for (let x = parseInt(moved_id); x < parseInt(next_id) - 1; x++) {
links[x].id = x;
}
}
php_changeListorder(moved_id, next_id);
//beginne Zeichnen
}
});
$("#sortable").disableSelection();
});
function php_changeListorder(moved_id,next_id,name){
//name = document.getElementById('myLists_your_trip').selectedIndex.text;
//getContentFromPHP(moved_id,'changeListOrder.php',null,null,next_id,name);
//getContentFromPHP(moved_id,'changeDayOrder.php',null,null,next_id,name);
}
//getContentFetchAPI('paris',CreateCarousselIMGs)
function initMap() {
const directionsService = new google.maps.DirectionsService();
const directionsRenderer = new google.maps.DirectionsRenderer();
map = new google.maps.Map( document.getElementById( 'map' ), {
center: {
lat: 51.513329,
lng: -0.088950
},
zoom: 6,
mapTypeId: 'roadmap',
scaleControl: true,
streetViewControl: true,
});
document.getElementById("submit").addEventListener( "click", function() {
CreateDraggableItems3()
})
/*
changePHP_ListOrder().addEventListener("nach Ausführung", function() {
const directionsService = new google.maps.DirectionsService();
const directionsRenderer = new google.maps.DirectionsRenderer();
directionsRenderer.setMap(map);
calculateAndDisplayRoute2(directionsService, directionsRenderer,Origin_Beg,Direction_End,WayPoints);
}
*/
}
function calculateAndDisplayRoute2(directionsService, directionsRenderer,Origin,Destination,WayPoints) {
const waypts = [];
Origin = "Praga";
Destination = "Dortmund"
WayPoints = ["Warschau","Berlin","Kiel"];
for (let i = 0; i < WayPoints.length; i++) {
waypts.push({
location: WayPoints[i],
stopover: true,
});
}
directionsService
.route({
origin: Origin,
destination: Destination,
waypoints: waypts,
optimizeWaypoints: true,
travelMode: google.maps.TravelMode.DRIVING,
})
.then((response) => {
directionsRenderer.setDirections(response);
const route = response.routes[0];
})
.catch((e) => window.alert("Directions request failed due to " + status));
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOURCODE&callback=initMap" async defer></script>
|
