append textarea in success AJAX - works very slowly

[kstaniec96]

Hello, I have a problem, namely when adding content in AJAX with append, emojionearea works very slowly, no matter how I did not refer to it, how to fix this?

PS. For every AJAX request I do not know why, but emojionearea reloads something and the page is lag again.

Thank you.

[carpii]

Provide some test code... https://jsfiddle.net/1v03Lqnu/

Your question is too vague

[mervick]

Can you show your network requests from chrome dev-tools ?

[kstaniec96]

@carpii This is only example

$.ajax({
    type : 'POST',
    dataType : 'json',
    ...

    success :
      $.each(xhr, function(i, ob){
        $('#mydiv').append('/*other content...*/<button class="comments"></button><textarea id="comment"></textarea>');

       $('#comment').emojionearea({
            pickerPosition      : 'top',
        tones           : true,
        tonesStyle        : 'bullet',
        autoHideFilters   : true,
        saveEmojisAs        : 'shortname',
        autocomplete        : false
        });
      }
  });

/*OR*/
$('#mydiv').on('click', 'button.comments', function(){
 $('#comment').emojionearea({
            pickerPosition      : 'top',
        tones           : true,
        tonesStyle        : 'bullet',
        autoHideFilters   : true,
        saveEmojisAs        : 'shortname',
        autocomplete        : false
        });
});

[mervick]

You have these requests after each AJAX?

[mervick]

I see emojionearea.js, so probably it's a first request. If not, so maybe you load emojionearea each request

[mervick]

Load your page, click "clear" on your network tab in dev-tools, and then make your AJAX request, after what share requests what make emojionearea after AJAX

[carpii]

@flicly Im not sure but it seems like you are appending anew textarea each time, but with the id of "#comment", and then converting that to EmojiOneArea?

id has to be unique in a document. Maybe you are building up duplicates?

[kstaniec96]

@mervick No, after another request nothing will change, except that the page is lag. @carpii no, my mistake there was to be ".comment" not "#comment"

[carpii]

@carpii no, my mistake there was to be ".comment" not "#comment"

Can you post accurate code?

After the ajax has completed, have you inspected the DOM around the EmojiOneArea, to make sure its as you expect?

[mervick]

probably because you are creating new emojioneareas for all prev editors too: I believe this will solve your problem:

$.ajax({
    type : 'POST',
    dataType : 'json',
    ...
    success :
      $.each(xhr, function(i, ob){
        var content = $("<div/>");
        content.html('/*other content...*/<textarea class="comment"></textarea>');
        $('#mydiv').append(content);
        content.find('.comment').emojionearea({
            pickerPosition      : 'top',
            tones           : true,
            tonesStyle        : 'bullet',
            autoHideFilters   : true,
            saveEmojisAs        : 'shortname',
            autocomplete        : false
        });
      }
  });

[mervick]

updated previous comment, was an error in code

[kstaniec96]

@mervick search, maybe find? Because search is not work.

[mervick]

sorry, yes you are right of course, find

[mervick]

ok, can you add this in your AJAX callback

        var content = $("<div/>");
        content.html('/*other content...*/<textarea class="comment"></textarea>');
        $('#mydiv').append(content);
        var emojioneareas = content.find('.comment');
        console.log("count", emojioneareas.length);
        emojioneareas.emojionearea({ /* ... */ });

[kstaniec96]

@mervick found ".comment" (displayed only once despite subsequent requests), but still the same problem.

[kstaniec96]

When emojionearea adds to the static element everything works fine with only the problem is with AJAX :/

[mervick]

please reproduce your issue in example here with code similar to yours

[mervick]

it's empty frame

[mervick]

I don't need your code, only working example with similar code which reproduces your issue

@mervick js frame is empty?

working example https://jsfiddle.net/1v03Lqnu/12/

[kstaniec96]

@mervick I think this is due to AJAX request delays, maybe as I go from localhost to the server then the load speed will be improved.

[carpii]

@flicly I think at this point you should consider scattering some console.log() calls in your code, and try to see what is going on. Chrome also has a javascript debugger which would no doubt help. Youcan also type jQuery commands into console, such as $(".comment").length

[mervick]

seems it's not an emojionearea issue, so I close this