{% for val in listArticles %}
     <a href="Article?{{ val.articleId }}" id="item-{{ val.articleId }}"
        class="list-group-item {{ val.online==0 ? 'bg-stripped' : '' }} {{ selectedId==val.articleId ? 'active' : '' }} "><span class="list-title">{{ val.title | raw }} <i>({{ val.date |date('d/m/Y') }})</i></span></a>
 {% endfor %}
 
 <img src="" id="testimg" />
 {% if for =='letter' %}

 <script>
     $(function () {


         $('#list-Article .list-group-item').click(function(e){
             var CCCnt = $('#CCCnt').val();
             console.log('click:'+CCCnt);
             e.preventDefault();
             var idArt = $(this).attr('id').substring(5);
function decodeHTMLEntities(text) {
  return $("<textarea/>")
    .html(text)
    .text();
}
             $.ajax({
                 data: {idArt:idArt},
                 type: 'post',
                 url: 'ajax/getAjaxJsonArticle',
                 success: function (ret) {
                    // console.log('ddd');
                     console.log(ret.A);


                    txt = ret.A;
//                     $('#myGrid').append('<tr><td><b>' + txt.title + '</b><br>'+ txt.about + '</td><td></td></tr>');

                     var DATASEDITOR = CKEDITOR.instances['myGrid'].getData();

                     //var rulimage = "http://www.ancienslouislumiere.org/Graphisme/mediasSpip/arton" + txt.articleId+".jpg";

                     var rulimage = ret.U;


                    var about = decodeHTMLEntities(txt.about);

                     var textstripedtag = about.substring(0,450).replace( /<.*?>/g, '' );

                     if(CCCnt != '1'){
                         CKEDITOR.instances['myGrid'].setData(DATASEDITOR + '<table cellspacing="10" cellpadding="10" class="w580"  width="580" style="border-collapse: separate;border-spacing: 10px">'
                         +'<tr><td class="w275"  width="275"><img src="' + rulimage+ '" style="max-width:400px;width:100%" /></td>'
//                         +'<td class="w30"  width="30" class="w30"></td>'
                         + '<td class="w275"  width="275" style="vertical-align: top;text-align: justify;">'
                         +'<span style="font-weight: bold;color: #006666;text-transform: uppercase;font-size: 15px;">'
                         + txt.title + '</span><br/><br>'+ textstripedtag + '...<br/>'
                         +'<a href="http://www.ancienslouislumiere.org/Article?' + txt.articleId +'">Lire la suite</a></td>'
                         +'</tr></table>');
                          CCCnt =  $('#CCCnt').val('1');
                     }else{
                         CKEDITOR.instances['myGrid'].setData(DATASEDITOR + '<table cellspacing="00" cellpadding="0" class="w580"  width="580" style="border-collapse: separate;border-spacing: 10px">'
                         +'<tr><td class="w275"  width="275" style="vertical-align: top;text-align: justify;">'
                         +'<span style="font-weight: bold;color: #006666;text-transform: uppercase;font-size: 15px;">'
                         + txt.title + '</span><br/><br>'+ textstripedtag + '...<br/>'
                         +'<a href="http://www.ancienslouislumiere.org/Article?' + txt.articleId +'">Lire la suite</a></td>'
//                         +'<td class="w30"  width="30" class="w30"></td>'
                         +'<td class="w275"  width="275"><img src="' + rulimage+ '" style="max-width:400px;width:100%" /></td></tr></table>');

                         CCCnt =  $('#CCCnt').val('0');
                     }



                 }
             });

         });
     });
 </script>
 {% endif %}