How to insert divs correctly to manipulate them from jQuery?

Question

Here i have some code to create div with specified class, and inside of this div i create iframe to connect to my chat widget

(function(){ 
var client_id = '1',
    p= 'right',
    vp = 'bottom';
    h = '550',
    dw = '400';
var d=document;
var w=window;

function l(){

    var s = document.createElement('div');
    s.id = 'chatrix_init_widget'; 
    s.style = 'position: fixed; z-index:101010; '+p+': 0; '+vp+': 0; height:'+h+'px; width: '+dw+'px';
    var ss = document.getElementsByTagName('body')[0].appendChild(s);

    var i = document.createElement('iframe');
    i.className = 'chatrix_iframe_container';
    i.height = '100%';
    i.width = '100%';
    i.src = '//danialart.biz/chatrix/widget.php?c='+client_id;
    var ss = document.getElementById('chatrix_init_widget').appendChild(i);

}
function s() {
    var s = document.createElement('script');
    s.type = 'text/javascript'; 
    s.src = '//danialart.biz/chatrix/js/client_side.js';
    var ss = document.getElementsByTagName('body')[0].appendChild(s);
}

if(d.readyState=='complete'){
    l();
    s();
}else{
    if(w.attachEvent){
        w.attachEvent('onload',l);
        s();
}else{
    w.addEventListener('load',l,false); s();}}})();

In function named s() i create script tag which connect remote jquery file functions, but nothing in this file (execlude consolel.log command) is work. Not click, or other jquery action not work at all.

Duplicate or related: http://stackoverflow.com/questions/364952/jquery-javascript-accessing-contents-of-an-iframe — Aneri, Nov 29 '16 at 09:55
@DanialartBiz I have replicated your condition and i made it work. Please check the updated solution if it works for you. — Abhay Maurya, Dec 01 '16 at 09:28

Abhay Maurya · Answer 1 · 2016-11-30T11:50:08.870

1

Its often this problem when iframes are involved. I suggest three ways to go:

Try onload on the element on which you are trying to put jquery action:

$('#element').on('load',function(){
   //your action here for example click action
   $(this).on('click',function(){
   });
});

Try onload on your iframe:

$('.chatrix_iframe_container').on('load', function(){
   //do your actions here
});

Although sometimes none of above works then I use setInterval which I don't suggest normally as its considered bad practice

Use setInterval

 function myAction(){
    if($('#element').length){
      // do your actions here
      clearInterval(timer);
     }
 }
 var timer = setInterval(function(){myAction();},1000);

I have made test myself and I could get your logic to work by doing following modifications:

Add jQuery in your <head> tag:

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

</head>
Replace your starting of script:
```
(function(){
```

with this:

(function($){

3.In the end of your script, use this:

if(d.readyState=='complete'){
    l();
    s();
}else{
    if(w.attachEvent){
        w.attachEvent('onload',function(){
          l();
          s();
        });
}else{
    w.addEventListener('load',function(){l();s();},false);}}})(jQuery);
</script>

I have replicated your situation and now it worked like this as I have found out that w.addEventListener is the one who is loading your script and it was adding the script tag(s()) even before div was being added to DOM(l()). That is why script wasn't working.

I hope it helps

edited Nov 30 '16 at 11:50

answered Nov 29 '16 at 10:26

Abhay Maurya

11,819
8
46
64

I tried all the three solutions, but not one is work, as before - i clicked all over the element but nothing happend. I gues its promblem of insertion div and iframe, if i insert it directly (not in javascript) - my jquery code work fine, but if i create when DOM is load - its not. – DanialartBiz Nov 29 '16 at 11:37
problem is that your jquery code is trying to target the element when its not present in DOM so you need to wait for it to be added and then target it. Now i don't know why none of above solutions worked. In solution 3, remove the line : `clearInterval(timer);` and try again. Tell me if it works. – Abhay Maurya Nov 29 '16 at 11:44
Nope, still nothing change. Can u, maybe, tell me how to create elements in DOM in way which jquery is will be working. My target is - to create small js code which every users can paste to they websites and which create iframe, div and sonnect jquery js file from another sever to manipulated of creating elements? – DanialartBiz Nov 29 '16 at 12:38
The only fact you need to take care of is that you only try to do manipulations on dynamically added elements after they are added to DOM. that means any jquery to try to execute when element isnt in the DOM would not work. – Abhay Maurya Nov 29 '16 at 12:58
Seeing your question, I would like you to try one more thing to see if it works. In your code all actions you want to take, put them after you call `l()` that means you need to make a function including all your actions and call that function after you call `l()`. – Abhay Maurya Nov 29 '16 at 12:59
I have updated my answer, check if that works. Please reply what happens. – Abhay Maurya Nov 29 '16 at 13:02
i create function called s, and inside that function i create new DOM element script with link to jquery script what i need, and call function s() (which connect file after create div in dom) but anyway clicking on my div not working. But when i call console.log($('.chatrix_init_widget')); - i see my element in console. But click still not working. – DanialartBiz Nov 29 '16 at 18:01
Can you update question with this latest function you have created ? So that i can get a clear idea of why it isnt working. – Abhay Maurya Nov 29 '16 at 18:10
@DanialartBiz I have replicated your condition and i made it work. Please check the updated solution and tell me if it works for you. – Abhay Maurya Nov 30 '16 at 11:50

How to insert divs correctly to manipulate them from jQuery?

1 Answers1