Is there a way to "simulate" pressing the refresh button to refresh a List?

Question

Is there a way to "simulate" pressing the refresh button to refresh a List? I have a list that I want it to update every 10 seconds. Is there a way to "press" the refresh button every 10 seconds?

My list name is ActiveJobsList. This is what I have at the moment:

export function autoRefresh() {
    var counter = 10;
    var id;

    if(location.href.includes("activejobs")) {
    id = setInterval(function() {
        counter--;
        if(counter < 0 && location.href.includes("activejobs")) {
            // What should go here?
            clearInterval(id);
        } 
    }, 1000);
    }
    else if (!location.href.includes("activejobs"))
    {
        clearInterval(id);
    }
}

Originally I had `location.reload();` where it says `// What should go here?` but that just reloaded the whole page, which worked, but I would rather refresh the list only. — Stebermon, Jun 14 '17 at 18:59
What langage are you using? but basically you should make a Thread running every 10 second and them call your refresh method — user3586826, Jun 14 '17 at 18:20
My [answer in another similar question](https://stackoverflow.com/questions/43212627/how-to-refresh-a-list-view-in-admin-on-rest/46576999#46576999) also answers this one. — Benjamin Intal, Oct 05 '17 at 06:37

score 1 · Accepted Answer · answered Jun 21 '17 at 20:23

Okay so I managed to figure it out. I used

var x = document.getElementsByTagName('button');
console.log(x);

To figure out which button corresponded to the refresh button for admin-on-rest. In my case, it was the second button in the array.

Here is my updated code.

export function autoRefresh() {
    var counter = 30;
    var id;

    if(location.href.includes("activejobs")) {
    id = setInterval(function() {
        counter--;
        if(counter < 0 && location.href.includes("activejobs")) {
            document.getElementsByTagName('button')[1].click();
            counter = 30;
        } 
    }, 1000);
    }
    else if (!location.href.includes("activejobs"))
    {
        counter = 30;
    }
}

score 0 · Answer 2 · answered Jun 16 '17 at 20:44

0

You could leverage React.Component.shouldComponentUpdate(), on your ActiveJobsList https://facebook.github.io/react/docs/react-component.html#shouldcomponentupdate

answered Jun 16 '17 at 20:44

yonantan

1

score 0 · Answer 3 · answered Jul 29 '17 at 22:16

I have created a component that provides a drop down menu for auto update setting. Here is the code and below it is an example of how to invoke it.

class AutoUpdt extends Component {
    static propTypes    = {         setAutoUpdate   :   PropTypes.func 
                                ,   interval        :   PropTypes.array
                                ,   iconColor       :   PropTypes.any  
    }
    static defaultProps = {         interval        : [10,30,60,120,300,600,900,1800,3600]
                                ,   iconColor       : '#00bcd4' 
                                }
    constructor(props) {            super(props)
                   this.state = {   open            : false
                                ,   needrefresh     : false
                                ,   intervaltime    : false   
                                    }
                            }
    handleTouchTap(event) {         event.preventDefault()
                                    this.setState({  open: true,  anchorEl: event.currentTarget, })
                            }
    handleRequestClose() {          this.setState({   open: false,  })
                            }
    handleShow(event) {        let  intervaltime      =   event.currentTarget.innerText.toLowerCase().split(' (secs)')[0].trim()
                               let  newintevaltime    =   (this.state.intervaltime === false) ? intervaltime : false
                                    this.props.setAutoUpdate(  newintevaltime )   
                                    this.setState({  open: false, needrefresh: true, intervaltime : newintevaltime})
                             }  
    render() {           
            return ( <div style={{ display: 'inline-block' }}>
                        <IconButton tooltip="Set Auto Update"  
                                    iconStyle={{ color: this.props.iconColor }} 
                                    onTouchTap={this.handleTouchTap.bind(this)} ><AutoIcon /></IconButton>
                          <Popover  open={this.state.open}     
                                    anchorEl={this.state.anchorEl}  
                                    anchorOrigin={{ horizontal: 'left', vertical: 'bottom' }}  
                                    targetOrigin={{ horizontal: 'left', vertical: 'top' }}  
                                    onRequestClose={this.handleRequestClose.bind(this)}    >
                            <Menu>
                                    {this.props.interval.map( el  =>   
                                    <ListItem   style={(  el.toString() !==  this.state.intervaltime )  
                                                    ?  {  color:'#00bcd4'  , margin: 0, padding : 2  }  
                                                    :  { color: '#f48fb1'  , margin: 0, padding : 2  }  }   
                                                data-key={ el.toString()} 
                                                key={el.toString()}  
                                                primaryText={ el.toString()  + ' (secs)'}   
                                                onTouchTap={this.handleShow.bind(this)} />  )}
                            </Menu  >
                        </Popover>
                    </div>)
        }
    }

   // It is invoked by using these two functions in another component

 checkMounted(){     this.props.checkMounted     && this.props.checkMounted()   &&  this.updateData()
 }
 setAutoUpdate =  ( intervaltimer, checkMounted)  =>  {  
                    const this_ = this
                    this.state.intervaltimer &&  clearInterval(this.state.intervaltimer)
                    this.setState(   intervaltimer ? { intervaltimer : setInterval( this_.checkMounted.bind(this_), +intervaltimer * 1000)   } : { intervaltimer : false} ) 
 }

 // And using this line in the render function of the calling component

 { this.props.hasAuto     &&  <AutoUpdt     setAutoUpdate={this.setAutoUpdate}   icon={<NavigationRefresh />}   /> }

confused, how to use this is admin-on-rest – Will Du Nov 22 '17 at 13:51 — Will Du, Nov 22 '17 at 13:51

Is there a way to "simulate" pressing the refresh button to refresh a List?

3 Answers3

Linked