2

編集：正しいバージョンのjqueryをリンクすることで解決しました。djangoで構築されたWebアプリケーションがあります。jqueryを使用してページを更新せずに結果を表示する検索ページがあります。検索結果に折りたたみ式を使用したいのですが、機能しません。これがコードです。/queryはresults.htmlをレンダリングします。Search.html：

{% extends "base.html" %}
{% block nav3 %}class="active"{% endblock %}
{% block container %}
<script type="text/javascript">
$(document).ready(function() {
    $("#exec").click(function() {
            var dataString = 'arg1='+ $("input#arg1").val() + '&rel=' + $("input#rel").val() + '&arg2=' + $("input#arg2").val();  
            //alert (dataString);return false;  
            $.ajax({  
                type: "GET",  
                url: "/query",  
                data: dataString,  
                success: function(data) {  
                    $(".res").html(data)
                }  
            });  
            return false; 
  });
});

</script>
<form class="form-horizontal">
    <fieldset>
          <legend>Search Relations</legend>
            <div class="control-group">
                <label class="control-label">   Argument1 </label>
                <div class="controls"><input id="arg1" name="arg1" size="30" type="text"/><br /></div>
                <label class="control-label">   Relation </label>
                    <div class="controls"><input id="rel" name="rel" size="30" type="text" /><br /></div>
                    <label class="control-label">   Argument2 </label>
                    <div class="controls"><input id="arg2" name="arg2" size="30" type="text"/><br /></div>
                </div>
                <div class="control-group">
                    <div class="controls"><button id="exec" class="btn btn-primary"> Search </button></div>
                </div>

    </fieldset>
</form>
<div class="res"></div>
{% endblock %}

results.html：

{% if selected %}

<div class="accordion" id="accordion2">
        {% for rel in selected %}
            <div class="accordion-group">
              <div class="accordion-heading">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" data-target=".res#collapse{{ rel.id }}">
                  {{ rel.arg1 }} / {{ rel.rel }} / {{ rel.arg2 }}
                </a>
              </div>
              <div id="collapse{{ rel.id }}" class="accordion-body collapse">
                <div class="accordion-inner">
                  {{ rel.sentence }}
                </div>
              </div>
            </div>
        {% endfor %}
        {% else %}
                    <p>No matching relations are are available.</p>
</div>
{% endif %}

生成されたhtmlを別のファイルにコピーすると、折りたたみ可能は機能しますが、.html（）とともに使用すると機能しません。必要なファイルはすべてリンクされています。

4

2 に答える 2

2

新しいコンテンツが読み込まれたら、折りたたみ関数を再度呼び出す必要があります。それで...

$.ajax({  
    type: "GET",  
    url: "/query",  
    data: dataString,  
    success: function(data) {  
        $(".res").html(data).collapse();
    }  
});
于 2012-05-10T16:31:03.623 に答える
1

javascriptを介して手動で有効にする必要があります。

$(document).ready(function() {
    $("#exec").click(function() {
            var dataString = 'arg1='+ $("input#arg1").val() + '&rel=' + $("input#rel").val() + '&arg2=' + $("input#arg2").val();  
            //alert (dataString);return false;  
            $.ajax({  
                type: "GET",  
                url: "/query",  
                data: dataString,  
                success: function(data) {  
                    $(".res").html(data).collapse(); // add collapse!
                }  
            });  
            return false; 
  });
});
于 2012-05-10T16:32:53.903 に答える