Ankündigung

Einklappen
Keine Ankündigung bisher.

DIV dynamisch aktivieren

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • lernen4ever
    hat ein Thema erstellt DIV dynamisch aktivieren.

    DIV dynamisch aktivieren

    Ist es möglich dass sich ein DIV oder eine PHP Funktion nach einem erfolgreichen INSERT automatisch aktualisiert ohne dass der User die Seite neu laden muss? Meine Seite hat derzeit folgenden Inhalt

    PHP-Code:
    <?php 
    $tagsAusgabe 
    tags($mysqli);

    if(
    $tagsAusgabe 0) {?>
    <div id="ausgabeTags">
    <?php foreach($tagsAusgabe as $array_tags){ ?>
        <p><?php echo htmlspecialchars($array_tags['titel']); ?></p>
    <?php ?>    
    </div>
    <?php ?>

    <script>
    $(document).ready(function(){

        $( "#btn_tag" ).submit(function() {

            var tag_txt = $('#tag').val();

            if($.trim(tag_txt) != '') {

                $.ajax({

                    url:        "inserTag.php",
                    type:       "POST",
                    data:     {tag:tag_txt},
                    dataType: 'text',

                    success:  function(data) {

                }
            });    
        };

    });
    </script>
    Der Bereich ausgabeTags sollte neu geladen werden.

  • tomBuilder
    antwortet
    echo json_encode($_POST);
    wieso gibst Du bei erfolgreicher DB Abfrage Dein Post aus ?

    Einen Kommentar schreiben:


  • lernen4ever
    antwortet
    Ich bin jetzt ein Schritt weiter, aber ich bekomme hin und wieder doppelte Einträge, an was könnte dieses liegen?

    mein PHP Code

    PHP-Code:
    error_reporting(E_ALL);
    ini_set('display_errors'1);

        if (
    $stmt $mysqli->prepare("INSERT INTO tags (t_kategorie, t_sid, t_titel, t_userID) 
                                                VALUES (?, ?, ?, ?)"
    ))
               { 

                
    $t_kategorie  "artikel";
                
    $t_sid        $_POST["artikel"];
                
    $t_titel      $_POST["titel"];  
                
    $t_userID      $_POST["userCode"];    

                
    $stmt->bind_param("ssss"$t_kategorie$t_sid$t_titel$t_userID);

                
    $stmt->execute();
                 echo 
    json_encode($_POST);
                }

        else {
            echo 
    $mysqli -> error;

        } 
    Code:
        $(document).ready(function(){
    
            $(".open").fancybox({
    
                maxWidth    : 450,
                maxHeight    : 240,
                fitToView    : false,
                width        : '70%',
                height        : '70%',
                autoSize    : false,
                closeClick    : false,
                openEffect    : 'none',
                closeEffect    : 'none'
            });
    
            $( ".open" ).click(function() {
    
                var test = $(this).data('item-id');
                console.log(test);
                $("#artikel").val(test);
    
                document.getElementById("sophie").innerHTML = test;
    
                $( "#tagInsert" ).submit(function( event ) {
    
                event.preventDefault();
    
                var send = $("#tagInsert").serialize();
    
                $.ajax({
    
                    type:       "POST",
                    url:        "insertTags.php",
                    data:     send,
                    dataType: 'json',
    
                    success:  function(data) {
    
                        $("#halloTest_"+test).load("#" + " #halloTest_"+test);
                        $("#titel").val('');
    
                        $.fancybox.close();
    
                    }
    
                });
    
            });
    
    
            });
    
        });
    Das Fenster das aufgehten

    HTML-Code:
    <div id="divPopUo" style="display:none;" class="test-insert">
    
    <h2 style="margin-bottom: 1em;">Neuer Tag hinzufügen</h2>
    
    <div id="sophie"></div>
    
    <form method="post" action="" id="tagInsert">
    
    
            <div class="textfeld">
                <label for="titel" style="width: 7em; display: inline-block;">Bezeichnung</label>
                <input type="text" name="titel" id="titel" value="" required="">
            </div>
    
            <input type="hidden" name="artikel" value="" id="artikel">
            <input type="hidden" name="userCode" value="<?php echo $object->user_code; ?>">
    
            <div class="textfeld">
                <button id="eintragen" class="btn-test" style="margin-left: 8.3em; margin-top: 1em; background: #d8d3d3; border: none; padding: 0.5em 1em;">Speichern</button>
            </div>
        </form>
    
    </div>
    Der Link, der für das öffnen zuständig ist

    Code:
    <span>Tags <a data-item-id="<?php echo htmlspecialchars($array['a_code']); ?>"
                                              class="open"  
                                              href="#divPopUo" 
                                              style="color: #c5c5c5;">[Hinzufügen]</a></span>
    Wenn ich die Seite aufrufe auf den Link klicke und etwas einfüge funktioniert es. Klicke ich nochmals auf den Link OHNE die Seite neu zu laden, geht zwar wieder das Fenster auf, ich kann auch etwas eintragen, klicke ich auf abschicken habe ich den eingefügten Eintrag zwei mal in meiner Datenbank. Klicke ich jetzt wieder auf den Link, trage wieder etwas ein, habe ich den gerade eingefügten Wert 3x mal in der Datenbank. Warum passiert dieses?

    Einen Kommentar schreiben:


  • chim
    antwortet
    Zitat von lernen4ever Beitrag anzeigen
    Ich habe nochmal eine Frage. Und zwar habe ich ein paar DIVS untereinander stehen, z.B. so:

    HTML-Code:
    <div id="1"></div>
    <div id="2"></div>
    <div id="3"></div>
    <div id="4"></div>
    <div id="5"></div>
    Ist es möglich nur ein DIV aktualisieren zu lassen?
    Zitat von lernen4ever Beitrag anzeigen
    Danke für deine Antwort, das heißt ich kann dieses so gar nicht mehr nutzen?

    HTML-Code:
    success: function(data) {
    
    $("#TestDiv").load(window.location + " #TestDiv");
    }


    Wenn du
    HTML-Code:
    <div id="1"></div>
    ansprechen willst musst du auch die schreiben, du sprichst damit das testdiv an.

    Einen Kommentar schreiben:


  • lernen4ever
    antwortet
    Hallo,

    ich verstehe eines nicht. Warum habe ich in allen Einträgen immer die gleiche ID?

    Code:
    $( "#servus" ).click(function() {
    
                var test = $(this).data('item-id');
                $("#artikel").val(test);
    
                $( "#tagInsert" ).submit(function( event ) {
    
                event.preventDefault();
    
                var send = $("#tagInsert").serialize();
                var mT   = $("#artikel").val();
    
                alert(test);
    
                $.ajax({
    
                    type:       "POST",
                    url:        "insertTags.php",
                    data:     send,
                    dataType: 'json',
    
                    success:  function(data) {
    
                        $("#halloTest_"+test).load(window.location + " #halloTest_"+test);
                        $("#titel").val('');
    
                        $.fancybox.close();
    
                    }
    
                });
    
            });
    
    
            });
    HTML-Code:
    <div id="inlineTags" style="display:none;" class="test-insert">
    
    <h2 style="margin-bottom: 1em;">Neuer Tag hinzufügen</h2>
    
    <form method="post" action="" id="tagInsert">
    
    
            <div class="textfeld">
                <label for="titel" style="width: 7em; display: inline-block;">Bezeichnung</label>
                <input type="text" name="titel" id="titel" value="" required="">
            </div>
    
            <input type="hidden" name="artikel" value="" id="artikel">
            <input type="hidden" name="userCode" value="<?php echo $object->user_code; ?>">
    
            <div class="textfeld">
                <button id="eintragen" class="btn-test" style="margin-left: 8.3em; margin-top: 1em; background: #d8d3d3; border: none; padding: 0.5em 1em;">Speichern</button>
            </div>
        </form>
    
    </div>
    HTML-Code:
    <li><span>Tags <a class="variousTags" data-item-id="<?php echo htmlspecialchars($array['a_code']); ?>" id="servus" href="#inlineTags" style="color: #c5c5c5;">[Hinzufügen]</a></span></li>
    Im HTML stehen die richtigen IDs. alert(test); bringt mit immer die ID vom ersten Eintrag.

    Einen Kommentar schreiben:


  • lernen4ever
    antwortet
    Danke für deine Antwort, das heißt ich kann dieses so gar nicht mehr nutzen?

    HTML-Code:
    success: function(data) {
    
    $("#TestDiv").load(window.location + " #TestDiv");
    }

    Einen Kommentar schreiben:


  • chim
    antwortet
    Zitat von lernen4ever Beitrag anzeigen
    Ich habe nochmal eine Frage. Und zwar habe ich ein paar DIVS untereinander stehen, z.B. so:

    HTML-Code:
    <div id="1"></div>
    <div id="2"></div>
    <div id="3"></div>
    <div id="4"></div>
    <div id="5"></div>
    Ist es möglich nur ein DIV aktualisieren zu lassen?
    Du kannst jede einzelne ID ansprechen, je nach dem was du vor hast, .text oder .html:

    http://api.jquery.com/text/

    http://api.jquery.com/html/

    Einen Kommentar schreiben:


  • hausl
    antwortet
    MOD: Verschoben von PHP-Einsteger

    Einen Kommentar schreiben:


  • lernen4ever
    antwortet
    Ich habe nochmal eine Frage. Und zwar habe ich ein paar DIVS untereinander stehen, z.B. so:

    HTML-Code:
    <div id="1"></div>
    <div id="2"></div>
    <div id="3"></div>
    <div id="4"></div>
    <div id="5"></div>
    Ist es möglich nur ein DIV aktualisieren zu lassen?

    Einen Kommentar schreiben:


  • chim
    antwortet
    Gratuliere!

    Einen Kommentar schreiben:


  • lernen4ever
    antwortet
    Hallo, ich habe es hinbekommen und zwar so

    success: function(data) {

    $("#TestDiv").load(window.location + " #TestDiv");
    }

    Einen Kommentar schreiben:


  • lernen4ever
    antwortet
    Das alert wird ausgeführt, ich habe folgendes gefunden

    Code:
    success:  function(data) {
    
     alert("Funktioniert!"); 
     $('#TestDiv').html(data);
    
     }
    Nach dem abschicken wird auch etwas gemacht und zwar das DIV wird komplett ausgeblendet anstatt funktioniert. Mir fehlt die Idee wie man ein DIV aktualisieren kann bzw. neu laden oder was auch immer.

    Einen Kommentar schreiben:


  • chim
    antwortet
    HTML-Code:
    success:  function(data) {
    //Wenn die Aktion erfolgreich war, wird dieser Quellcode ausgeführt
    alert("Funktioniert!");
    }

    Einen Kommentar schreiben:


  • lernen4ever
    antwortet
    Danke für deine Antwort. Ich habe mich in den letzten Tagen etwas schlau gemacht. Leider ohne großen Erfolg. Ich komme immer wieder auf so einen Aufruf

    Code:
    $('#chat_refresh').load('tpl/gamepage/shoutbox.php');
    Das heißt ich muss das ganze DIV in eine externe Datei auslagern? Ist es nicht möglich dass ich ein DIV ohne include neu lade?

    Einen Kommentar schreiben:


  • jonas3344
    antwortet
    Ja klar, ist auch schon alles vorbereitet, du musst nur in der $.ajax-funktion den success-Teil dazu benutzen Deine div anzupassen, so wie du das gerne hättest.

    Einen Kommentar schreiben:

Lädt...
X