AJAX附加问题

Question

i strugle with AJAX, i have difficulties to understand it...my issue is when i append only the data like this $('#blockAlarmeContent').append(data.TNT.RX); it returns the value but when i put the value in html structure and then append the html it doesn"t work..

what i want to do is to display the html structure in blockAlarmeContent (the content of the green header) thank you ! here is my code :

$('#boxLV1').click(function() {
  $('#mainViewContainer').animate({'left': '-30rem'}, 250, function(){

    // Appel AJAX pour récupération du contenu.
    $.ajax({
      url: 'Pages/index.php', //ou il y a le traitement json
      type:  'get',
      dataType: 'json',
      data: 'action=loadBlocSite',
      success:function(data){

                var alarmeContent = '';
                alarmeContent += '<div class="wrapContent">';
                alarmeContent += '<div class="tableHeader">';
                alarmeContent += '<div class="tableCell_title">TNT</div>';
                alarmeContent += '<div class="tableCell_title">FM</div>';
                alarmeContent += '</div>';
                alarmeContent += '<div class="tableCatg">';
                alarmeContent += '<div class="table_row">';
                alarmeContent += '<div class="tableCatg_title">Criticité</div>';
                alarmeContent += '<div class="tableCatg_value">'+ data.TNT.Criticite +'</div>';
                alarmeContent += '<div class="tableCatg_value">'+ data.FM.Criticite +'</div>';
                alarmeContent += '</div>';// fin table-row
                alarmeContent += '<div class="table_row">';
                alarmeContent += '<div class="tableCatg_title">Sans supervision</div>';
                alarmeContent += '<div class="tableCatg_value">'+ data.TNT.Sanssupervision +'</div>';
                alarmeContent += '<div class="tableCatg_value">'+ data.FM.Sanssupervision +'</div>';
                alarmeContent += '</div>';// fin table-row
                alarmeContent += '<div class="table_row">';
                alarmeContent += '<div class="tableCatg_title">Non nominale</div>';
                alarmeContent += '<div class="tableCatg_value">'+ data.TNT.Nonominale +'</div>';
                alarmeContent += '<div class="tableCatg_value">'+ data.FM.Nonominale +'</div>';
                alarmeContent += '</div>';// fin table-row
                alarmeContent += '</div>'; //fin tableCatg
                alarmeContent += '</div>'; //fin wrapContent
        
                $('#blockAlarmeContent').append(alarmeContent);
        //alert(data.TNT.RX);
        //$('#blockAlarmeContent').append(data.TNT.RX);
        //callback(true);
      }
    });
  });
});
    
$('#boxLV2back').click(function() {
  $('#mainViewContainer').animate({'left': '0rem'}, 250, function(){
    //$('#blockAlarmeContent').empty();
  });
});

.clsMainView{
    position: relative;

    height: 50rem;
    width: 30rem;
    overflow: hidden;
}

.clsMainViewContainer{
    position: absolute;
    height: 50rem;
    width: 90rem;
    /*background-color : red;   */
}

.clsBoxLV{
    position: relative;
    float: left;
    margin:1rem;
    padding:0;
    height: calc(100% - 2rem);
    width:28rem;
    background-color : red;
}

.clsBoxLVheader{
    position: relative;
    float: left;
    margin: 0rem;
    padding:0;
    height: 2rem;
    width: 100%;
    background-color : yellow;
}
.clsBoxLVtitle{
    position: relative;
    float: left;
    margin: 0rem;
    padding:0;
    height: 100%;
    line-height: 100%;
    width: calc(100% - 2rem);
}

.clsBoxLVback{
    position: relative;
    float: left;
    margin: 0rem;
    padding:0;
    height: 100%;
    width: 2rem;
}

.clsBoxLVContent{
    position: relative;
    float: left;
    margin: 0rem;
    padding:0;
    height: calc(100% - 2rem);
    width:100%;
}

.clsBlock{
    position: relative;
    float: left;
    margin: 0rem 0rem 0.5rem 0rem;
    padding:0;
    width:100%;
    background-color : green;
}
.clsBlockHeader{
    position: relative;
    float: left;
    margin: 0rem;
    padding:0;
    height:2rem;
    width:100%;
}
.clsBlockHeaderTitle{
    position: relative;
    float: left;
    margin: 0rem;
    padding:0;
    width:calc(100% - 2rem);
}
.clsBlockHeaderReduce{
    position: relative;
    float: left;
    margin: 0rem;
    padding:0;
    width:2rem;
}
.clsBlockContent{
    position: relative;
    float: left;
    margin: 0rem;
    padding:0;
    width:100%;
}
.blockAlarmeContent{
    width: 100%;
    background: pink;
}
.tableHeader {
    position: relative;
    width: calc(40% - 1rem);
    display: block;
    float: right;
    width: 10rem;
    height: 2.5rem;
    border: 1px solid;
    background: bisque;
}
.tableCell_title {
    float: left;
    width: calc(50% - 0rem);
    height: 2.5rem;
    color: #000000;
    text-align: center;
    font-weight: bold;
    border: 1px solid red;
}
.tableCatg_value {
    position: relative;
    width: calc(40% - 1rem);
    display: block;
    float: right;
    width: 10rem;
    height: 2.5rem;
    border: 1px solid;
    background: bisque;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<?php
//-------------------------------- CREATION D'UN WEB SERVICE JSON --------------------------//

    //Création d'une action
    $currentAction = $_REQUEST['action'];
    
    
    switch($currentAction){
        case 'loadBlocSite': echo json_encode(loadBlocSite()); break;       
    }
    
    
    
    function loadBlocSite()
    {
        //Création d'un tableau
        $currentArrayData = array();
        
        //Remplir le tableau
        $currentArrayData['name'] = 'test';
        $currentArrayData['value'] = 'val';
        $currentArrayData['TNT'] = array(
                                'Criticité'            =>   '10',
                                'Sans supervision'  =>   '8',
                                'Non nominale'      =>   '5',
                                '-3dB'              =>   '3',
                                'RX'                =>   '4',
                                'Perte HF'          =>   '15',
                                'Décrochage HS'        =>   '6'
                                );
        $dataContent['FM'] = array(
                            'criticite'         =>   '2',
                            'sanssupervision'   =>   '6',
                            'nonominale'        =>   '0',
                            '-3dB'              =>   '4',
                            'RX'                =>   '9',
                            'Perte HF'          =>   '11',
                            'Décrochage HS'        =>   '1'
        return $currentArrayData;       
    }
    
?>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<body>

<!-- ################################ -->
<!--  CONTENU HTML DE CETTE PAGE -->
<!-- ################################ -->
<div id="mainView" name="mainView" class="clsMainView">
<div id="mainViewContainer" name="mainViewContainer" class="clsMainViewContainer">

<div id="boxLV1" name="boxLV1" class="clsBoxLV">

  <div id="blockAlarme" name="blockAlarme" class="clsBlock">
    <div id="blockAlarmeHeader" name="blockAlarmeHeader" class="clsBlockHeader">
      <div class="clsBlockHeaderTitle">Alarme</div>
      <div class="clsBlockHeaderReduce"><i class="fa fa-window-minimize" aria-hidden="true"></i></div>
    </div>
    <div id="blockAlarmeContent" name="blockAlarmeContent" class="clsBlockContent"></div>
  </div>

  <div id="blockTicket" name="blockTicket" class="clsBlock">
    <div id="blockTicketHeader" name="blockTicketHeader" class="clsBlockHeader">
      <div class="clsBlockHeaderTitle">Ticket</div>
      <div class="clsBlockHeaderReduce"><i class="fa fa-window-minimize" aria-hidden="true"></i></div>
    </div>
    <div id="blockTicketContent" name="blockTicketContent" class="clsBlockContent"></div>
  </div>

  <div id="blockSites" name="blockSites" class="clsBlock">
    <div id="blockSitesHeader" name="blockSitesHeader" class="clsBlockHeader">
      <div class="clsBlockHeaderTitle">Sites</div>
      <div class="clsBlockHeaderReduce"><i class="fa fa-window-minimize" aria-hidden="true"></i></div>
    </div>
    <div id="blockSitesContent" name="blockSitesContent" class="clsBlockContent"></div>
  </div>

  <div id="blockTech" name="blockTech" class="clsBlock">
    <div id="blockTechHeader" name="blockTechHeader" class="clsBlockHeader">
      <div class="clsBlockHeaderTitle">Technicien</div>
      <div class="clsBlockHeaderReduce"><i class="fa fa-window-minimize" aria-hidden="true"></i></div>
    </div>
    <div id="blockTechContent" name="blockTechContent" class="clsBlockContent"></div>
  </div>


</div>



<div id="boxLV2" name="boxLV2" class="clsBoxLV">
  <div id="boxLV2header" name="boxLV2header" class="clsBoxLVheader">
    <div id="boxLV2title" name="boxLV2title" class="clsBoxLVtitle">titre</div>
    <div id="boxLV2back" name="boxLV2back" class="clsBoxLVback"><i class="fa fa-chevron-left fa-lg" aria-hidden="true"></i></div>
  </div>
  <div id="boxLV2Content" name="boxLV2Content" class="clsBoxLVContent">Content</div>
</div>
</div>
</div>

</div>

Answer 1

Because you are overwriting the variable!

alarmeContent = '<div class="wrapContent">';
alarmeContent = '<div class="tableHeader">';  //replaces last line
alarmeContent = '<div class="tableCell_title">TNT</div>';  //replaces last line

It should be +=

alarmeContent = '<div class="wrapContent">';
alarmeContent += '<div class="tableHeader">';
alarmeContent += '<div class="tableCell_title">TNT</div>';