Mysql
 sql >> Datenbank >  >> RDS >> Mysql

Update-Daten in der div

Sie können dazu eine Kombination aus jQuery und AJAX verwenden. Viel einfacher als es klingt. Um zu sehen, dass dies die richtige Antwort für Sie ist, Sehen Sie sich einfach dieses Beispiel an .

Im folgenden Beispiel gibt es zwei .PHP-Dateien:test86a.php und test86b.php.

Die erste Datei, 86A, hat ein einfaches Auswahlfeld (Dropdown-Feld) und etwas jQuery-Code, der darauf achtet, dass sich dieses Auswahlfeld ändert. Um den jQuery-Code auszulösen, könnten Sie jQuery .blur() verwenden Funktion, um darauf zu achten, dass der Benutzer das Datumsfeld verlässt, oder Sie könnten die jQueryUI-API verwenden:

$('#date_start').datepicker({
    onSelect: function(dateText, instance) {

        // Split date_finish into 3 input fields                        
        var arrSplit = dateText.split("-");
        $('#date_start-y').val(arrSplit[0]);
        $('#date_start-m').val(arrSplit[1]);
        $('#date_start-d').val(arrSplit[2]);

        // Populate date_start field (adds 14 days and plunks result in date_finish field)
        var nextDayDate = $('#date_start').datepicker('getDate', '+14d');
        nextDayDate.setDate(nextDayDate.getDate() + 14);
        $('#date_finish').datepicker('setDate', nextDayDate);
        splitDateStart($("#date_finish").val());
    },
    onClose: function() {
        //$("#date_finish").datepicker("show");
    }
});

Jedenfalls wird beim Auslösen von jQuery eine AJAX-Anforderung an die zweite Datei 86B gesendet. Diese Datei sucht automatisch nach Dingen in der Datenbank, erhält die Antworten, erstellt einige formatierte HTML-Inhalte und echo ist es zurück zur ersten Datei. Dies geschieht alles über Javascript, das vom Browser initiiert wird - genau wie Sie es möchten.

Diese beiden Dateien sind ein unabhängiges, voll funktionsfähiges Beispiel. Ersetzen Sie einfach die MYSQL-Logins und -Inhalte durch Ihre eigenen Feldnamen usw. und beobachten Sie, wie die Magie geschieht.

TEST86A.PHP

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript">
            $(function() {
//alert('Document is ready');

                $('#stSelect').change(function() {
                    var sel_stud = $(this).val();
//alert('You picked: ' + sel_stud);

                    $.ajax({
                        type: "POST",
                        url: "test86b.php", // "another_php_file.php",
                        data: 'theOption=' + sel_stud,
                        success: function(whatigot) {
//alert('Server-side response: ' + whatigot);
                            $('#LaDIV').html(whatigot);
                            $('#theButton').click(function() {
                                alert('You clicked the button');
                            });
                        } //END success fn
                    }); //END $.ajax
                }); //END dropdown change event
            }); //END document.ready
        </script>
    </head>
<body>

    <select name="students" id="stSelect">
        <option value="">Please Select</option>
        <option value="John">John Doe</option>
        <option value="Mike">Mike Williams</option>
        <option value="Chris">Chris Edwards</option>
    </select>
    <div id="LaDIV"></div>

</body>
</html>

TEST86B.PHP

<?php

//Login to database (usually this is stored in a separate php file and included in each file where required)
    $server = 'localhost'; //localhost is the usual name of the server if apache/Linux.
    $login = 'abcd1234';
    $pword = 'verySecret';
    $dbname = 'abcd1234_mydb';
    mysql_connect($server,$login,$pword) or die($connect_error); //or die(mysql_error());
    mysql_select_db($dbname) or die($connect_error);

//Get value posted in by ajax
    $selStudent = $_POST['theOption'];
    //die('You sent: ' . $selStudent);

//Run DB query
    $query = "SELECT `user_id`, `first_name`, `last_name` FROM `users` WHERE `first_name` = '$selStudent' AND `user_type` = 'staff'";
    $result = mysql_query($query) or die('Fn test86.php ERROR: ' . mysql_error());
    $num_rows_returned = mysql_num_rows($result);
    //die('Query returned ' . $num_rows_returned . ' rows.');

//Prepare response html markup
    $r = '  
            <h1>Found in Database:</h1>
            <ul style="list-style-type:disc;">
    ';

//Parse mysql results and create response string. Response can be an html table, a full page, or just a few characters
    if ($num_rows_returned > 0) {
        while ($row = mysql_fetch_assoc($result)) {
            $r = $r . '<li> ' . $row['first_name'] . ' ' . $row['last_name'] . ' -- UserID [' .$row['user_id']. ']</li>';
        }
    } else {
        $r = '<p>No student by that name on staff</p>';
    }

//Add this extra button for fun
    $r = $r . '</ul><button id="theButton">Click Me</button>';

//The response echoed below will be inserted into the 
    echo $r;

Hier ist ein einfacheres AJAX-Beispiel und doch ein weiteres Beispiel zum Auschecken.

Beachten Sie in allen Beispielen, wie der Benutzer den HTML-Inhalt bereitstellt (entweder durch Eingabe oder Auswahl eines neuen Datumswerts oder Auswahl einer Dropdown-Auswahl). Die vom Benutzer bereitgestellten Daten sind:

1) GEGRIFFEN über jQuery:var sel_stud = $('#stSelect').val();

2) dann per AJAX an das zweite Skript GESENDET. (Die $.ajax({}) Sachen)

Das zweite Skript verwendet die empfangenen Werte, um die Antwort nachzuschlagen, und ECHOS dann diese Antwort zurück an das erste Skript:echo $r;

Das erste Skript EMPFÄNGT die Antwort in der AJAX-Erfolgsfunktion und INJIZIERT dann (immer noch innerhalb der Erfolgsfunktion) die Antwort auf der Seite:$('#LaDIV').html(whatigot);

Bitte experimentieren Sie mit diesen einfachen Beispielen -- das erste (einfachere) verlinkte Beispiel erfordert keine Datenbanksuche, daher sollte es ohne Änderungen laufen.