javascript ve php içeren bir div değişen içerik

5 Cevap php

Benim div burada gidiş var ettik ile iframe gibi bir şey yapmak istiyoruz.

Temelde, ben bağlantıları şöyle div içeriğini değiştirmek yapma kadarıyla kazanılmış ettik:

<a href="#self" onClick="document.getElementById('maincontent').innerHTML = '<?php include 'file.php'; ?>';">Open file</a>

Bu ben geri ilk dosyasının içeriğini değiştirmek için içerde başka bir bağlantı yaparsanız ne yazık ki olsa da, sunucu sonsuz bir döngü ve çöker takılıyor, oldukça iyi çalışıyor.

Ben gerçekten sadece dinamik içeriğini değiştirmek için bir yol bulmaya çalışıyorum ve php kullanarak bir dosyadan içeriği almak için. Bu yaklaşan benim yolu tamamen ludicrious ise, i önerileri takdir ediyorum.

5 Cevap

Ben en iyi ve en kolay yolu jQuery kullanmak olduğunu düşünüyorum:

<script type="text/javascript">
$('#addContent').click(function(){
   $("#maincontent").load("file.php");
   return false;
});
</script>

<a href="#" id="addContent">Open File</a>
<div id="maincontent"></div>

Bu script ajax çağrısı kullanarak seçilen div içine file.php içeriğini yükleyecektir.

Bu jQuery's load() fonksiyonu için iyi bir yer gibi görünüyor. Sadece div id vermek linke bir tıklama olay eklemek ve olay div içine php script içeriğini yüklemek var. Eğer yeni verileri yüklediğinizde Belki div için bir sınıf (örneğin, 'updated') ekleyin. Tıklama olay kontrol edebilirsiniz bu şekilde div ('tarih.') Ve bağlantı tekrar tıklandığında geri geçiş.

İstediğiniz farklı bir içerik tutun # Maincontent içinde divs koydu. Divs kimlikleri verin. Bağlantı hide tıklandığında / uygun içerik göstermek

Bu benzer bir konu olduğunu: http://stackoverflow.com/questions/1671667/tabbing-in-php/1671736#1671736

Öncelikle, ben böyle olay işleyicisi bina değil öneririm. Bir şey için size doğru içeriği kaçmak çok dikkatli olmak gerekir. Ben bunu bu şekilde yapardı:

<div id="content1">
<?php include 'file1.php'; ?>
</div>
<div id="content2">
<?php include 'file2.php'; ?>
</div>

ve daha sonra JavaScript ile bu işlemek. Ya innerHTML ayarlayabilirsiniz veya basitçe / gizlemek ilgili divs göstermektedir. Yani:

<script type="text/javascript">
var content = 1;

function swap_content() {
  document.getElementById('maincontent').innerHTML = document.getElementById('content' + content).innerHTML
  if (content == 1) {
    content = 2;
  } else {
    content = 1;
  }
}
</script>
<a href="#" onclick="swap_content();">Open File</a>

Alternatif olarak sadece yerine içeriği kopyalayarak daha onları uygun şekilde göstermek / gizlemek olabilir.

Son olarak, gerekli olmasa da, bu çok daha önemsiz jQuery gibi bir JavaScript kütüphanede yapmaktır.

Eğer AJAX kullanmak gerekir gibi bana geliyor. Clickevent (hangi satır içi kod ile bağlamak gerekir) üzerine, yerine bir XHR isteği ile içerik yüklemek.

Senin için, benim kişisel favori jQuery olacak bir JavaScript Kütüphanesi, bakarak tavsiye ederim hayatı kolaylaştırmak için (www.jquery.com). Yapmaya çalıştığınız ne ulaşmak için sadece yapardın:

$('#id_to_the_a_tag').click(function() {
    $("#maincontent").load("file.php");
    return: false;
});

etiketler