Jump to content
s_avinash_s

replace line and shift current line

Recommended Posts

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 ?

 

Share this post


Link to post
Share on other sites

What code is putting the errors onto the page?

Share this post


Link to post
Share on other sites

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>
	

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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

 

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

×