Ankündigung

Einklappen
Keine Ankündigung bisher.

DIV dynamisch aktivieren

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

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


  • #2
    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.

    Kommentar


    • #3
      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?

      Kommentar


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

        Kommentar


        • #5
          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.

          Kommentar


          • #6
            Hallo, ich habe es hinbekommen und zwar so

            success: function(data) {

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

            Kommentar


            • #7
              Gratuliere!

              Kommentar


              • #8
                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?

                Kommentar


                • #9
                  MOD: Verschoben von PHP-Einsteger
                  Debugging: Finde DEINE Fehler selbst! | Gegen Probleme beim E-Mail-Versand | Sicheres Passwort-Hashing | Includes niemals ohne __DIR__
                  PHP.de Wissenssammlung | Kein Support per PN

                  Kommentar


                  • #10
                    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/

                    Kommentar


                    • #11
                      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");
                      }

                      Kommentar


                      • #12
                        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.

                        Kommentar


                        • #13
                          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.

                          Kommentar


                          • #14
                            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?

                            Kommentar


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

                              Kommentar

                              Lädt...
                              X