Beiträge von sfthbara

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

    <div class="modal fade backmodal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">


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

    aber dann scheint er das Modal einfach unten dranzuhängen

    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">&times;</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;
    }


    <script>
    $('#filter').click(function() {
    // reset modal if it isn't visible
    if (!($('.modal.in').length)) {
    $('.modal-dialog').css({
    top: 0,
    left: 0
    });
    }
    $('#myModal').modal({
    backdrop: false,
    show: true
    });
    $('.modal-dialog').draggable({
    handle: ".modal-content"
    });
    });
    </script>

    <script>
    $('#routes').click(function() {
    // reset modal if it isn't visible
    if (!($('.modal.in').length)) {
    $('.modal-dialog2').css({
    top: 0,
    left: 0
    });
    }
    $('#myModal2').modal({
    backdrop: false,
    show: true
    });

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

    </script>



    Vielen Dank für eure Hilfe

    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:



    <link rel="stylesheet" href="jquery-ui.min.js">
    <link rel="stylesheet" href="bootstrap.min.css">
    <link rel="stylesheet" href="bootstrap.min.js">


    <style>
    #myModal {
    position: relative;
    }

    .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>

    <!-- Modal -->
    <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">&times;</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>

    <script>
    $('#btn1').click(function() {
    // reset modal if it isn't visible
    if (!($('.modal.in').length)) {
    $('.modal-dialog').css({
    top: 0,
    left: 0
    });
    }
    $('#myModal').modal({
    backdrop: false,
    show: true
    });

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

    </script>



    Vielen Dank

    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.

    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.

    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);
    }

    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);
    }
                    
    });
                
    }

    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

    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);

    })
          
    };

    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">
    <!--
    Customize this policy to fit your own app's needs. For more guidance, see:
    https://github.com/apache/cord…d#content-security-policy
    Some notes:
    * gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
    * https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
    * Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
    * Enable inline JS: add 'unsafe-inline' to default-src
    -->
    <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>

    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;
    ?>