AJAXは問題を追加します

私はAJAXとstrugle、私はそれを理解するのが難しい...私の問題は、このようなデータだけを追加するときです（ '＃blockAlarmeContent'）。append（data.TNT.RX）;それは値を返しますが、html構造体に値を入れてhtmlを追加するとうまくいきません。AJAXは問題を追加します

html構造体をblockAlarmeContent（緑色のヘッダの内容）に表示したいのですが、はあなたに感謝をここに私のコードです：！

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

.clsMainView{ 
 
\t position: relative; 
 

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

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

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

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

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

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

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

 
\t //Création d'une action 
 
\t $currentAction = $_REQUEST['action']; 
 
\t 
 
\t 
 
\t switch($currentAction){ 
 
\t \t case 'loadBlocSite': echo json_encode(loadBlocSite()); break; \t \t 
 
\t } 
 
\t 
 
\t 
 
\t 
 
\t function loadBlocSite() 
 
\t { 
 
\t \t //Création d'un tableau 
 
\t \t $currentArrayData = array(); 
 
\t \t 
 
\t \t //Remplir le tableau 
 
\t \t $currentArrayData['name'] = 'test'; 
 
\t \t $currentArrayData['value'] = 'val'; 
 
\t \t $currentArrayData['TNT'] = array(
 
\t \t \t \t \t \t \t \t 'Criticité' \t \t \t => \t '10', 
 
\t \t \t \t \t \t \t \t 'Sans supervision' \t => \t '8', 
 
\t \t \t \t \t \t \t \t 'Non nominale' \t \t => \t '5', 
 
\t \t \t \t \t \t \t \t '-3dB' \t \t \t \t => \t '3', 
 
\t \t \t \t \t \t \t \t 'RX' \t \t \t \t => \t '4', 
 
\t \t \t \t \t \t \t \t 'Perte HF' \t \t \t => \t '15', 
 
\t \t \t \t \t \t \t \t 'Décrochage HS' \t \t => \t '6' 
 
\t \t \t \t \t \t \t \t); 
 
     $dataContent['FM'] = array(
 
\t \t \t \t \t \t \t 'criticite' \t \t \t => \t '2', 
 
\t \t \t \t \t \t \t 'sanssupervision' \t => \t '6', 
 
\t \t \t \t \t \t \t 'nonominale' \t \t => \t '0', 
 
\t \t \t \t \t \t \t '-3dB' \t \t \t \t => \t '4', 
 
\t \t \t \t \t \t \t 'RX' \t \t \t \t => \t '9', 
 
\t \t \t \t \t \t \t 'Perte HF' \t \t \t => \t '11', 
 
\t \t \t \t \t \t \t 'Décrochage HS' \t \t => \t '1' 
 
\t \t return $currentArrayData; \t \t 
 
\t } 
 
\t 
 
?> 
 
\t \t <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>

出典

2017-08-01 Zee

'alarmeContent ='である右の最初の行のために、しかし、 2行目から最後まで 'alarmeContent + ='に変更する必要があります。そうでなければ、それぞれの行が先行する文字を上書きします。 – Kaddath

最初の行を除くすべての行で= = + =を変更しました。 – Zee

ajaxリクエストは空のresあなたのスニペットでポンセ、だから私たちは本当にそれをテストすることはできません – Kaddath

変数を上書きしているので

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

！

は+ =

出典

2017-08-01 13:22:00 epascarello

ありがとう.. +スニペットを編集+ stil doesn "t仕事 – Zee

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

変数alarmeContentが定義されている数倍であるべきです。文字列を連結する必要があります

alarmeContent +='...';

alarmeContentは「スタンドアロン」変数であり、データオブジェクトの一部ではありません。だから、

$('#blockAlarmeContent').append(alarmeContent);

仕事をする必要があります

出典

2017-08-01 13:23:48 Auskennfuchs

私はあなたが言及しているすべての間違いを編集したが、stilは動作しません – Zee

その後、ブラウザーコンソールの値。追加する前に 'console.log（alarmeContent）'を追加して、正しいデータが含まれているかどうか確認してください。 – Auskennfuchs

そして、データオブジェクトにTNTやFMのようなすべてのサブオブジェクトが含まれていることを確認してください。コンソールもここで助けてくれるはずです。 – Auskennfuchs

あなたは美しい複数行の文字列を持っているので、オブジェクトリテラルを使用することもできます。

alarmeContent = 
`<div class="wrapContent"> 
    <div class="tableHeader"> 
    </div> 
    </div> ` 
;

出典

2017-08-01 13:27:48

@Jones w ..ありがとうございます:) – Zee

答えて

関連する問題