2011-12-17 100 views
0

我一直在研究過去兩天,並沒有發現任何東西。如何從加載div加載sql /會話內容到一個div

結構:

的index.php:

<head> 
    <script type="text/javascript" src="JS/jquery-1.6.2.js"></script> 
    <script type="text/javascript" src="function.js"></script> 
    </head> 

    <body> 

    <div> 
    <div><a href="" class="testcat" id="1">Show</a></div> *-->if I click this link data loads into DIV below by function.js without reloading* 
    <div id="producten"></div> *-->testpage.php loads here perfect, 
the code of testpage.php makes by while loop other links. 
Here I want to click on a link to load next data in div id=information 
without reloading the index.php so the data in the first DIV stay visible 
and I dont know how to do that* 
    <div id="information"></div> *-->testpage2.php have to load data from sql in this DIV* 
    </div> 

    </body> 

function.js:

$(document).ready(function() { 
    $(".testcat").click(function() { 
     var testid = $(this).attr("id"); 
     var datastring = 'id='+ testid ; 
     $.ajax({ 
      type: "POST", 
      url: "testpage.php", 
      data: datastring, 
      cache: false, 
      success: function(res) { 
      $('#producten').html("<div class='loading'><img src='IMG/loading.gif' /></div>") 
       .hide() 
       .fadeIn(2000, function() { 
       $('#producten').html(res); 
      }) 
      } 
     }); 
     return false; 
    }); 

}); 

testpage.php和testpage2.php是用於SQL數據PDO代碼。

+0

這是一個有點很難理解你想要什麼。你能否顯示'testpage.php'和'testpage2.php'的完整代碼,並指定在哪個第二個div中加載信息? – 2011-12-17 15:54:06

+0

如果我理解正確,那麼您正在關注一個AJAX解決方案。 – 2011-12-17 18:07:22

回答

0

你想與on附上點擊處理,使動態添加的內容仍然向他們提供同樣的AJAX處理程序:

添加任何信息需要從下一個區分點擊,即

<a href='...' data-resultdiv='production' 

然後,清理你的處理了一下:我想,你希望Ajax請求去鏈接的href,那你想顯示「加載」 立即(而不是等待請求完成)。

最後,要取消主播瀏覽到href引用頁面的默認行爲,可以返回false;

$(document).on("click", "a", function() { 
    var href = $(this).attr("href"); 
    var successDiv = $(this).data("resultdiv"); 
    $('#' + successDiv).html("<div class='loading'><img src='IMG/loading.gif' /></div>"); 
    $.ajax({ 
     type: "POST", 
     url: href, 
     data: datastring, 
     cache: false, 
     success: function(res) { 
      $('#' + successDiv).hide().html(res).fadeIn(2000); 
     }  
    } 
    return false; 
}); 

當然如果你只希望這對某些錨運行,你可以把一個選擇你的電話就

$(document).on("click", "a.someClass", function() {