2013-05-31 38 views
2

我在更新从db显示的数据时遇到问题。最初,当页面打开时,我显示与当前日期相对应的日期,但用户可以通过在文本框中输入日期来更改日期,并且当他单击更新时,应该删除所有显示的数据,并且对应于新日期的数据应该显示。现在我有一个JavaScript函数,它在点击按钮时删除了div中的所有数据。该div拥有我想改变的数据。但我不知道如何添加新的数据到div中。我试图添加php代码来查找数据库中的JavaScript函数中的数据,但我不知道如何将其添加到文本框中。更新div中的数据

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. 
     } 
    } 
    ?> 
} 
+1

你需要做一个AJAX调用PHP脚本,返回新的数据,然后在阿贾克斯成功处理程序用新数据更新你的div。 – Nelson

+1

你不能这样混合javascript代码和php代码,它们是独立的,当php运行在服务器上时,javascript在客户端(浏览器)中运行。 – Nelson

回答

0

您可以使用jQuery和AJAX的组合来做到这一点。比听起来简单得多。看到这是你的正确答案,just view this example

在下面的例子中,有两个.PHP文件:test86a.php和test86b.php。

第一个文件,86A,有一个简单的选择(下拉框)和一些jQuery代码,用于监视该选择框的更改。要触发jQuery代码,您可以使用jQuery的.blur()功能来监视用户离开日期字段,或者你可以使用jQueryUI的API:

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

这里是a more simple AJAX example,但another example为你检查。

在所有示例中,请注意用户如何提供HTML内容(无论是通过键入内容还是选择新的日期值或选择下拉选项)。该用户提供的数据是:

1)通过jQuery抓起:var sel_stud = $('#stSelect').val();

2)然后通过AJAX发送到第二脚本。(该$.ajax({})东西)

第二个脚本使用接收来查找答案的值,则呼应回给第一个脚本:echo $r;

第一个脚本接收答案的AJAX成功的功能,然后(仍然在成功函数中)注入页面上的答案:$('#LaDIV').html(whatigot);

请试验这些简单的示例 - 第一个(更简单)链接的示例不需要数据库查找,因此它应该以no变化。

-1

这是一个很大的问题,不是很具体。查看更多关于AJAX请求的信息 - 基本上来自JavaScript,你将会有一个调用服务器来检索你的数据。 这是从JavaScript库jQuery一个片段:

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

希望这会给你一个起点

0

你想输出,无论你从PHP取回文字JS声明,基本上是:

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? 
     } 
    } 
    ?>"