Jump to content

insertBefore method


s_avinash_s
 Share

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
Link to comment
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

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

 

Link to comment
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
Link to comment
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
Link to comment
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
Link to comment
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;

 

Link to comment
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
Link to comment
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
Link to comment
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
 Share

×
×
  • Create New...