append in jquery works sometimes and sometimes doesn't

Question

I am trying to append a span element in a div tag using the below code .

 $( document ).ready(function() { 
$(".rocketchat-widget").append("<span class='tooltiptext'>Chat button</span>");
});

sometimes it works and adds the element.

But sometimes it doesn't load the element.

I am new to jquery so any help would be appreciable

Thank you

This is standard behaviour. Amendments you make to the DOM during the page's life are not maintained on successive page loads, unless you specifically write code to do it. — Rory McCrossan, Sep 13 '18 at 14:51
@RoryMcCrossan But it is adding the element when document completely loads so shouldn't it add tyhe element on successive reloads also — Shahzad Ahamad, Sep 13 '18 at 14:53
You've now edited the question. Your original question was asking why the element disappears when you reloaded the page...? — Rory McCrossan, Sep 13 '18 at 14:56
How is `rocketchat` getting added to the page? You need to ensure that `.rocket-chat-widget` exists before you try to append. — Max Baldwin, Sep 13 '18 at 14:57
it looks like it should work to me, can you show more of your code? — Chris Li, Sep 13 '18 at 14:57
@RoryMcCrossan Yes I noticed that it was not loading theelement on first loads also sometimes — Shahzad Ahamad, Sep 13 '18 at 14:57
@Shahzad why don't you create jsfiddle (demo) to prove that it doesn't work? — Bhagwan Parge, Sep 13 '18 at 14:58
@bhagwanparge I am unable to recreate it in the jsfiddle. By adding the js and css it turns the chat icon into a circular icon but it is not showing I needed to add a tooltip to that icon but still here is the fiddle https://jsfiddle.net/shahzad285/xpvt214o/788855/ . If it can give you any idea — Shahzad Ahamad, Sep 13 '18 at 15:33
@MaxBaldwin Rocket chat is getting added in the IFrame using some script — Shahzad Ahamad, Sep 13 '18 at 15:37
so you want to append something in the iframe...which gets loaded after some time, right? — Bhagwan Parge, Sep 13 '18 at 15:43

Bhagwan Parge · Accepted Answer · 2018-09-13T17:09:57.487

1

Below is what you want, op (shahzad) was including third party widget on page load, as it is a third party widget sometimes it will load early or later, so, needed below code,

$( document ).ready(function() { 
    $(document).on("click", "[data-state=closed]" , function() { $(this).data('state', 'opened').attr('data-state', 'opened'); }); 

    myVar = setInterval(function() {
        if($(".rocketchat-widget").length){
            $(".rocketchat-widget").append("<span class='tooltiptext'>Chat button</span>");
            clearInterval(myVar);
        }        
    }, 1000);
});

edited Sep 13 '18 at 17:09

answered Sep 13 '18 at 15:56

Bhagwan Parge

382
1
11

Please take a moment to edit your question and explain what you've done differently (and perhaps *why*). A "spot-the-difference" answer is very rarely a "good" answer. Additionally, no need to encourage other users to upvote - comments should remain helpful and constructive :) – Tyler Roper Sep 13 '18 at 16:00
@bhagwanparge I am out of the office will check it tommorow and let know if it works – Shahzad Ahamad Sep 13 '18 at 17:56

append in jquery works sometimes and sometimes doesn't

1 Answers1