Read more and less not working after displaying the data from ajax

Question

When I reload the page, I call ajax to get the data and display it on the screen. As of now, I am displaying paragraphs and If the content is more than 40 words then I am displaying read more, and once expand then I am displaying the read less but it's not working.

Do i need to use like this $(document).on('each', '.countParawords', function(e){ }); ?

<style>
.empList .more-text{display: none;}
.less{display: none;}
</style>

<div class="empList"> <ul> </ul></div>

  <script>
  $(document).ready(function() {
    $.ajax({
      url: 'process.php',
      method: 'post',
      dataType: "json",
      data: {
        action: "employeelist"
      },
      success: function(data) {
        var trHTML = '';

        $.each(data, function(i, item) {
          trHTML += '<li><div class="employeeShareWrap"><p class="countParawords">' + item.desc + '</p></div></li>';
        });
        $('.empList ul').append(trHTML);
      }
    });
    var maxLength = 20;
    var moretxt = "...Read More";
    var lesstxt = "...Read Less";
    $(".countParawords").each(function() {
      var myStr = $(this).text();
      if ($.trim(myStr).length > maxLength) {
        var newStr = myStr.substring(0, maxLength);
        var removedStr = myStr.substring(maxLength, $.trim(myStr).length);
        $(this).empty().html(newStr);
        $(this).append('<span class="more-text">' + removedStr + '</span>');
        $(this).append(' <a href="javascript:void(0);" class="read-more more">' + moretxt + '</a>');
      }
    });
    $(".read-more").click(function() {
      if ($(this).hasClass("more")) {
        $(this).removeClass("more");
        $(this).text(lesstxt);
        $(this).siblings(".more-text").show();
      } else {
        $(this).addClass("more");
        $(this).text(moretxt);
        $(this).siblings(".more-text").hide();
      }

    });

  });

</script >

Yes you need to bind your dynamically created elements to static element . i.e: `$(document).on('click','.read-more',function() {..` — Swati, Dec 14 '20 at 13:37
I think there is some issue with this script $(".countParawords").each(function() { because it's not loading when relad the page. — user9437856, Dec 14 '20 at 14:14

Ashkan Mobayen Khiabani · Answer 1 · 2020-12-14T13:46:28.400

1

As the content that is added comes from ajax (not there when $(".read-more") is executed. yes you should use .on('click...) however if the added element with class .read-more is also added by ajax, then you should use one of it ancestors (that exists when the code executes). example:

<div id="more-container"></div>

You should do it like:

$('#more-container').on('click', '.read-more', function() {});

not

$('.read-more').on('click', function() {});

So this part of your code:

$(".read-more").click(function() {
      if ($(this).hasClass("more")) {
        $(this).removeClass("more");
        $(this).text(lesstxt);
        $(this).siblings(".more-text").show();
      } else {
        $(this).addClass("more");
        $(this).text(moretxt);
        $(this).siblings(".more-text").hide();
      });

should be changed to:

$(document).on('click','.read-more',function() {
      if ($(this).hasClass("more")) {
        $(this).removeClass("more");
        $(this).text(lesstxt);
        $(this).siblings(".more-text").show();
      } else {
        $(this).addClass("more");
        $(this).text(moretxt);
        $(this).siblings(".more-text").hide();
      }
);

edited Dec 14 '20 at 13:46

answered Dec 14 '20 at 13:41

Ashkan Mobayen Khiabani

33,575
33
102
171

I have to change this code $(".countParawords").each(function() {? – user9437856 Dec 14 '20 at 13:42
Yes, I tried but I am not getting read more option when page reload. Please check my script here https://prnt.sc/w2fxuh – user9437856 Dec 14 '20 at 13:50
well screen shot is not much helpful, as your code may have some other problems elsewhere that may effect the result. if you could create an snippet that would be nice – Ashkan Mobayen Khiabani Dec 14 '20 at 13:54
Yes, you are right snippet can help but the ajax part will not work in the snippet because I am getting the data from the database. – user9437856 Dec 14 '20 at 14:01
When I reload the page then initial I am not getting the read more option. – user9437856 Dec 14 '20 at 14:07

score 0 · Accepted Answer · answered Dec 14 '20 at 14:14

You can put your code of appending a tag or span inside success function of ajax then put the value trHTML in some variable then use .find(".countParawords").. to iterate through divs and finally append the values inside ul tag.

Demo Code :

//suppose this is return data
var data = [{
  "desc": "abcddcdcdcdcdc fvbdfbrebrbe "
}, {
  "desc": "abcddcdcdcdcdc fvbdfbrebrbe egerg1vbgbtntn"
}, {
  "desc": "abcddcdcdcdcdc fvbdfbrebrbe egergthtjtjttt"
}]
var trHTML = '';
var maxLength = 20;
var moretxt = "...Read More";
var lesstxt = "...Read Less";
/*$.ajax({
  url: 'process.php',
  method: 'post',
  dataType: "json",
  data: {
    action: "employeelist"
  },
  success: function(data) {*/
$.each(data, function(i, item) {
  trHTML += '<li><div class="employeeShareWrap"><p class="countParawords">' + item.desc + '</p></div></li>';
});
//get html string inside $html create div and put innerhtml inside div
var $html = $('<div />', {
  html: trHTML
});
//find countParawords and replace it
$html.find(".countParawords").each(function() {
  var myStr = $(this).text();
  if ($.trim(myStr).length > maxLength) {
    var newStr = myStr.substring(0, maxLength);
    var removedStr = myStr.substring(maxLength, $.trim(myStr).length);
    $(this).empty().html(newStr);
    $(this).append('<span class="more-text">' + removedStr + '</span>');
    $(this).append(' <a href="javascript:void(0);" class="read-more more">' + moretxt + '</a>');
  }
});
//append it finally
$('.empList ul').append($html.html());

/*  }
});*/


$(document).on('click', '.read-more', function() {
  if ($(this).hasClass("more")) {
    $(this).removeClass("more");
    $(this).text(lesstxt);
    $(this).siblings(".more-text").show();
  } else {
    $(this).addClass("more");
    $(this).text(moretxt);
    $(this).siblings(".more-text").hide();
  }

});

.empList .more-text {
  display: none;
}

.less {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="empList">
  <ul> </ul>
</div>

I am getting lesstxt is not defined and Uncaught ReferenceError: moretxt is not defined in the console if I click on read more and read less — user9437856, Dec 14 '20 at 14:27
did you add `var moretxt = "...Read More"; var lesstxt = "...Read Less";` ? i have put them outside ajax call ? — Swati, Dec 14 '20 at 14:30
You can see in above demo code its working fine :) Make changes according to above code ..or create js fiddle .Also, now you are able to see readmore ? — Swati, Dec 14 '20 at 14:33
Please check it once is there any issue with the script. https://prnt.sc/w2h8tx I just change the class name — user9437856, Dec 14 '20 at 14:37
I see put `var moretxt = "...Read More"; var lesstxt = "...Read Less";` outside document.ready.. and see if that works .For reason have a look [here](https://stackoverflow.com/questions/11152977/global-javascript-variable-inside-document-ready) — Swati, Dec 14 '20 at 14:40
Apologize for the late reply, Yes, I declare the outside of the document. ready, error is gone but when I click on read more then nothing is happening. — user9437856, Dec 15 '20 at 05:48
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/225958/discussion-between-swati-and-user9437856). — Swati, Dec 15 '20 at 05:50

Read more and less not working after displaying the data from ajax

2 Answers2