insertBefore method

s_avinash_s · October 26, 2018

Hi

Am using below example for insertbefore method

 <p   id="error_pos8"></p>

 <ul id="alerts_errors_list">

</ul>
<script>
function error_8() {
        var x8;
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() 
      {
            if(xhttp.readyState == 4) 
            {
                if(xhttp.status == 0) 
                {      
                    document.getElementById("error_pos8").innerHTML = this.responseText;
                   
                }
                else 
                {                        
                    x8 = this.responseText; 
                                        
                    if (x8 == 0 )
                     {
                        document.getElementById("error_pos8").innerHTML = "Under Pressure";
                        error_case = document.getElementById("error_pos8").innerHTML; 
                     }
                     
                }
            }       
      };
    xhttp.open("GET", "error_val8.txt", true);
    xhttp.send();
    }

    setInterval(error_8(), 1000);
    
    
    var error_case;
    function alerts_errors() {
    var newItem = document.createElement("LI");
    var textnode = document.createTextNode(error_case);
    newItem.appendChild(textnode);

    var list = document.getElementById("alerts_errors_list"); 
    list.style.color = "red";
    list.insertBefore(newItem, list.childNodes[0]);
}
setInterval("alerts_errors()",100000);
    
    </script>

whether the below code works fine for insertbefore ,because i have similar code for 8 other error list

x8 = this.responseText; 
                                        
                    if (x8 == 0 )
                     {
                        document.getElementById("error_pos8").innerHTML = "Under Pressure";
                        error_case = document.getElementById("error_pos8").innerHTML; 
                     }

so now error case should be printed only when it satisfies the x1==0 to x8==0 condition

Will it be fine

Edited October 26, 2018 by s_avinash_s

dsonesuk · October 26, 2018

https://www.w3.org/Style/Examples/007/color-bullets.en.html

s_avinash_s · October 27, 2018

Hi

I have a box as shown in figure.

whenever the multiple times same text appears, it should be displayed only once.

How it can be achieved

Edited October 27, 2018 by s_avinash_s

s_avinash_s · October 27, 2018

Hi

I am trying the simple method by referring w3schools

<!DOCTYPE html>
<html>
<body>

<ul id="myList">
  <li>Coffee</li>
  <li>Tea</li>
  <li>milk</li>
  <li>complan</li>
  <li>boost</li>
</ul>


<button onclick="myFunction()">Try it</button>



<script>
function myFunction() {

    var list = document.getElementById("myList");
	list.removeChild(list.childNodes[4]);
    var newItem = document.createElement("LI");   
    var textnode = document.createTextNode("Water");
    newItem.appendChild(textnode);
    list = document.getElementById("myList");
    list.insertBefore(newItem, list.childNodes[0]);
}
</script>

</body>
</html>

1.My intention is to remove the last element

2.then add "water " to first line using insert before

Need to do it in same function, one should delete and other to add after deleting.

But this is not working

anything wrong here

dsonesuk · October 27, 2018

The troubles is childNodes also targets white spaces caused by breaking <li> ...</li> to new lines each time. A quick solution is to use children instead as it targets only actual html elements ignoring text or spaces.

function myFunction() {
var list = document.getElementById("myList");
   
	list.removeChild(list.children[4]);
  var newItem = document.createElement("LI");   
    var textnode = document.createTextNode("Water");
    newItem.appendChild(textnode);
    //list = document.getElementById("myList"); not required already defined above
    list.insertBefore(newItem, list.children[0]); 
}

s_avinash_s · October 28, 2018

Hi

This works fine.

Am receiving the data from server using ajax every 1 sec.

I need to avoid if same data is appearing, i mean only when different data appears.i need to delete child[4] and display the new data at child[0] position.

so i tried this way.will this work

AJAX:

if (x8 == 0 )
                     {
                        document.getElementById("error_pos8").value = "Under Pressure";
                        error_case = document.getElementById("error_pos8").value; 
                     }


INSERTBEFORE:
if(error_case!=document.createTextNode(error_case))
{
    newItem.appendChild(textnode);  
    list.insertBefore(newItem, list.children[0]);
}

Edited October 28, 2018 by s_avinash_s

dsonesuk · October 28, 2018

You are comparing a text string to a textNode object, you need to store the previous value and compare to the current. If you use error_case to retrieve and store a value then compare with error_case !== error_case you will be comparing like for like, they will always return false, because they are identical.

Edited October 28, 2018 by dsonesuk

s_avinash_s · October 29, 2018

Hi

I changed like below.

<script>
function error_8() {
        var x8;
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() 
      {
            if(xhttp.readyState == 4) 
            {
                if(xhttp.status == 0) 
                {      
                   
                   
                }
                else 
                {                        
                    x8 = this.responseText; 
                                        
                    if (x8 == 0 )
                     {
                        document.getElementById("error_pos8").value = "Under Pressure";
                        error_case = document.getElementById("error_pos8").value; 
                        error_prev=error_case;
                     }
                     
                }
            }       
      };
    xhttp.open("GET", "error_val8.txt", true);
    xhttp.send();
    }

    setInterval(error_8(), 1000);
    
    
    var error_case,error_prev;
    function temp1() {
    var list = document.getElementById("myList");
    if(error_prev!==error_case)
    {
    list.removeChild(list.children[4]);
    var newItem = document.createElement("LI");   
    var textnode = document.createTextNode(error_case);
    newItem.appendChild(textnode);
    list.insertBefore(newItem, list.children[0]);
    }
}
setInterval("temp1()",1000);
    
    </script>

I have similar functions from error_1 to error_8

error_prev=error_case; is present in all 8 functions

i tried above but its not working

Edited October 29, 2018 by s_avinash_s

dsonesuk · October 29, 2018

Think about it! IF you retrieve current value, and update error_prev to that current value, its no longer the previous value, so again! They will be identical. Before the update of error_case it was still the previous value, so....

s_avinash_s · October 29, 2018

Hi

Changed like below.

At the end error_prev am updating..

still same issue..nothing appears

if(error_prev!==error_case)
    {
    list.removeChild(list.children[4]);
    var newItem = document.createElement("LI");   
    var textnode = document.createTextNode(error_case);
    newItem.appendChild(textnode);
    list.insertBefore(newItem, list.children[0]);
    }
    error_prev=error_case;

dsonesuk · October 29, 2018

Can't comment on what wrong! With the code unless I see WHAT you have done with the rest of the code.

Also

setInterval("temp1()",1000);

does not call function temp1(), its calling a text string of "temp1()" it should be

setInterval(temp1,1000);

OR

setInterval(function(){temp1();},1000);

Edited October 29, 2018 by dsonesuk

s_avinash_s · October 30, 2018

Hi

Just the position of " error_prev=error_case;" is changed

and now i corrected the setinterval

<script>
function error_8() {
        var x8;
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() 
      {
            if(xhttp.readyState == 4) 
            {
                if(xhttp.status == 0) 
                {      
                   
                   
                }
                else 
                {                        
                    x8 = this.responseText; 
                                        
                    if (x8 == 0 )
                     {
                        document.getElementById("error_pos8").value = "Under Pressure";
                        error_case = document.getElementById("error_pos8").value; 
                        
                     }
                     
                }
            }       
      };
    xhttp.open("GET", "error_val8.txt", true);
    xhttp.send();
    }

    setInterval(error_8(), 1000);
    
    
    var error_case,error_prev;
    function temp1() {
    var list = document.getElementById("myList");
    if(error_prev!==error_case)
    {
    list.removeChild(list.children[4]);
    var newItem = document.createElement("LI");   
    var textnode = document.createTextNode(error_case);
    newItem.appendChild(textnode);
    list.insertBefore(newItem, list.children[0]);
    }
      error_prev=error_case;
}
setInterval(temp1,1000);
    
    </script>

Edited October 30, 2018 by s_avinash_s

insertBefore method

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in