How to append html code block in ajax

Question

I have a code block in my jsp page. I want use this code in ajax with append tag. Here is my code.

for ( var i = 0, len = data.length; i < len; ++i) {
  var listValue = data[i];
  $('.flowers').append(
    '<div class="profile-sidebar" style="width: 250px;">\
      <div class="portlet light profile-sidebar-portlet" \
        data-category="listValue.officeNameNoSpace"> \
        <div class="profile-userpic"> \
          <img src="listValue.imgPath" class="img-responsive" \
          alt=""> \
        </div> \
        <div class="profile-usermenu"></div> \
      </div> \
    </div>'
  );
}

But it still has error.Here is error :

String literal is not properly closed by a matching quote

I tried this way.:

for ( var i = 0, len = data.length; i < len; ++i) {
  var listValue = data[i];
  $('.flowers').append(
    '<div class="profile-sidebar" style="width: 250px;">
      <div class="portlet light profile-sidebar-portlet"
        data-category="listValue.officeNameNoSpace">
        <div class="profile-userpic">
          <img src="listValue.imgPath" class="img-responsive"
          alt="">
        </div>
        <div class="profile-usermenu"></div>
      </div>
    </div>'' +
');

What should i do? Thanks.

Add \ at the end of the unclosed string, i.e. to the `append` strings as the last character on the line — Tushar, Oct 09 '15 at 06:09
I edited my post. It didn't work what given link on the top. — Veysel, Oct 09 '15 at 06:22

Rahul Singh · Accepted Answer · 2015-10-09T11:17:12.247

0

It's a bit old fashioned but why don't you try string concatenation like below:

for ( var i = 0, len = data.length; i < len; ++i) {
                var listValue = data[i];
                $('.flowers').append('<div class="profile-sidebar" style="width: 250px;">'+

                        '<div class="portlet light profile-sidebar-portlet"'+
                            'data-category="'+listValue.officeNameNoSpace+'">'+
                            '<div class="profile-userpic">'+
                                '<img src="'+listValue.imgPath+'" class="img-responsive"  alt="">'+
                            '</div>'+

                            '<div class="profile-usermenu"></div>'+
                        '</div>'+

                    '</div>');
        }

Tell me if it works.

edited Oct 09 '15 at 11:17

answered Oct 09 '15 at 06:30

Rahul Singh

892
9
24

Actually it worked so thank you. but also i cant use ( Listvalue.attribute ) with this way. I tried i.e. 'data-category="'+listValue.imgPath+' but it didnt work . – Veysel Oct 09 '15 at 06:40
I have edited my answer and it should work. Actually what you tried is correct src="'+listValue.imgPath+'" should work correctly. There must be some other error. You should try looking at the browser console to find the error detail. – Rahul Singh Oct 09 '15 at 11:19

How to append html code block in ajax

1 Answers1