I have a single web page where I aim to showcase a list of users who have joined my website, along with the connections between them.
The users and their connections are as follows:
var data=[
{
"Id": 38,
"Connections":[39,40],
"Name":"ABc"
},
{
"Id": 39,
"Connections":[40],
"Name":"pqr"
},
{
"Id": 40,
"Connections":[],
"Name":"lmn"
}]
In the given example, user with Id:38 is linked to users 39 and 40, while user 39 is connected to user 40. As for user 40, it is already associated with users 39 and 38, hence its Connection array is empty.
A recurring web service will be activated approximately every 1-2 seconds to show newly registered users on this page, including any new connections among existing users saved in my database. This service will retrieve all users alongside their respective connections.
Initially, the page will load, but subsequently, there will be no need for manual refreshes. New users and connections should seamlessly appear through an AJAX call made to the web service.
Although I have successfully managed to exhibit users and their associations, I am currently facing a hurdle regarding automatically refreshing the content every 1-2 seconds, ensuring that new connections are established without duplicating previous ones.
At present, upon each div refresh, previous connections are being recreated.
The plugin I am employing is:Jquery-connections.js
Here's a demonstration I created; kindly disregard the embedded JavaScript code within the HTML structure, as that constitutes the plugin (Jquery-connections.js):JS bin Demo