Django + Jquery, expandierende AJAX div

Wie kann ich, wenn ein Benutzer auf einen Link klickt, ein div direkt unter dem Link öffnen, der seinen Inhalt über AJAX lädt?Django + Jquery, expandierende AJAX div

Danke für die Hilfe; Ich kann nicht herausfinden, wie ich es machen soll. Das div auf der Serverseite statisch zu füllen, während die Seite geladen wird, funktioniert gut, aber es ist zu viel Inhalt dafür.

Ich bin auf der Suche nach einer bestimmten Django-Version der Lösung, wenn jemand einen hat?

Quelle

2009-08-09 CharlesS

jQuery.load tut genau das:

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

diese holt den Inhalt von /url/to/content/, filtert sie durch #content-id und spritzt das Ergebnis in div#my-container.

edit: da gibt es wirklich nichts Django-spezifisches daran, da es alles clientseitig ist. Aber wenn Sie darauf bestehen ...

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

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'}), 
)

können Sie laden den gesamten Code here.

Quelle

2009-08-09 21:13:59

So etwas wie dies funktionieren wird

<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>

Quelle

2009-08-09 21:08:58 Rob

Django + Jquery, expandierende AJAX div

Antwort

Verwandte Themen