Javascript - change text automatically every 10 secodns

Pastupe · ‎11-29-2013

Hi,
I need help please. Im beginner in javascript and I learn everething from beginning.

I created UI page.
Result is that UI page display several records each to other (kb query - gliderecord ).
I would like to display every record separately one by one changing every 10 seconds.
See example on screen that now they display all one behind another ....
Is there any change to use javascript to show my variable 1 per 10 seconds which I call $[jvar_inc_link] ?

I would like to learn this how to create code to show results from $[jvar_inc_link] every 10 seconds ..

thanks to all
Petr

Pastupe · ‎12-02-2013

Lates version of code

Kostya · ‎12-03-2013

Take another approach. Just place the DIVs with incident data within the jelly while. You dont need to the array to be created first..
And upload the jquery as attachment, not as script, f.e.


<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<g:evaluate var="jvar_gr" object="true">
   var gr = new GlideRecord("incident");
   gr.addQuery("active", true);
   gr.query();
   gr;
</g:evaluate>


<style>
div.news-message {
height: 14px;
padding: 10px;
font: 13px Tahoma;
}

.nodisplay {
display: none;
}

.left {
float: left;
}

element.style {
display: none;
}

element.style {
display: block;
}
.active {
display: visible;
}


</style>
  <script></script>
 

  <!-- JavaScript functions  -->
  <script>
    jQuery.noConflict();

    jQuery( document ).ready(function() {
     setInterval(function(){

//get the active news
var active = jQuery('.wiki-news').children('.active');

active.removeClass('active').fadeOut('slow', function(){

if(jQuery(this).next().attr('data-type') == "news"){

jQuery(this).next('.news-message').addClass('active').fadeIn('slow');

}
else{

//alert('first');

jQuery('.news-message').first().addClass('active').fadeIn('fast');

}

})

}, 1000);
    });

  </script>


  <body>


<div class="wiki-news">
 <div class="news-header left"></div>

    <div class="news-message left active" data-type="news" style="display:none;"><a href="incident.do?sys_id=${jvar_gr.getValue('sys_id')}">${jvar_gr.getValue('number')}</a>1</div>

   <j:while test="${jvar_gr.next()}">


  <div class="news-message left" data-type="news" style="display: none;"><a href="incident.do?sys_id=${jvar_gr.getValue('sys_id')}">${jvar_gr.getValue('number')}</a></div>

    </j:while>

  


</div>
  </body>

</j:jelly>

Hit the Thumb Icon and/or mark as Correct, if my answer was correct. So you help others to see correct responses and I get fame 🙂

Cheers,
Kostya

Pastupe · ‎12-03-2013

Konstantin , it work now. Thanks lot!!! It show incident numbers one by one every few seconds.
One more question. I dont understand why it run on incident table, it also run on our customized table (simmilar to incident), but it not run on kn_knowledge table

what I did is that I changed in your code this KB records which should be correct, but then only what i see ons creen is number 1.........
Could you just try for me if KB can be displayed in the same code for you ? I wonder why KB records are not shown...
The code should run on every table like kb_knowledge, sys_user........

GlideRecord("kb_knowledge");

Kostya · ‎12-02-2013

I already done something like this - querying data from server, iterating and printing as html code. Should work. Try some examples from Jelly articles at wiki.

Hit the Thumb Icon and/or mark as Correct, if my answer was correct. So you help others to see correct responses and I get fame 🙂

Cheers,
Kostya