Ajax JQuery demande et réponse de Django Modèle

Question

Selon jro suggestion Je modifie ma question et le problème que j'ai.

== == URL

url('^$','pMass.views.index', name='index') #Index is the main view with form input type text and submit 
              #If search value is match then it will render result.html template 

== VIEW ==

#View will find search value and render result.html template if request is not ajax 
#If request is ajax then same view will create new queryset and render to same template page (result.html) 

def index(request): 
    error = False 
    cid = request.GET 

    if 'cnum' in request.GET: 
     cid = request.GET['cnum'] 

    if not cid: 
     error = False 
     expcount = Experiment.objects.count() 
     allmass = SelectedIon.objects.count() 

    if request.is_ajax(): 
     value = request.GET.get('value') 
     if value is None: 
      result = SelectedIon.objects.filter(monoiso__iexact=value).select_related() 
      template = 'result.html' 
      data = { 
       'results':result, 
      } 
      return render_to_response(template, data,   
      context_instance=RequestContext(request)) 

    else: 

     defmass = 0.000001 
     massvalue = float(cid) 
     masscon = defmass * massvalue 
     highrange = massvalue + masscon 
     lowrange = massvalue - masscon 

     myquery = SelectedIon.objects.select_related().filter(monoiso__range=(lowrange, highrange)) 
     querycount = myquery.count() 

     return render_to_response('result.html', {'query': cid, 'high':highrange, 'low':lowrange, 'sections':myquery, 'qcount':querycount, }) 

    return render_to_response('index.html', {'error': error, 'exp': expcount,'mass':allmass,}) 

== == result.html

# I have divided template into two container: main (left) & container (right) 
# Left container is for search match (e.g value/title) with hyperlink 
# Right container is for detail of the match value 
# For right container I have created jQuery tabs (tab1, tab2, tab3) 
# The content of the right container in the tab will update according to the link in the left. 
#Layout is given below 

       ! tab1 ! tab2 ! tab3 !    
-------------------------------------------------------------------------    
! 434.4456 ! Show Default Match 1 Record       ! 
! 434.4245 ! & left hyperlink onclick show it's value record  ! 
! 434.4270 ! detail. I have design tab with JQuery     ! 
! 434.2470 !              ! 
! 434.4234 !              ! 
------------------------------------------------------------------------- 

== conteneur gauche (result.html) de ==

#I am looping through the queryset/list of values that was match with template for tag 
#The template variable is given a hyperlink so after clicking it's detail information 
will be shown on right container 

<script type="text/javascript" src="/media/jquery-1.2.6.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $('#a.id').click(function(){ 
     value = $ ('a.id').val(); 
     $('div#tab_content')empty().load('{%url index%}?query'= +value); 
     }); 
    }); 

<div id="main"> 
    <table align="center" cellspacing="0" cellpadding="4" border="1" bordercolor="#996600"> 
      <tr> 
       <th>Match</th> 
      </tr>  
       {% for section in sections %} 
      <tr> 
       <td><a href="#" id="{{%section.monoiso%}}">{{section.monoiso}}</a></td> 
      </tr> 
       {% endfor %} 
     </table> 
</div> 

de == PROBLÈMES de ==

• Je ne sais pas comment obtenir la valeur lien!
• ajax jQuery demande lien hypertexte (conteneur de gauche) ne fonctionne pas
• Je ne suis pas sûr de l'index chargement vue de result.html est correct
• J'envoie les données au serveur de l'hyperlien avec <a href.... id="{{%section.monoiso%}}" , comment puis-je utiliser même valeur d'ID pour l'interrogation dans la vue d'index et la réponse dans le result.html?
• Comment rendre la réponse dans le bon conteneur?

Suggestions, commentaires et réponses sont appréciés.

Answer 1

Quelques points de départ. Premièrement, la vue que vous appelez via Ajax ne doit pas nécessairement renvoyer un objet json: les données peuvent également être renvoyées sous la forme d'une chaîne en utilisant django.http.HttpResponse (ou render_to_response, ce qui se résume à la même chose). Cela signifie que vous pouvez également renvoyer un modèle entièrement généré comme d'habitude.

En supposant que votre vue affichée se trouve à /index/(?<tab>\d+)/(?<match>\d+)/ (tab étant l'index de tabulation, match étant l'indice de jeu), votre javascript pourrait ressembler à ceci:

$("ul.tabs li").click(function() { 
    $("ul.tabs li").removeClass("active");  // Remove any "active" class 
    $(this).addClass("active");    // Add "active" class to this tab 
    $(".tab_content").hide();     // Hide all tab content 

    // Construct the url based on the current index 
    match_name = $("ul.match li").index($("ul.match li.active")); 
    url = "/index/" + $("ul.tabs li").index($(this)) + "/" + match_name + "/"; 

    // Asynchronous ajax call to 'url' 
    new $.ajax({ 
     url: url, 
     async: true, 
     // The function below will be reached when the request has completed 
     success: function(transport) 
     { 
      $(".tab_content").html(transport); // Put data in the div 
      $(".tab_content").fadeIn();  // Fade in the active content 
     } 
    }); 
}); 

Je n'ai pas testé, mais quelque chose le long ces lignes devraient faire. Notez que pour que cela fonctionne avec votre code actuel, la fonction index doit afficher pour permettre un paramètre. Si vous voulez juste tester avec la même page pour chaque onglet, faites ressembler l'url comme ceci: url = "/index/"; de sorte que cela fonctionnera très probablement tout de suite.