Jump to content
s_avinash_s

insertBefore method

Recommended Posts

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 by s_avinash_s

Share this post


Link to post
Share on other sites

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

 

123.PNG

Edited by s_avinash_s

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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]); 
}

 

Share this post


Link to post
Share on other sites

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 by s_avinash_s

Share this post


Link to post
Share on other sites

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 by dsonesuk

Share this post


Link to post
Share on other sites

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 by s_avinash_s

Share this post


Link to post
Share on other sites

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....

Share this post


Link to post
Share on other sites

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;

 

Share this post


Link to post
Share on other sites

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 by dsonesuk

Share this post


Link to post
Share on other sites

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 by s_avinash_s

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×