Question

我的项目包含两个导航栏内容，在加载页面时显示两个不同的表格，以及一个搜索栏，用于在不同的表格中显示搜索结果。

问题我面临的问题是，当我在表格中显示搜索结果后点击提交按钮，但再次单击时会显示导航栏内容表格。

我怀疑是否是因为我在显示搜索表时隐藏了导航栏内容表。

我正在寻找一种解决方案，只要点击提交按钮而不刷新页面，我的搜索结果就会被显示。

我的javascript是：

var getNameOfEmployee = document.getElementById('searchBarInputID');

function displayEmployee() {

  if (getNameOfEmployee.value != "") {
    $("#searchForm").submit(function(event) {
      event.preventDefault();
    });
    AjaxGet();
    myFunction();
  } else {
    alert("Please enter any name of employee that you wish to know the extension code of!");
  }
}

function myFunction() {
  var x = document.getElementById("table1ID");
  var y = document.getElementById("table2ID");

  if (x.style.display === "none") {
    x.style.display = "block";
    y.style.display = "block";
  } else {
    x.style.display = "none";
    y.style.display = "none";
  }
}

AjaxGet = function(url, storageLocation, mySuccessCallback) {
  var result = $.ajax({
    type: "GET",
    url: 'http://localhost:8080/path/' + $("#searchBarInputID").val(),
    param: '{}',
    contentType: "application/json",
    dataType: "json",
    success: function(data) {
      storageLocation = data;
      var txt = "";
      var length = Object.keys(storageLocation).length;
      $.each(storageLocation, function(index, value) {
        $("#searchForm #someLabel" + index).val(value.name);
        txt += "<tr><td>" + value.name + "</td><td>" + value.code + "</td></tr>";
      });

      if (txt != "") {
        $("#searchTableID tbody").html(txt);
      }
    }
  }).responseText;
};

Answer 1

您的代码中存在一些冲突。当您阻止提交并且什么也不做时。你也有async方法和成功方法填充表，但你必须在成功方法完成后显示表

var getNameOfEmployee = document.getElementById('searchBarInputID');

function displayEmployee() {

  if (getNameOfEmployee.value != "") {
    $("#searchForm").submit(function(event) {
      event.preventDefault();
      AjaxGet();
    });
  } else {
    alert("Please enter any name of employee that you wish to know the extension code of!");
  }
}

function myFunction() {
  var x = document.getElementById("table1ID");
  var y = document.getElementById("table2ID");

  if (x.style.display === "none") {
    x.style.display = "block";
    y.style.display = "block";
  } else {
    x.style.display = "none";
    y.style.display = "none";
  }
}

AjaxGet = function(url, storageLocation, mySuccessCallback) {
  var result = $.ajax({
    type: "GET",
    url: 'http://localhost:8080/path/' + $("#searchBarInputID").val(),
    param: '{}',
    contentType: "application/json",
    dataType: "json",
    success: function(data) {
      storageLocation = data;
      var txt = "";
      var length = Object.keys(storageLocation).length;
      $.each(storageLocation, function(index, value) {
        $("#searchForm #someLabel" + index).val(value.name);
        txt += "<tr><td>" + value.name + "</td><td>" + value.code + "</td></tr>";
      });

      if (txt != "") {
        $("#searchTableID tbody").html(txt);
      }

      myFunction();
    }
  }).responseText;
};

使提交按钮在每次点击时加载sumbit结果

1 个答案: