Django + Jquery、AJAX divを拡張する

ユーザーがリンクをクリックしたときに、AJAX経由でコンテンツを読み込むリンクの下のdivを開くことはできますか？Django + Jquery、AJAX divを拡張する

ありがとうございました。私は方法を見つけることができません。ページを読み込んでいる間、サーバ側のdivを静的に埋めているだけですが、内容が多すぎます。

誰かがあれば、特定のDjangoバージョンのソリューションを探していますか？

2009-08-09 CharlesS

jQuery.loadはまさにそのん：

$("div#my-container").load("/url/to/content/ #content-id")

これは、/url/to/content/からコンテンツをフェッチ#content-idことによってそれをフィルタリングし、div#my-containerに結果を挿入します。

編集：これはすべてクライアントサイドなので、これについてはDjango固有のものはまったくありません。しかし、あなたが主張すれば...

templates/base.html

<html> 
    <head> 
     <title>My funky example</title> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
     {% block extrahead %}{% endblock %} 
    </head> 
    <body> 
     {% block content %}{% endblock %} 
    </body> 
</html>

templates/page.html

{% extends "base.html" %} 
{% block extrahead %} 
    <script type="text/javascript"> 
     $(function(){ 
      $('a.extendable').click(function(){ 
       $(this).after($('<div class="external-content"></div>').load($(this).attr('href') + ' #content')); 
       return false; 
      }); 
     }); 
    </script> 
{% endblock extrahead %} 
{% block content %} 
    <p>Hi! <a href="/external/content/a/" class="extendable">Click here</a> and wait for something funny to happen!</p> 
    <p><a href="/external/content/b/" class="extendable">This link</a> is cool, too!</p> 
{% endblock content %}

templates/a.html

{% extends "base.html" %} 
{% block content %} 
    <div id="content">so long and thanks for all the fish</div> 
{% endblock %}

templates/b.html

{% extends "base.html" %} 
{% block content %} 
    <div id="content">Don't panic</div> 
{% endblock %}

urls.py

from django.conf.urls.defaults import * 
urlpatterns = patterns('django.views.generic.simple', 
    (r'^$',     'direct_to_template', {'template': 'page.html'}), 
    (r'^external/content/a/$', 'direct_to_template', {'template': 'a.html'}), 
    (r'^external/content/b/$', 'direct_to_template', {'template': 'b.html'}), 
)

あなたはすべてのコードhereをダウンロードすることができます。

出典

2009-08-09 21:13:59

このような何かがうまくいく

<html> 
<head> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
    <script type="text/javascript"> 
    function loadDiv() { 
     $.get("test.php", function(data){ 
      $('#thediv').html(data); 
     }); 
    } 

</script> 
</head> 
<body> 
<a href="javascript:loadDiv();">Load Div</a> 
<div id="thediv"></div> 

</body> 
</html>

出典

2009-08-09 21:08:58 Rob

Django + Jquery、AJAX divを拡張する

答えて

関連する問題