Beiträge von sfthbara

sfthbara

hmm, ich habe das mal ausprobiert. also quasi so:

.backmodal{
width: 300px;
height: 300px;
background-color: brown;
}

aber dann scheint er das Modal einfach unten dranzuhängen

sfthbara

Danke,

ja genau das habe ich gemeint. Wäre das nicht lösbar, indem man dem obersten div div modal.fade eine weitere Klasse zuweist, mit der man Länge und Breite definiert?

sfthbara

Danke,

ich schau mal wie ich das umsetze. Vorher ist mir jedoch aufgefallen, nachdem ich 3 Modale wie aus der ursprünglichen Fiddle-Version in mein Webseiten-Projekt ein eingefügt habe, dass die Eigenschaft auf Buttons im Hintergrund verloren gegangen ist. Hätte jemand eine Idee, wieso das so ist?

Mein Modale sehen jetzt so aus wie in diesem Beispiel:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<div class="modal-body">
<div class="ModalButtons">
<button style="color:yellow" class="btn_nav_right "><i class="fas fa-star"></i></button>
<button style="color:black" class="btn_nav_right"><i class="fas fa-city"></i></button>
<button style="color:green" class="btn_nav_right"><i class="fas fa-tree"></i></button>
<button style="color:black" class="btn_nav_right"><i class="fas fa-landmark"></i></button>
<button class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="addMarkerModal">
<button class="btn_nav_right" id="addspot">add to</button>
<select name="" id="">
<option value="">Europe</option>
<option value="">Germany</option>
</select>
</div>
<button class="btn_nav_right"class="showMyMarkers">show only my list </button>
<button class="btn_nav_right"class="createListModal">Create new </button>
</div>
</div>
</div>
</div>
</div>

#myModal {
position: relative;
}

#myModal2 {
position: relative;
}
.modal-dialog {
position: fixed;
width: 200px;
margin: 0;
padding: 10px;
}

.modal-dialog2 {
position: fixed;
width: 200px;
margin: 0;
padding: 10px;
}

.modal-dialog3 {
position: fixed;
width: 250px;
margin: 0;
padding: 10px;
}

$('.modal-dialog2').draggable({
handle: ".modal-content"
});
});

</script>

Vielen Dank für eure Hilfe

sfthbara

Hallo zusammen,

was wäre denn der Ansatz um mehrere Modale gleichzeitig draggable zu machen. Also damit zwei oder mehr Modale auf dem Bildschirm gleichzeitig verschiebbar sind. Ich verwende dieses Beispiel: https://jsfiddle.net/ntLpg6hw/11/ mit einem Modal.

Vielen Dank für eure Tipps

sfthbara

Hallo,

ich habe versucht folgendes script von fiddle (https://jsfiddle.net/ntLpg6hw/11/) zu verwenden. Habe dazu die bootstrap und jquery scripts eingefügt.

Habe auch gefunden, dass ich das jquery script zuerst einfügen sollte. Dennnoch kommt der Fehler: Uncaught ReferenceError: $ is not defined

Anbei das script:

.modal-dialog {
position: fixed;
width: 100%;
margin: 0;
padding: 10px;
}

</style>

<html>
<button id="btn1">Show Modal</button>
<br />
<button onclick="alert('Button Clicked')">Another Button</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal Title</h4>
</div>
<div class="modal-body">
Modal Body
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</html>

$('.modal-dialog').draggable({
handle: ".modal-header"
});
});

</script>

Vielen Dank

sfthbara

In einer Funktion hat es geklappt. Danke

sfthbara

Danke,

das geht :).

und wie kann ich jetzt ein weiteres Select mit neuem Inhalt füllen? Ich habe eine weitere onload Funktion angehängt:

window.onload = function () {


let optionB = document.createElement('option');

let tempNodeB =
document.createTextNode("option1");
optionB.appendChild(tempNodeB);
selects_region_macro.appendChild(optionB);

}

Aber hier habe ich wider das gleiche Problem wie vorher, dass nur das letzte Select gefüllt wird.

sfthbara

danke.

ich würde das hier anhängen, anstatt der letzten beiden Zeilen:

selects.appendChild(option);

var cln = selects.cloneNode(true);

selects_cont.appendChild(cln);

Scheint aber noch nicht zu funktionieren.

sfthbara

Hi,

habe mal ein kurze Frage. Und zwar versuche ich mit create Element mehrere Selects mit Inhalt(options) zu füllen.

irgendwie wird aber jedesmal nur das letzte select gefüllt an dem ich appendChild(option) anwende.

Kann mir jemand erklären, warum das so ist? und wie ich mehrere mit Inhalt füllen kann?

Danke schonmal

var selects = document.querySelector('#lists_trips');

var selects_cont = document.querySelector('#lists_cont');
var selects_region_macro = document.querySelector('#lists_reg_mac');
var selects_land = document.querySelector('#lists_land');
var selects_region_micro = document.querySelector('#lists_reg_mic');

var ul_list_element = document.querySelector('.ul_list');
var ul_list_continent = document.querySelector('#continents_nav');
//console.log(ul_list_continent);
//console.log(selects)

window.onload = function () {
//console.log('Dokument geladen');
trips= output1.textContent;
trips= JSON.parse(trips);
//console.log(trips)
for(let x = 0;x<trips.list_trips.length;x++){
let option = document.createElement('option');
if(trips.list_trips[x].list_type = "0"){
//console.log('x')
//console.log(x)
//console.log(trips.list_trips[x])
option.classList.add("style_list_trip");
}
else if (trips.list_trips[x].list_type = "1"){
option.classList.add("style_list");
}
let tempNode =
document.createTextNode(trips.list_trips[x].name);
option.appendChild(tempNode);

selects.appendChild(option);
selects_land.appendChild(option);
}

sfthbara

Hallo zusammen,

ich erstelle nach click auf einen button( eventlistener) mit createelement li elemente in der Funktion get_select. Das funktioniert auch. Ziemlich am Ende rufe ich die die Funktion loadDay auf:

loadDay(input.parentElement.id,value_select) und versuche in der nächsten Zeile die variable placeHolder_input aufzurufen, die in Loadday erstellt wurde:

input.setAttribute("placeholder",placeHolder_input);

Doch dann bekomme ich diese Fehlermeldung, wahrscheinlich, weil die Variable nicht außerhalb von loadday definiert ist. Wie kann kann ich diese Variable außerhalb von Loadday benutzen?

Vielen Dank schon mal für eure Hilfe.

function loadDay(id,select_text){
console.log(id);
console.log("in");
const url = 'http://localhost/supertramp/loadDay.php';
const params = new FormData();
params.append('post_var1', id);
params.append('post_var2', select_text);

fetch('loadDay.php', {
method: 'post',
body: params
}).then(res => {
outputI.innerHTML= "";
return res.text();
}).then(res => {
console.log(res);
outputI.innerHTML= res;
placeHolder_input = res;
console.log(placeHolder_input)

})

}

function get_select(val) {
alert(val)

const url = 'http://localhost/supertramp/items_aus_db_laden.php';

const params = new FormData();
params.append('post_var', val);

fetch('items_aus_db_laden.php', {
method: 'post',
body: params
}).then(res => {
outputB.innerHTML= "";
return res.text();
}).then(res => {
//console.log(res);
outputB.innerHTML= res;

list_stops= outputB.textContent;
list_stops= JSON.parse(list_stops);

for(let x = 0;x<list_stops.list_stops.length;x++){
//console.log(ul_list_element)
let li = document.createElement('li');
li.classList.add("ui-state-default");

//console.log('x')
//console.log(x)

let tempNode =
document.createTextNode(list_stops.list_stops[x]);
let tempNode_day =
document.createTextNode(" day: ");

let input = document.createElement('input');
let span = document.createElement('span');
let label = document.createElement('label');
let button = document.createElement('button');
let i = document.createElement('i');
span.classList.add("ui-icon");
span.classList.add("ui-icon-arrowthick-2-n-s");
input.classList.add("input_stop_list");



li.setAttribute("id", x);
button.classList.add("btn");
i.classList.add("fa");
i.classList.add("fa-trash");
button.appendChild(i);
button.addEventListener("click", removeElement);
label.appendChild(tempNode_day);
//console.log(li);
//console.log(ul_list_element);

li.setAttribute("id", x);
li.appendChild(span);
li.appendChild(tempNode);
li.appendChild(label);
li.appendChild(input);
li.appendChild(button);
li.classList.add("linkList");
loadDay(input.parentElement.id,value_select)

input.setAttribute("placeholder",placeHolder_input);

//console.log(input.parentElement.id);

//input.addEventListener(onkeyup,updateDay(input.parentElement.id,10))


ul_list_element.appendChild(li);
}

});

}

sfthbara

Visual studio code zeigt mir jetzt auch diese Info an:

Cannot validate since a PHP installation could not be found. Use the setting 'php.validate.executablePath' to configure the PHP executable.

Source PHP Language features (extension)

sfthbara

mhh ja. Das war weil ich localhost/supertramp vor den Dateinamen geschrieben habe. Wenn ich nur den Dateinamen hinschreibe: ist das Verzeichnis ja richtig:

file:///D:/xampp/htdocs/supertramp/listen_aus_db_laden.php. Nur scheinbar muss da laut Fehlermeldung noch ein https hin

sfthbara

Hallo zusammen,

ich benutze fetch um diese PHP-Datei (listen_aus_db_laden.php) aufzurufen. Das hat auch bis ich heute ein Windows_update gemacht habe und den Rechner neugestartet habe, funktioniert. Jetzt erhalte ich aber folgende Fehlermldung:

app1.js:179 Fetch API cannot load file:///D:/xampp/htdocs/supertramp/localhost/supertramp/listen_aus_db_laden.php. URL scheme must be "http" or "https" for CORS request.

fetchData @ app1.js:179

loadOption @ app1.js:173

(anonymous) @ app1.js:157

app1.js:179 Fetch API cannot load file:///D:/xampp/htdocs/supertramp/localhost/supertramp/listen_aus_db_laden.php. URL scheme must be "http" or "https" for CORS request.

fetchData @ app1.js:179

loadItems @ app1.js:162

(anonymous) @ app1.js:158

app1.js:179 Uncaught (in promise) TypeError: Failed to fetch

at fetchData (app1.js:179)

at loadOption (app1.js:173)

at app1.js:157

fetchData @ app1.js:179

loadOption @ app1.js:173

(anonymous) @ app1.js:157

Promise.then (async)

fetchData @ app1.js:181

loadOption @ app1.js:173

(anonymous) @ app1.js:157

app1.js:179 Uncaught (in promise) TypeError: Failed to fetch

at fetchData (app1.js:179)

at loadItems (app1.js:162)

at app1.js:158

fetchData @ app1.js:179

loadItems @ app1.js:162

(anonymous) @ app1.js:158

Promise.then (async)

fetchData @ app1.js:181

loadItems @ app1.js:162

(anonymous) @ app1.js:158

VM139:1 Uncaught SyntaxError: Unexpected token h in JSON at position 0

at JSON.parse (<anonymous>)

at window.onload (app1.js:206)

Ich benutze xampp und habe alle Datein die ich aufrufe in dem Ordner Supertramp:

D:\xampp\htdocs\supertramp:

Ich habe bereits versucht, , die Datei mit localhost/supertramp/listen_aus_db_laden.php zu laden.

Hier der relevante Code.:

Vielen Dank für mögliche Vorschläge und Lösungsansätze.

function fetchData() {
fetch('listen_aus_db_laden.php').then(function (rep) {
return rep.json()
}).then(function (data) {
//console.log(data);

let result = data
result2= JSON.stringify(result);
output1.textContent = result2;
trips= output1.textContent;
trips= JSON.parse(trips);

})

};

sfthbara

Hi, ich versuche gerade ein dropdown Menü in mein Skript einzubinden. Bloß leider lässt sich dieses nicht öffnen. Stimmt hier etwas mit der jquery Verlinkung nicht? Ich hoffe ihr könnt mir helfen.

Ps: den überflüssigen Teil des Skriptes habe ich weggelassen.

Danke für eure Hilfe

<!DOCTYPE html>
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
<html>
<head>
<meta charset="utf-8">

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
<meta name="color-scheme" content="light dark">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="js/jquery.min.js">
<title>TODOs</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>
<div class="app">
<div class="container-fluid">
<div>
<div class="row">

</div>
</div>




</div>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</div>

</div>

</div>
<script src="cordova.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/index.js"></script>

</body>
</html>

sfthbara

Hallo,

Ich habe ich einen js code gefunden mit dem ich einen Chart darstellen kann. Da ich aber später die X- und Y-Achse mit Daten aus einer MYSQL-Datenbank versorgen muss, habe ich vorerst versucht die Variable i aus der For-Schleife in php zu übertragen. (Später wird auch Y über Mysql und php verwendet werden.) . Dazu habe ich einen Code in

ajax.frozenfox.at/ajax_002.html gefunden und eingebaut. Jedoch kann ich die die Variable content in meinem Code nicht verwenden. Wahrscheinlich weil diese dann außerhalb der Funktion verwendet wird. Hat da jemand eine Lösung? Danke im voraus

Thomas

Hier noch mal mein Code.

PHP

<?php
header('Content-Type: text/html; charset=utf-8'); // sorgt für die korrekte Kodierung
header('Cache-Control: must-revalidate, pre-check=0, no-store, no-cache, max-age=0, post-check=0'); // ist mal wieder wichtig wegen IE
$name = $_POST['name'];
echo $name;
?>

HTML

<!DOCTYPE HTML>
<html>
<head>

<script type="text/javascript">
<!--
var request = false;
// Request senden
function setRequest(value) {
// Request erzeugen
if (window.XMLHttpRequest) {
request = new XMLHttpRequest(); // Mozilla, Safari, Opera
} else if (window.ActiveXObject) {
try {
request = new ActiveXObject('Msxml2.XMLHTTP'); // IE 5
} catch (e) {
try {
request = new ActiveXObject('Microsoft.XMLHTTP'); // IE 6
} catch (e) {}
}
}
// überprüfen, ob Request erzeugt wurde
if (!request) {
alert("Kann keine XMLHTTP-Instanz erzeugen");
return false;
} else {
var url = "ajax_002.php";
// Request öffnen
request.open('post', url, true);
// Requestheader senden
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// Request senden
request.send('name='+value);
// Request auswerten
request.onreadystatechange = interpretRequest;
}
}
// Request auswerten
function interpretRequest() {
switch (request.readyState) {
// wenn der readyState 4 und der request.status 200 ist, dann ist alles korrekt gelaufen
case 4:
if (request.status != 200) {
alert("Der Request wurde abgeschlossen, ist aber nicht OK\nFehler:"+request.status);
} else {
content = request.responseText;
// den Inhalt des Requests in das <div> schreiben

document.getElementById('content').innerHTML = content;

return content;
}
break;
default:
break;
}
}
//-->
</script>


<script>


window.onload = function () {
var limit = 1000;    //increase number of dataPoints by increasing the limit
var y = 100;    // hier einsetzen select * WHERE i=0 limit 1
var data = [];
var dataSeries = { type: "line" };   // in zeile 12 also +2 i= startwert/Wellenlänge setzen
var dataPoints = [];


for (var i = 0; i < limit; i += 1) {
setRequest(i);

y += Math.round(Math.random() * 10 - 5); //hier aus Datenbankentnehmen SELECT * WHERE lamda=i
dataPoints.push({
x: content,
y: y //aus php über mysql
});
}
dataSeries.dataPoints = dataPoints;
data.push(dataSeries);
//Better to construct options first and then pass it as a parameter
var options = {
zoomEnabled: true,
animationEnabled: true,
title: {
text: "Try Zooming - Panning"
},
axisY: {
includeZero: false
},
data: data  // random data
};
$("#chartContainer").CanvasJSChart(options);
}
</script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>

<br />
<div id="content"></div>
</body>
</html>

Alles anzeigen

Beiträge von sfthbara

mehrere draggable Modale gleichzeitig

mehrere draggable Modale gleichzeitig

mehrere draggable Modale gleichzeitig

mehrere draggable Modale gleichzeitig

Uncaught ReferenceError: $ is not defined

create multiple element select

create multiple element select

create multiple element select

create multiple element select

variable aus js function verwenden

fetch funktioniert aufeinmal nicht mehr

fetch funktioniert aufeinmal nicht mehr

fetch funktioniert aufeinmal nicht mehr

dropdown menü geht nicht

Variable von js in php übertragen