Django + Jquery, extension AJAX div

Comment puis-je, lorsqu'un utilisateur clique sur un lien, ouvrir une div juste sous le lien qui charge son contenu via AJAX?Django + Jquery, extension AJAX div

Merci pour l'aide; Je ne peux pas savoir comment. Juste en remplissant statiquement le div du côté du serveur pendant le chargement de la page fonctionne bien, mais c'est trop de contenu pour cela.

Je suis à la recherche d'une version spécifique de Django si quelqu'un en a une?

Source

2009-08-09 CharlesS

jQuery.load fait exactement cela:

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

cette récupère le contenu de /url/to/content/, il filtre par #content-id et injecte le résultat dans div#my-container.

edit: il n'y a vraiment rien de spécifique à Django à ce sujet, puisque tout est côté client. Mais si vous insistez ...

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

Vous pouvez télécharger tout le code here.

Source

2009-08-09 21:13:59

Quelque chose comme cela fonctionnera

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

Source

2009-08-09 21:08:58 Rob

Django + Jquery, extension AJAX div

Répondre

Questions connexes