Question

我正在尝试使用AJAX过滤列表，但有一个问题，即html仅显示最后一个元素。我读了很多类似的SO问题，但无济于事。我有变量，所以我不知道出了什么问题。

Function funcA() As String
  funcA = "whatever"
End Function

Function funcB() As String
  Dim i As String
  i = funcA()
  funcB = i
End Function

Sub MAIN()
    MsgBox funcB()
End Sub

HTML

$("#programme").change(function () {
        event.preventDefault();
        var selected_programme = $(this).val();
      $.ajax({
        url: '{% url "gps_list" %}',
        data: {
          "selected_programme": selected_programme,
        },
        dataType: 'json',
        success: function(response) {
          var json = $.parseJSON(response);
              $.each( json, function( key, values ) {

                  var valname = values.fields.name;
                  var valco = values.fields.country;
                  var valpro = values.fields.programme_type;
                  var valwhat = values.fields.what;

                  console.log(valname, key);
                  console.log(valco);
                  console.log(valpro);
                  console.log(valwhat);

                    $("#names").html(valname);
                    $("#country").html(valco);
                    $("#pro_types").html(valpro);
                    $("#whats").html(valwhat);
              });
          },
          error: function(response) {
            alert("oh no!");
          }
      });
    });

Answer 1

执行此操作时：

<web-app xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
                http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
version="3.0">

<context-param>
    <param-name>primefaces.CLIENT_SIDE_VALIDATION</param-name>
    <param-value>true</param-value>
</context-param>
<context-param>
    <param-name>facelets.DEVELOPMENT</param-name>
    <param-value>true</param-value>
</context-param>

<context-param>
    <param-name>facelets.REFRESH_PERIOD</param-name>
    <param-value>0</param-value>
</context-param>

<context-param>
    <param-name>javax.faces.PROJECT_STAGE</param-name>
    <param-value>Development</param-value>
</context-param>

<servlet>
    <servlet-name>Faces Servlet</servlet-name>
    <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
    <load-on-startup>1</load-on-startup>
</servlet>

<!-- Map these files with JSF -->
<servlet-mapping>
    <servlet-name>Faces Servlet</servlet-name>
    <url-pattern>*.jsf</url-pattern>
</servlet-mapping>
<servlet-mapping>
    <servlet-name>Faces Servlet</servlet-name>
    <url-pattern>*.faces</url-pattern>
</servlet-mapping>
<servlet-mapping>
    <servlet-name>Faces Servlet</servlet-name>
    <url-pattern>*.xhtml</url-pattern>
</servlet-mapping>

<!-- Welcome page -->
<welcome-file-list>
    <welcome-file>selectFilmCinema.xhtml</welcome-file>
</welcome-file-list>

您正在覆盖之前的所有元素。由于您是循环进行的，因此自然地，您只会看到最后一次写入的结果。

您需要：

写入不同元素，或
追加而不是替换（通过$("#names").html(valname); $("#country").html(valco); $("#pro_types").html(valpro); $("#whats").html(valwhat);）

具体细节取决于您的HTML结构。

（现在您已经添加了HTML。）我将以不同的方式构造它。开始时根本没有任何行（或没有占位符“正在加载”行）。然后构建行，并在有响应时附加它们。遵循以下原则：

append

var entryTemplate = 
    '<div>' +
        '<div class="row">' +
            '<div class="col-md-12">' +
                '<h2 class="my-4">' +
                    '<span class="names"></span>' + // *** Made it a span inside the h2
                    '<small class="country"></small>' +
                '</h2>' +
            '</div>' +
        '</div>' +
        '<div class="row">' +
            '<div class="col-md-12">' +
                '<div class="card mb-4">' +
                    '<div class="card-body">' +
                        '<h2 class="card-title pro_types"></h2>' +
                        '<p class="card-text whats"></p>' +
                    '</div>' +
                '</div>' +
            '</div>' +
        '</div>' +
    '</div>';

function success(response) {
    var json = $.parseJSON(response);
    var container = $("#container");
    container.empty(); // Removes any previous rows
    $.each( json, function( key, values ) {
        var fields = values.fields;
        var entry = $(entryTemplate);
        entry.find(".names").text(fields.name);
        entry.find(".country").text(fields.country);
        entry.find(".pro_types").text(fields.programme_type);
        entry.find(".whats").text(fields.what);
        container.append(entry.children());
    });
}

success(
    '[' +
        '{"fields": {' +
            '"name": "Name 1",' +
            '"country": "Country 1",' +
            '"programme_type": "PT 1",' +
            '"what": "What 1"' +
        '}},' +
        '{"fields": {' +
            '"name": "Name 2",' +
            '"country": "Country 2",' +
            '"programme_type": "PT 2",' +
            '"what": "What 2"' +
        '}},' +
        '{"fields": {' +
            '"name": "Name 3",' +
            '"country": "Country 3",' +
            '"programme_type": "PT 3",' +
            '"what": "What 3"' +
        '}}' +
    ']'
);

setTimeout(function() {
    success(
        '[' +
            '{"fields": {' +
                '"name": "Name 4",' +
                '"country": "Country 4",' +
                '"programme_type": "PT 4",' +
                '"what": "What 4"' +
            '}},' +
            '{"fields": {' +
                '"name": "Name 5",' +
                '"country": "Country 5",' +
                '"programme_type": "PT 5",' +
                '"what": "What 5"' +
            '}},' +
            '{"fields": {' +
                '"name": "Name 6",' +
                '"country": "Country 6",' +
                '"programme_type": "PT 6",' +
                '"what": "What 6"' +
            '}}' +
        ']'
    );
}, 2000);

$。每个仅显示最后一个元素

1 个答案: