javascript - Change order of data with jQuery two-way data binding -
i'm trying use 2 way data binding have score changes on fixtures move league position of team depending on result. i've given try not sure why it's not working. have no idea i'm doing. i've used tinysort try , order them when points attribute changes don't know how dynamically add points attribute , change order of league changing fixture result. can help?
getremainingfixtures = function(){ $.ajax({ type: 'get', url: '/fixtures/later_fixtures', datatype: 'json' }).done(function(data){ data = _.groupby(data,'matchday'); $.each(data, function(index, day){ var matchdatediv = $('<div id="days">').css({ 'margin-left': '20px', 'max-width': '80%', 'display': 'block', 'text-overflow': 'ellipsis', 'white-space': 'nowrap', 'float': 'left', 'border': '#ff4742 5px solid' }); // var h1 = $('<h1>').html(day[0].matchday); // matchdatediv.append(h1); $.each(day,function(index2, game){ // var div = $('<div>'); var p = $('<p class="match">').html('<button class="homescoredown" style="width: 50px;text-overflow: ellipsis;white-space: normal;height: 30px; font-size: 20px;">-</button> ' + game.hometeam + ' <button class="homescoreup" style="width: 50px;text-overflow: ellipsis;white-space: normal;height: 30px;font-size: 20px;">+</button> <input type="number" value="0" class="hometeamscore" style="width: 30px;height: 20px; padding-bottom: 5px;font-size: 16px; text-align: center; line-height: 24px;" min="0"> v <input type="number" value="0" class="awayteamscore" style="width: 30px;height: 20px; padding-bottom: 5px;font-size: 16px; text-align: center; line-height: 24px;" min="0"> <button class="awayscoredown" style="width: 50px;text-overflow: ellipsis;white-space: normal;height: 30px; font-size: 20px;">-</button> ' + game.awayteam + ' <button class="awayscoreup" style="width: 50px;text-overflow: ellipsis;white-space: normal;height: 30px;font-size: 20px;">+</button>'); // div.append(p); matchdatediv.append(p); }); $('#fixtures').append(matchdatediv); }); }); } function removespaces(value){ return value.replace(/ /g, ''); } function getleague() { $.ajax({ type: 'get', url: '/leagues/later_league', datatype: 'json' }).done(function(leg){ $.each(leg,function(index, value){ $('.league').append('<div class="team" id="'+removespaces(value.teamname)+'">' + value.teamname + ' ' + value.playedgames + ' ' + value.points + '</div>').css({ 'padding-top': '100px', 'text-align': 'right', }); }); tinysort('div.team',{attr:'points'}); }); }; $(function(){ $('#fixt').ready(getremainingfixtures); $('#leag').ready(getleague); $(document).on('click', '.homescoredown', function() { console.log("clicked") var $button = $(this); var oldvalue = $button.parent().find("input.hometeamscore").val(); var newval = parsefloat(oldvalue) - 1; if (oldvalue > 0) { var newval = parsefloat(oldvalue) - 1; } else { newval = 0; } $button.parent().find("input.hometeamscore").val(newval); }); $(document).on('click', '.homescoreup', function() { var $button = $(this); var oldvalue = $button.parent().find("input.hometeamscore").val(); var newval = parsefloat(oldvalue) + 1; $button.parent().find("input.hometeamscore").val(newval); }); $(document).on('click', '.awayscoredown', function() { var $button = $(this); var oldvalue = $button.parent().find("input.awayteamscore").val(); var newval = parsefloat(oldvalue) - 1; if (oldvalue > 0) { var newval = parsefloat(oldvalue) - 1; } else { newval = 0; } $button.parent().find("input.awayteamscore").val(newval); }); $(document).on('click', '.awayscoreup', function() { var $button = $(this); var oldvalue = $button.parent().find("input.awayteamscore").val(); var newval = parsefloat(oldvalue) + 1; $button.parent().find("input.awayteamscore").val(newval); }); // want make 2 way binding happen here // if home score input changes run if loop see wins $('.hometeamscore').on('change', function() { if ('.hometeamscore.val' > '.awayteamscore.val') { // finding winning team name , remoing spaces to... var home = $p.child().find(".hometeam").removespaces; // ...find corresponding id in league data home = $(home).eq($value.teamname.index().attr('id')) // targeting points attribute var homewin = parsefloat('.team.points') //adding 3 points win return homewin + 3 } else if ('.hometeamscore.val' < '.awayteamscore.val') { var away = $p.child().find(".awayteam").removespaces; away = $(away).eq($value.teamname.index().attr('id')) var awaywin = parsefloat('.team.points') return awaywin + 3 } }); $('.awayteamscore').on('change', function() { if ('.hometeamscore.val' > '.awayteamscore.val') { var home = $p.child().find(".hometeam").removespaces; home = $(home).eq($value.teamname.index().attr('id')) var homewin = parsefloat('.team.points') return homewin + 3 } else if ('.hometeamscore.val' < '.awayteamscore.val') { var away = $p.child().find(".awayteam").removespaces; away = $(away).eq($value.teamname.index().attr('id')) var awaywin = parsefloat('.team.points') return awaywin + 3 } }); // // listen click , update scores in fixture // if ( "input.hometeamscore".val !== "input.awayteamscore".val ) { // console.log('not same'); // // both teamnames fixture innerhtml or value etc // var home = $p.child().find("game.hometeam").removespaces; // console.log(home); // var away = $p.child().find("game.awayteam").removespaces; // console.log(away); // // predicted result fixture // var homescore = "input; // console.log(homescore); // var awayscore = "input.awayteamscore".val; // console.log(awayscore); // // finding corresponding teams in league table // home = $(home).eq($value.teamname.index().attr('id')) // away = $(home).eq($value.teamname.index().attr('id')) // // update points both teams // if ( homescore > awayscore) { // home.value.points + 3 // } else if ( awayscore > homescore) { // away.value.points + 3 // } // // reorder league // } });
Comments
Post a Comment