I have a list of elements that are loaded with reactjs and at the end of that list there is a button that loads more items via onclick event using reactjs.
I want to create a function that using javascript or jquery, trigger the onclick event to load all the items instead of clicking one by one on the load more items.
I tried to do it using a interval in jquery but the $element.trigger('click')
is not working, does nothing.
Can anyone help me with this? please.
ReactJS:
var ConversationShowMore = React.createClass({
getInitialState: function(){
return {show: false, next_comments: ""};
},
loadMoreComments: function(){
this.setState({show: true});
},
render: function(){
var obj = this.props.next_comments || "";
if (obj != "" && requesturl != obj) {
if (this.state.show) {
return (
<ConversationBox url={this.props.next_comments} />
)
}else{
return (
<a onClick={this.loadMoreComments} className="showmoreconversations" href="#" role="button"><span>Load more conversations...</span></a>
)
}
}else{
return (
<div></div>
)
}
}
});
Javascript/jQuery:
var tid = setInterval(myCode, 5000);
function myCode() {
if($("#conversationContainer a.showmoreconversations").length){
$("#conversationContainer a.showmoreconversations").trigger('click');
}else{
abortTimer();
}
}
function abortTimer() {
clearInterval(tid);
}
When component is mounted, you will trigger request to load more comments. When this request is complete, you schedule another request in X miliseconds.
loadMoreComments(){
console.log('loaded more comments');
// Probably, you will trigger async request. Call following line when this request is complete.
this.timeout = window.setTimeout(this.loadMoreComments, 5000);
},
componentDidMount() {
this.loadMoreComments();
},
Remember to cancel scheduled request when unmounting component. Otherwise, it will run virtually forever (and will surely case exception to be thrown)
componentWillUnmount() {
window.clearTimeout(this.timeout);
},
Working example over here: https://jsfiddle.net/69z2wepo/34030/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.