Wednesday, 15 March 2017

Socket.IO update bootstrap modal data

I have a JS server which sends array to the site and the bootstrap modal only updates if you close it and open it again, but my question is. How could I update it if it's open already?

Here is my code if it's closed and u open it

function findGame(id){
    for(var i = 0; i < games.length; i++){
        if(games[i].id == id){
            return games[i];
        }
    }
}

function showGame(id){
    var data = findGame(id);
    var skins_creator = [];
    var skins_opponent = [];
    $('.watch-cf .modal-header h3').html('Watch Coinflip | #' + id);
    $('.modal-body #creator-name').html(data.creator[0].name);
    $('.modal-body #hash').html(data.hash);
    $('.modal-body .duel-user-img').attr('src', 'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/1a/'+data.creator[0].icon+'_full.jpg');
    $('.modal-body #cf-creator-val').html(data.creator[0].totalSkins + ' skins valued at $' + data.creator[0].totalAmount);
    data.creator[0].items.forEach(function (kevin){
        skins_creator.push('<div class="cf-skin" style="box-shadow: inset 0 0 20px #'+kevin.color+'"> <div class="cf-skin-img"><img src="https://steamcommunity-a.akamaihd.net/economy/image/class/730/'+kevin.classid+'/111fx57f"></div><div class="cf-skin-name">'+kevin.name+'<p>'+kevin.price+' USD</p></div></div>');
    });
    if(Object.keys(data.opponent).length > 0){
        $('.modal-body #opponent-name').html(data.opponent.name);
        $('.modal-body .duel-user-img-opponent').attr('src', 'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/1a/'+data.opponent.icon+'_full.jpg');
        $('.modal-body #cf-opponent-val').html(data.opponent.totalSkins + ' skins valued at $' + data.opponent.totalAmount);
        data.opponent.items.forEach(function(kevin){
            skins_opponent.push('<div class="cf-skin" style="box-shadow: inset 0 0 20px #'+kevin.color+'"> <div class="cf-skin-img"><img src="https://steamcommunity-a.akamaihd.net/economy/image/class/730/'+kevin.classid+'/111fx57f"></div><div class="cf-skin-name">'+kevin.name+'<p>'+kevin.price+' USD</p></div></div>');
        });
        $('.modal-body .cf-opponent-skins').html(skins_opponent.join(""));
    }
    $('.modal-body .cf-creator-skins').html(skins_creator.join(""));
    $('.watch-cf').modal('show');
}

Here is my socket code which sets the games array

socket.on('games', function(data){
    games = data;
});



via Omar Lers

No comments:

Post a Comment