2013-01-21 92 views
0

我有一個單一的網頁,我有插入工作正常,但我似乎無法更新提交後的#results div。這些值被插入到數據庫中,如果我硬刷新它們正在出現。但不是用jQuery AJAX刷新。我是Ajax的新手,所以任何幫助都會非常感激,並且對代碼結構或不良習慣發表任何評論,請評論,因爲我正在嘗試學習正確的編程方式。插入後不工作jQuery AJAX刷新

這裏是我的代碼:

$(document).ready(function(){   

$("form#addTodo").submit(function(){ 
    alert('hello world'); // ensure function is running 

    var post_title = $('input#post_title').val(); // take values from inputs 
    var post_content = $('input#post_content').val(); 

    $.ajax({ 
     type: "POST", 
     url: "add.php", 
     data: "post_title=" + post_title + "&post_content=" + post_content, 
     success: function() { 
      // alert('success'); // ensure success 
      $('#results').fadeOut('slow').load('include/results.php').fadeIn('slow');    
     } 
    }); 


    $('input#post_title').val(''); // clear form fields 
    $('input#post_content').val(''); 

    return false; 
}); 

});

這裏是results.php文件:

<?php 

$sql = $db->query('SELECT id, post_title, post_content FROM posts ORDER BY post_title ASC'); 

$results = $sql->fetchALL(PDO::FETCH_OBJ); 
$count_posts = count($results); 

?> 

<?php if (have_posts() == true) : ?> 
    <div class="accordion" id="accordion_main"> 
     <?php foreach($results as $entry): ?> 
      <div class="accordion-group"> 
       <div class="accordion-heading"> 
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion_main" href="#collapse-<?php echo $entry->id; ?>">  
         <?php echo $entry->post_title; ?> 
        </a>  
       </div> 
       <div id="collapse-<?php echo $entry->id; ?>" class="accordion-body collapse"> 
        <div class="accordion-inner"> 
         <p class="target"><?php echo $entry->post_content; ?></p> 
         <p><a href="edit.php?id=<?php echo $entry->id; ?>">Edit</a> <a href="delete.php?id=<?php echo $entry->id; ?>" onclick="return confirm('Are you sure you wish to delete this post?');">Delete</a></p>      
        </div> 
       </div> 
      </div> 
     <?php endforeach; ?>     
    </div> 
<?php else: ?> 
    <h3>There are no posts to display at this time.</h3> 
<?php endif; ?> 

,當它被包含的index.php這工作得很好,我只是無法得到它的發佈數據到數據庫後刷新。

<?php 
require_once 'includes/db.php'; 
require_once 'includes/functions.php'; 
?> 

<?php get_header(); ?> 

<div id="results"> 
<?php include_once 'includes/results.php'; ?> 
</div> 

<hr /> 
<p>Add New Post</p> 

<form id="addTodo" action=""> 

<div> 
    <label for="post_title">Post Title</label> 
    <input id="post_title" name="post_title"> 
</div> 

<div> 
    <label for="post_content">Post Content</label> 
    <input id="post_content" name="post_content"> 
</div> 

<div> 
    <button id="submit" type="submit"> 
     Save 
    </button> 
</div> 

</form> 

<?php get_footer(); ?> 

我應該提到,我還沒有進行表單驗證。任何幫助非常感謝,謝謝。

回答

0

爲什麼不直接從成功中返回數據?並使用它來使你的html輸入

success:function(returnedData) { 
    if (returnedData.status = 'successful') { 
     //use javascript to append the data for example like 
     //returnedData.message to make html and insert into your current html 
    }  
} 

注意:returnedData必須推出你的php以json格式。

0

你可以找到一個類似的回答您的要求,如果你讀到這線程我最近回答:Jquery Mobile Post to PHP (same page)

但你必須做出一些調整你的上下文;-)! 我認爲這是獨特的解決方案,如果你使用獨特的文件腳本

0

要插入從PHP文件返回的數據只需使用$(「元素ID或類」).HTML()函數插入數據或HTML您文檔的特定區域