All geek questions in one place

Refresh data in div

I had a problem updating the data displayed from my db. Initially, when the page opens, I show the date corresponding to the current date, but then the user can change the date by entering it in the text box, and when he clicks the Refresh button, all displayed data should be deleted, and the data corresponding to the new date should be displayed. Right now I have a javascript function that deletes all the data in a div when a button is clicked. The div stores the data I want to change. But I do not know how to add new data to the div. I tried to add php code to search the database for data in a javascript function, but I do not know how to add it to the text box.

function changedate()
{
    document.getElementById("label1").innerText=document.getElementById("datepicker").valu e;
    document.getElementById("selecteddate").innerText=document.getElementById("datepicker"  ).value;
    document.getElementById("teammembers").innerHTML = "";//empties the div(teammembers)

    <?php
    $con=mysqli_connect("localhost","*****","*****","*****");
    $result = mysqli_query($con,"SELECT * FROM users");
    while($row = mysqli_fetch_array($result))
    {
        if(trim($user_data['email'])!=trim($row['email']))
        {
            $email_users = $row['email'];
            //I want to first show this email but I don't know how to add it to the div.
        }
    }
    ?>
}
+2
3

jQuery AJAX. , . , , .

.PHP: test86a.php test86b.php.

, 86A, ( ) jQuery, , . jQuery, jQuery .blur(), , , API jQueryUI:

$('#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");
    }
});

, jQuery , , 86B AJAX. , , HTML- echo . Javascript, - , .

, . MYSQL .. , .

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;

AJAX .

, HTML ( - ). , :

1) GRABBED jQuery: var sel_stud = $('#stSelect').val();

2), SENT AJAX script. ( $.ajax({}))

script , ECHOES, script: echo $r;

script AJAX, ( ) : $('#LaDIV').html(whatigot);

- ( ) , .

0

JS , php, :

document.getElementById("teammembers").innerHTML = // notice no erasing, we just
                                                   // overwrite it directly with the result

"<?php
  $con=mysqli_connect("localhost","*****","*****","*****");
  $result = mysqli_query($con,"SELECT * FROM users");
  while($row = mysqli_fetch_array($result))
  {
      if(trim($user_data['email'])!=trim($row['email']))
      {
          $email_users = $row['email'];
          //I want to first show this email but I don't know how to add it to the div.
          // so just show it!
          echo $email_users;     // think about this for a second though
                                 // what are you trying to achieve?
      }
  }
  ?>"
0

, . AJAX - javascript , . javascript jQuery:

   $.ajax({
  type: "POST",
  url: "emails.php",
  data: { user: "John" }
}).done(function( msg ) {
  $('teammembers').html(msg);
});

,

-1

Source: https://habr.com/ru/post/1568876/

More articles:


All Articles