replace line and shift current line

s_avinash_s · October 8, 2018

Hi

I have a option of 8 errors in my web page.

Whenever the latest error comes it should be at the top of list, the one which was earlier at top should shift to next line.

the second line error should shift to third line and so on.

Is there any idea to proceed with this or an example ?

Ingolme · October 8, 2018

What code is putting the errors onto the page?

JMRKER · October 9, 2018

Since you choose to provide no code, you get a SWAG.

	<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title> Simulated Errors </title>
<!-- link rel="stylesheet" href="common.css" media="screen" -->
	</head>
<body>
<h2> Simulated errors </h2>
<div id="simErrors">
 <label> <input type="radio" name="rbtn" value="1"> Error 1 </label>
 <label> <input type="radio" name="rbtn" value="2"> Error 2 </label>
 <label> <input type="radio" name="rbtn" value="3"> Error 3 </label>
 <label> <input type="radio" name="rbtn" value="4"> Error 4 </label>
 <label> <input type="radio" name="rbtn" value="5"> Error 5 </label>
 <label> <input type="radio" name="rbtn" value="6"> Error 6 </label>
 <label> <input type="radio" name="rbtn" value="7"> Error 7 </label>
 <label> <input type="radio" name="rbtn" value="8"> Error 8 </label>
</div>
	<h3>Last 10 Error List</h3>
<pre id="errList"></pre>
	<script>
var errs = [];
function add2errs(info) {  // alert(info.value);
  errs.unshift('Error: '+info.value);
  if (errs.length > 10) { errs.length = 10; }
  document.getElementById('errList').innerHTML = errs.join('\n');
}
function init() {
  var sel = document.querySelectorAll('#simErrors input');  
  for (let i=0; i<sel.length; i++) {
    sel[i].addEventListener('click', function () { add2errs(this); } );
  }
} init();
</script>
	</body>
</html>

Ingolme · October 9, 2018

I would sooner use the insertBefore() method so as to not change so much of the DOM at once.

s_avinash_s · October 9, 2018

Hi

I will be getting the data every 5 seconds using ajax.

whenever error data comes i need to display it .

So using insertbefore() or the code above mentioned will be fine but with little modifications.

1. In above code, instead of radio buttons,

Whichever error data comes i need to display.how to do it please suggest

2.I have tried with insertbefore()

https://www.w3schools.com/code/tryit.asp?filename=FW30QQZS675R

Here i need to limit the data to 8.

also how to get the value using ajax and display instead of water as being displayed

dsonesuk · October 9, 2018

How would that be helpful?

If you limit to 8 and stop the script, you lose getting current errors

If you limit to 8 showing, you lose knowledge of any errors that occurred previously as it continuously updates every 5 sec.

JMRKER · October 9, 2018

Replace the "Simulated events" with the actual event logic regardless of where they came from.
You have provided no code for me to give suggestions about.

Use the function "add2errs" logic to limit your list display to any number of errors desired.
The error information is just saved to an array which you control the display to the max desired.
You could also save ALL errors and just display only the last 8 received.

s_avinash_s · October 10, 2018

Hi Dsonesuk and JMRKER

Thanks for the reply.

My code is as below

<p  class = "modify" id="error_pos1"></p>
 <p  class = "modify" id="error_pos2"></p>
 <p  class = "modify" id="error_pos3"></p>
 <p  class = "modify" id="error_pos4"></p>
 <p  class = "modify" id="error_pos5"></p>
 <p  class = "modify" id="error_pos6"></p>
 <p  class = "modify" id="error_pos7"></p>
 <p  class = "modify" id="error_pos8"></p>

     
    <script>
    function error_1() {
        var x1;
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() 
      {
            if(xhttp.readyState == 4) 
            {
                if(xhttp.status == 0) 
                {                                            
                }
                else 
                {                         
                    x1 = this.responseText;  
                    if (x1 == 0 )
                     {
                        document.getElementById("error_pos1").innerHTML = "Error for temp1";
                     }
                     
                }
            }       
      };
    xhttp.open("GET", "error_val1.txt", true);
    xhttp.send();
    }
    setInterval(error_1(), 5000);
    
        function error_2() {
        var x2;
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() 
      {
            if(xhttp.readyState == 4) 
            {
                if(xhttp.status == 0) 
                {                                          
                }
                else 
                {                        
                    x2 = this.responseText; 
                    if (x2 == 0 )
                     {
                        document.getElementById("error_pos2").innerHTML = "Error for temp2";
                     }                     
                }
            }       
      };
    xhttp.open("GET", "error_val2.txt", true);
    xhttp.send();
    }

    setInterval(error_2(), 5000);
      ......

actually am monitoring the error case every 5 seconds through ajax.

And also here i have mainly

x2 = this.responseText; 
                    if (x2 == 0 )
                     {
                        document.getElementById("error_pos2").innerHTML = "Time Not Set";
                     }

else part am not checking.only if it goes inside this condition then only Error should appear on first line.

Similarly for all the 8 errors also.

Which ever error is latest, it should be displayed on first line and others should be moved down.

Please suggest how to do it

JMRKER · October 11, 2018

You have 8 (!) repeated code for an AJAX file access. Seems very wasteful code.

I don't have access to a server to test your code and it does not run locally. Do you have it online somewhere?

Why are you using 8 (!) paragraph elements to display the error information when 'dsonesuk' and I have suggested workable alternatives?

s_avinash_s · October 11, 2018

Hi

My code i have kept in https://www.w3schools.com/code/tryit.asp?filename=FW56M9QG79H1

I need to get a continuous data from server and update it, so i am using AJAX.

If the code enters error condition, then only fresh error should be displayed on first line else previous error will be on first line.

when fresh error is on first line , other error should shift to second line and so on till 5 errors.(only 5 errors are required).

It is like bottleneck for me, please help

dsonesuk · October 11, 2018

"who's on first, what's on second, I Don't Know is on third"

https://www.youtube.com/watch?v=kTcRRaXV-fg

Edited October 11, 2018 by dsonesuk

replace line and shift current line

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

Create an account or sign in to comment

Create an account

Sign in