2015-04-16 32 views
1

現在這一個似乎有點複雜,也許我已經讓自己超過我可以管理,但它似乎是我能達到我需要的唯一途徑。打印JSON(從一個PHP)通過AJAX到引導模式

我是一個完整的新手,我正在爲這個項目工作(這是整個項目中最複雜的事情),所以任何幫助將非常感謝!

我基本上有一個引導網頁,這個網頁顯示一個用戶列表(從一個while循環php)。我需要用戶能夠做的是從中選擇一個用戶,並以引導模式的形式編輯詳細信息。

到目前爲止,我有一切工作,模態加載等,並從各種來源網上爭吵JSon,但我從來沒有學到它,並且我的方式走出我的深淵。目前它正在每個字段中打印'[object HTMLCollection]'。

首先這裏是模態&列表中的HTML:

模態(這完全出現)

<div class="modal fade" id="editUserModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true"> 
     <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
      <h2 class="modal-title" id="editModalLabel"></h2> 
      </div> 
      <div class="modal-body"> 
      <form> 
       <div class="form-group"> 
        <label for="username" class="control-label">Username:</label> 
        <input type="text" name="username" class="form-control" id="username"></input> 
       </div> 
       <div class="row"> 
       <div class="col-lg-12"> 
        <div class="form-group"> 
         <label for="password" class="control-label">Password:</label> 
          <div class="input-group"> 
           <span class="input-group-btn"> 
           <input type="button" class="form-control" value="Change Password" onClick="changeRandomPassword();">&nbsp; 
           </span> 
           <input type="text" name="password" class="form-control" id="password" value="" required></input> 
          </div> 
        </div> 
       </div> 
      </div> 
       <div class="form-group"> 
        <label for="firstName" class="control-label">First Name:</label> 
        <input type="text" name="firstName" class="form-control" id="firstName"> 
       </div> 
       <div class="form-group"> 
        <label for="lastName" class="control-label">Surname:</label> 
        <input type="text" name="lastName" class="form-control" id="lastName"> 
       </div> 
       <div class="form-group"> 
        <label for="jobTitle" class="control-label">Job Title:</label> 
        <input type="text" name="jobTitle" class="form-control" id="jobTitle"> 
       </div> 
       <div class="form-group"> 
        <label for="TaskTeam" class="control-label">Task Team:</label> 
        <input type="text" name="TaskTeam" class="form-control" id="TaskTeam"> 
       </div> 
      </form> 
      </div> 
      <div class="modal-footer"> 
      <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button> 
      <button type="button" class="btn btn-success">Submit Changes</button> 
      </div> 
     </div> 
     </div> 
    </div> 

這裏是PHP的列表:(在這裏再次沒有麻煩)

<?php 
include("dbconnect.php"); 

$dbQuery= mysql_query("SELECT * FROM users ORDER BY lastName ASC;"); 

while($dbRow = mysql_fetch_array($dbQuery)) 
{ 
$userID = $dbRow['id']; 
$username = $dbRow['username']; 
$firstName = $dbRow['firstName']; 
$lastName = $dbRow['lastName']; 
$jobTitle = $dbRow['jobTitle']; 
$userteam = $dbRow['TaskTeam']; 
$admin = $dbRow['admin']; 

echo '<tr>'; 
echo '<td>'; 
echo '<button type="button" class="btn btn-primary close" data-toggle="modal" data-target="#editUserModal" value='.$userID.' id="user" name="user"" data-user='.$userID.'><span title="Edit" aria-hidden="true" class="glyphicon glyphicon-edit"></span></button>'; 
echo '</td>'; 
echo '<td>'.$firstName.'</td>'; 
echo '<td>'.$lastName.'</td>'; 
echo '<td>'.$jobTitle.'</td>'; 
echo '<td>'.$userteam.'</td>'; 
echo '<td>'.$admin.'</td>'; 

echo '<td>'; 
echo '<a href="deleteUser.php?id='.$userID.'">'; 
echo '<button type="button" name="delete_row" id="delete_row" class="close">'; 
echo '<span title="Delete" aria-hidden="true" class="glyphicon glyphicon-trash">'; 
echo '</span>'; 
echo '<span class="sr-only">'; 
echo 'Delete'; 
echo '</span>'; 
echo '</button>'; 
echo '</a>'; 
echo '</td>'; 

echo '</tr>'; 
} 

echo mysql_error(); 
mysql_close(); 

?> 

這裏是問題所在:

<script> 
    $('#editUserModal').on('show.bs.modal', function (event) 
    { 
     var button = $(event.relatedTarget) 
     var recipient = button.data('user') 
     var modal = $(this) 
     modal.find('.modal-title').text('Edit ' + recipient + "'s details.") 
     $(function() 
      { 
      $.ajax(
      { 
       type: 'GET', 
       url: "getUser.php?id=",    
       data: 'recipient', 
       dataType: "json", 
       success: function(data) 
       { 
        var obj = JSON.parse(data); 
        $.each(obj, function(key, val) 
        { 
         console.log(val);   
         var id = data[0];    
         var firstName = data[1];  
         var lastName = data[2]; 
         var username = data[3]; 
         var password = data[4]; 
         var jobTitle = data[5]; 
         var TaskTeam = data[6]; 
         var admin = data[12];  
        }); 
       } 
      }) 
     }) 
     modal.find('.modal-body #firstName').val(firstName) 
     modal.find('.modal-body #lastName').val(lastName) 
     modal.find('.modal-body #username').val(username) 
     modal.find('.modal-body #password').val(password) 
     modal.find('.modal-body #jobTitle').val(jobTitle) 
     modal.find('.modal-body #TaskTeam').val(TaskTeam) 
    }) 
</script> 

最後這裏是php文件,以獲得用戶的詳細信息:(此作品太多,但僅完成manually-這是大宗它不包括口令等)

// Create connection 
$conn = new mysqli($servername, $username, $password, $dbname); 
// Check connection 
if ($conn->connect_error) { 
    die("Connection failed: " . $conn->connect_error); 
} 

$userid = intval($_GET['id']); 
$sql="SELECT * FROM users WHERE id = $userid"; 
$result = $conn->query($sql); 

/* 
$user = array(); 
while ($row = mysql_fetch_array($result)) { 
    $details = array(
    "username"   => $row['username'], 
    "firstName"   => $row['firstName'], 
    "lastName"   => $row['lastName'], 
    "taskTeam"   => $row['taskTeam'] 
); 
    $user[] = $details; 
} 
echo json_encode($user); 
$conn->close(); 
*/ 

if ($result->num_rows > 0) { 
    // output data of each row 
    $array = array(); 
    while($row = $result->fetch_assoc()) { 
     array_push($array, $row); 
    } 
    echo json_encode($array); 
} else { 
    echo "0 results"; 
} 
$conn->close(); 

對不起,缺乏的mysqli的,我知道這是最新的標準,目前正在實施這個項目。

任何幫助將是偉大的!由於

+0

嘗試檢查網絡選項卡您的開發人員工具以查看回復正文併發布以及 –

+0

@ ste-fu當前正在使用Notepad ++並通過FTP檢查更改並在瀏覽器中檢查更改。不知道如何得到響應機構... – JoshM

回答

1

與您的代碼的問題是在這裏:

var obj = JSON.parse(data); 
$.each(obj, function(key, val) 
{ 
    console.log(val);   
    var id = data[0];    
    var firstName = data[1];  
    var lastName = data[2]; 
    var username = data[3]; 
    var password = data[4]; 
    var jobTitle = data[5]; 
    var TaskTeam = data[6]; 
    var admin = data[12];  
}); 

你已經告訴你的AJAX調用,你是從你的PHP腳本期待JSON回來。你用dataType: "json"做了這個。所以這裏沒有理由這樣做:var obj = JSON.parse(data);。既然你告訴你的AJAX調用,你將接收到JSON,當PHP腳本完成時它會自動爲你解析它。

要訪問數據,只需使用.語法。例如,data.firstName

此外,您可能需要需要從

echo json_encode($array); 

在你的PHP文件,以更改此行以

header('Content-Type: application/json'); 
echo json_encode($array); 

而且,你的PHP腳本需要一些清理:

<?php 
include("dbconnect.php"); 

$dbQuery = mysql_query("SELECT * FROM users ORDER BY lastName ASC;"); 

while ($dbRow = mysql_fetch_array($dbQuery)) { 

    $userID = $dbRow['id']; 
    $username = $dbRow['username']; 
    $firstName = $dbRow['firstName']; 
    $lastName = $dbRow['lastName']; 
    $jobTitle = $dbRow['jobTitle']; 
    $userteam = $dbRow['TaskTeam']; 
    $admin  = $dbRow['admin']; 

    echo ' 
    <tr> 
     <td> 
      <button type="button" class="btn btn-primary close" data-toggle="modal" data-target="#editUserModal" value='.$userID.' id="user" name="user"" data-user='.$userID.'><span title="Edit" aria-hidden="true" class="glyphicon glyphicon-edit"></span></button> 
     </td> 
     <td>'.$firstName.'</td> 
     <td>'.$lastName.'</td> 
     <td>'.$jobTitle.'</td> 
     <td>'.$userteam.'</td> 
     <td>'.$admin.'</td> 
     <td> 
      <a href="deleteUser.php?id='.$userID.'"> 
       <button type="button" name="delete_row" id="delete_row" class="close"> 
        <span title="Delete" aria-hidden="true" class="glyphicon glyphicon-trash"></span> 
        <span class="sr-only">Delete</span> 
       </button> 
      </a> 
     </td> 
    </tr>'; 
} 

echo mysql_error(); 
mysql_close(); 
?> 
+0

是的! OMG它工作!你不知道我有多感激。已經堅持了近一個月,沒有得到我的教授的幫助!我該如何報答你!我甚至沒有rep15來提高答案,只有13。你在推特等?哈哈再次感謝 – JoshM

+0

真棒,我很高興它爲你工作。沒有,沒有Twitter帳戶,只是stackoverflow。讓我知道,如果我可以幫助其他任何事情。上帝保佑! – three3

+0

沒有認真的謝謝,任何想法如何使用複選框在這裏?所以如果一個值被返回,它會檢查模態中的複選框?我不需要太多 – JoshM