Question

单击2个不同的选项卡时，我会显示一组10个搜索字段。两个选项卡都有相同的10个字段集。我想使用相同的DIV并根据特定的TAB选择，而不是使用不同的DIV，我只想改变我的AJAX REST端点。

请帮助如何在HTML中为不同的TABS使用相同的DIV。

1）HTML：下面的代码显示了2个标签和2个DIV - 实体和声明。想要只使用1个DIV，因为ENTITY和CLAIM DIV都有相同的字段集。

<script>

var tabSelected = '';
var userID = getParameterByName("userID");
//alert(userID);

function setUserID() {
    //userID = getParameterByName("userID");
    document.getElementById("userID").value = userID;
    //alert(document.getElementById("userID").value);
}       

function getParameterByName(variable) {
      var query = window.location.search.substring(1);
      var vars = query.split("&");
      for (var i=0;i<vars.length;i++) {
        var pair = vars[i].split("=");
        if (pair[0] == variable) {
          return pair[1];
        }
      } 
      //alert('Query Variable ' + variable + ' not found');
} 


function openTab(evt, tabName) {
    var i, tabcontent, tablinks;

    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    } 
    document.getElementById(tabName).style.display = "block";
    evt.currentTarget.className += " active";

    if (tabName == "entity") {
        tabSelected = "getEntity";
        alert(tabSelected);
    } else if (tabName == "claim") {
        tabSelected = "getClaim";
        alert(tabSelected);         
    }

}

document.getElementById("defaultOpen").click();

</script>

2）JavaScript：

$("#simplepost").click(function(e) {
    //getUsersAndDisplay();
    tabSelected = "getEntity";
    //alert(tabSelected);
    convertJSONToTable(tabSelected);

});
//GETUSERS Button ends

$("#claimpost").click(function(e) {
    tabSelected = "getClaim";
    //alert(tabSelected);
    convertJSONToTable(tabSelected);

});

3）AJAX：

function convertJSONToTable(tab) {

    var MyFormData = $("#ajaxform").serializeJSON();
    console.log(MyFormData);
    var MyFormJSON = JSON.stringify(MyFormData,null, 2);
    console.log(MyFormJSON);

    var urlSelected = '';

    if (tab == "getEntity") {
        urlSelected = "http://localhost:8089/restserver/rest/getEntity";
    } else if (tab == "getClaim"){
        urlSelected = "http://localhost:8089/restserver/rest/getClaim";
    }


     $.ajax({
     url : urlSelected,

     type: "POST",
     contentType: "application/json",
     data : MyFormJSON,
     success: function(response) {

        //Store result in Session and Enable Download button
        response = removeAllBlankOrNull(response);
        var cacheString = JSON.stringify(response, null, 2);
        console.log("-----------------> cacheString is: " + cacheString);

        var sessionresponse = sessionStorage.setItem("i98779", cacheString); 
        console.log("----------------------------------------------------------------");
        console.log("Response is: " + response);
        console.log("----------------------------------------------------------------");                        

        if(cacheString != null && cacheString != "[]") {
            document.getElementById("download").disabled = false;
        }
        createTable2(response);
     },

     error: function(jqXHR, textStatus, errorThrown)
     {
        console.log(errorThrown);
        alert("Error: " + errorThrown); 
     }

     });

 }   //convertJSONToTable() Ends here

AJAX REST-ENDPOINT CALL：想要根据获得正确值的变量调用相同的方法。但问题是如何为不同的TAB选择显示相同的DIV。

Private Sub CheckBox1_Click()
    If CheckBox1.Value = True Then
        CheckBox1.BackColor = vbYellow
    Else
        CheckBox1.BackColor = vbWhite
    End If
End Sub

Answer 1

您只需要一个表单，因此只需要一个＆＃34; tab＆＃34;。但是使用两个按钮可以让它看起来像有两个标签。这些按钮中的每一个都显示/隐藏表单中的提交按钮。

表单必须提交按钮。一个是发送变量＆＃34;声明＆＃34;到ajax函数。另一个是发送＆＃34;实体＆＃34;到ajax函数。

HTML

<div class="tab">
  <button class="tablinks" name="entity" id="open-entity">Entity
    Search</button>
  <button class="tablinks" name="claim" id="open-claim">Claim
    Search</button>
</div>

<div>
  <form>
    <!--Input fields goes here-->

    <!--Two submit buttons in the same form, each is sending its individual   variable to your ajax function-->
    <input type="button" id="submit-entity" value="Download"
                disabled=true align="center">
    <input type="button" id="submit-claim" value="Download"
                disabled=true align="center"></td>
  </form>
</div>

JS

$(function() {
//Define which form should be shown on page-load, in this case "claim"
$('#submit-claim').show();
$('#submit-claim').hide();

//Show button to submit claim-form, hide button for entity-form
$('#open-claim').click(function(){
  $('#submit-claim').show();
  $('#submit-claim').hide();
});

//Hide button to submit claim-form, show button for entity-form
$('#open-entity').click(function(){
  $('#submit-entity').show();
  $('#submit-entity').hide();
});

//Call ajax if submit button is clicked
$('#submit-entity').click(function(){
  convertJSONToTable('entity');
});

$('#submit-claim').click(function(){
  convertJSONToTable('claim');
});
});

第二个选项：

您可以在表单中添加隐藏的输入字段，而不是使用两个提交按钮。如果用户点击#open-claim按钮，则输入字段的值将更改为“声明”。如果点击open-entity，其值将获得＆＃39;实体＆＃39;。

$('#open-claim').click(function(){
  $('#form-type').val('claim');
});

$('#open-entity').click(function(){
  $('#form-type').val('entity');
});

然后，当单击表单的提交按钮时，输入字段的值将被发送到ajax函数。

$('#submit-btn').click(function(){
  convertJSONToTable($('#form-type').val());
});

对于不同的HTML选项卡具有相同的DIV显示

1 个答案: