javascript - DOM Manipulation in Promise `then` is not occurring after successful AJAX call in previous `then` -
i in middle of refactoring large js class, (which leans heavily on jquery), , have switched mess of callbacks, variables , tightly intertwined code series of promise chains carry out required changes in, each triggered different user actions fire events.
the script modal on page of html game links. part of having issue does, in order:
- listens 'play game' button pressed.
- pulls information game button's data-attributes.
- opens modal loading animation.
- conditionally uses of information correct user token api service.
- conditionally uses of information post api service serves games themselves. response object contains url game itself.
- replace iframe
src
attribute url, shuts off loading animation , , displays iframe.
all relevant information - urls, codes, tokens, titles etc. - held in object called state
. each function used in chain of promises takes state object argument, , returns modified version. generally, have single side effect (normally dom update). updates have happen in sequential order, , have split every discrete action separate function whilst debugging (the updatestate
function object.assign
+ logging):
function gamesetuphandler(e, state) { const eventdata = rejectemptyprops($(e.target).data()); const isdemo = $(e.target).hasclass(state.demotriggerclass); promise.resolve(resetstate(state)) .then(getplayertokenandid) // ajax request 1 (#4 in above list) .then(disablegameloadbuttons) .then(state => updatestate(state, eventdata, { isdemo })) .then(setmodalgamestate) .then(calculateaspectratio) .then(calculatemodalsize) .then(setupresizehandler) .then(showmodal) .then(getlaunchurl) // ajax request 2 (#5 in above list) .then(setgamesrc) .then(showgame) .catch(error => console.log(error.message)); }
an example of 1 of simple functions:
function disablegameloadbuttons(state) { $(state.loadgame).attr('disabled', true); return state; }
where having issue in second ajax request. first ajax request looks this:
function getplayertokenandid(state) { return promise.resolve($.get('/api/lobby/playertoken') .done(response => { return updatestate(state, { playertoken: response.gametoken, playerid: response.userid }); }) .fail(() => alert(state.errormsgtoken))); }
that works fine: chaining continues, state updates, modal appears onscreen.
but second request more complex, , conditional:
function getlaunchurl(state) { const player = { playerid: (state.isdemo) ? 0 : state.playerid, playertoken: (state.isdemo) ? 'demotoken' : state.playertoken, currency: 'gbp', channel: 'desktop', language: 'en', autolaunch: false, isdemo: state.isdemo, sourceurl: '', sourcearea: '', tableid: state.tableid, technology: state.technology, }; if (state.url !== 'gms') { const url = state.url.replace('{player_token}', state.playertoken).replace('{player_id}', state.playerid); return updatestate(state, { url: url }); } return promise.resolve($.ajax({ url: `/gamelaunch/v1/games/${state.softwareid}/launch`, type: 'post', contenttype: 'application/json', data: json.stringify(player), headers: { 'x-correlation-token': uuid.v4(), 'x-site-code': state.sitecode, 'x-csrf-token': state.csrftoken } }) .done(response => updatestate(state, { url: response.launchurl })) .fail(() => { gameclosehandler(null, state); alert(state.errormsg); })); }
this followed in chain this:
function setgamesrc(state) { $(state.gameiframe).attr('src', state.url); return state; }
i can view state being updated - occurs fine. game url no problem in gamemodal.state
when check console logging. setgamesrc
function never seems fire, , game src never added dom, , game never shown. don't errors caught either. might missing stupid here, i've been going , forth, , can't see i'm failing do.
i'll post more code if requests
Comments
Post a Comment