У меня возникла проблема с обновлением данных, отображаемых с моего db. Первоначально, когда открывается страница, я показываю дату, соответствующую текущей дате, но затем пользователь может изменить дату, введя ее в текстовое поле, и когда он нажимает кнопку «Обновить», все отображаемые данные должны быть удалены, а данные, соответствующие новой дате должен отображаться. Прямо сейчас у меня есть функция javascript, которая удаляет все данные в div при нажатии кнопки. В div хранятся данные, которые я хочу изменить. Но я не знаю, как добавить новые данные в div. Я попытался добавить php-код для поиска базы данных для данных в функции javascript, но я не знаю, как добавить его в текстовое поле.
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. } } ?> } Для этого вы можете использовать комбинацию jQuery и AJAX. Гораздо проще, чем кажется. Чтобы убедиться, что это правильный ответ для вас, просто просмотрите этот пример .
В приведенном ниже примере есть два файла .PHP: test86a.php и test86b.php.
Первый файл, 86A, имеет простое поле выбора (выпадающего списка) и некоторый код jQuery, который следит за тем, чтобы это окно выбора изменилось. Чтобы вызвать код jQuery, вы можете использовать .blur() 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 запускается, AJAX-запрос отправляется во второй файл, 86B. Этот файл автоматически просматривается из базы данных, получает ответы, создает некоторый форматированный HTML-контент и возвращает его в первый файл. Все это происходит через 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 ко второму сценарию. (Материал $.ajax({}) )
Второй скрипт использует полученные значения для поиска ответа, затем ECHOES, которые отвечают на первый скрипт: echo $r;
Первый скрипт ПОЛУЧИТ ответ в функции успеха AJAX, а затем (все еще внутри функции успеха) INJECTS ответ на страницу: $('#LaDIV').html(whatigot);
Прошу поэкспериментировать с этими простыми примерами – первый (более простой) связанный пример не требует поиска в базе данных, поэтому он должен работать без изменений.
Вы хотите вывести буквальный оператор 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? } } ?>"
Это обширный вопрос, не очень конкретный. Узнайте больше о запросах AJAX – в основном из javascript у вас будет вызов сервера, который извлекает ваши данные. Это фрагмент из javascript-библиотеки jQuery :
$.ajax({ type: "POST", url: "emails.php", data: { user: "John" } }).done(function( msg ) { $('teammembers').html(msg); });
надеюсь, это даст вам отправную точку