Ajax在设置过滤器变量之前运行

时间:2018-08-25 22:43:38

标签: javascript

//为了阅读此代码,每个“场景”(又称带有唯一URL的页面)都包含多个“视图”(dom中又称为div);

//第1部分-监护人。监护人登录并自动进入查看603,代码开始。 $(document).on('knack-view-render.view_603',函数(event,view){     localStorage.clear();

// Declare a variable to be used later.
var guardian_id = [];

// Create a variable that contains an array of all the data brought into the view (I now have a variable with the guardian's data).
var data_view_603 = Knack.models['view_603'].toJSON();
var guardian_id = data_view_603.id;


// This code is going to need to keep data in variables across pages and java functions so I need to store the values of the variables
// in something I can get at later, so I use the browsers local storage to store the guardian's record ID.
localStorage.setItem("keep_guardian_id", data_view_603.id);

// Close the code that gathered information about the guardian.

});

///////////////////////////// NEW SCENE(PAGE URL)////////// //////////////

//第2部分-播放器。当监护人单击玩家表中的“注册”链接时(回到视图603),将加载一个新场景 //带有一些“视图”的顶视图具有玩家详细信息。这是视图695。

//当视图695呈现时,启动代码。 $(document).on('knack-view-render.view_695',函数(事件,视图){

// Declare a variable to be used later.
var player_id = [];

// Same as last time, create a variable that contains all of the data brought into the view (I now have a variable with the player's data).
var data_view_695 = Knack.models['view_695'].toJSON();

// create a few variables that can be stored over page loads for later use.
localStorage.setItem("keep_player_id", data_view_695.id);
localStorage.setItem("keep_player_age_now", data_view_695.field_475);
localStorage.setItem("keep_player_age_end", data_view_695.field_476);
localStorage.setItem("keep_player_age_min", data_view_695.field_1378);
localStorage.setItem("keep_player_age_max", data_view_695.field_1379);

// Close the code that gathered inforamtion about the player.

});

//在与玩家详细信息相同的场景上,我在“视图696”下方添加了一个视图(div)(此新的div称为视图702) //当场景最初加载时,它将为702创建一个没有内容的div。下面的代码将内容添加到视图702。

$(document).on('knack-view-render.view_702',函数(事件,视图){

        // Remember those variables I had to store somewhere to use later?
        // Now it's time to get the values back from memory and put them into this function for use.
        var keep_player_id = localStorage.getItem("keep_player_id");
        var keep_guardian_id = localStorage.getItem("keep_guardian_id");
        var keep_player_age_now = localStorage.getItem("keep_player_age_now");
        var keep_player_age_end = localStorage.getItem("keep_player_age_end");
        var keep_player_age_min = localStorage.getItem("keep_player_age_min");
        var keep_player_age_max = localStorage.getItem("keep_player_age_max");

        // This one gets the record ID of the logged in user.  
        var userID = Knack.getUserAttributes().id;

        // This part creates an array variable that stores the information I need to select records in an upcoming ajax call

        var filters = {
            'match': 'and',
            'rules': [{
                    'field': 'field_1350', //Min Player Age Allowed
                    'operator': 'lower than', // Less than
                    'value': keep_player_age_min // Player Age
                },
                {
                    'field': 'field_1349', //Max Player Age Allowed
                    'operator': 'higher than', //Greater than
                    'value': keep_player_age_max // Player Age
                },
                {
                    'field': 'field_1355', // Registration status
                    'operator': 'is', // is exactly
                    'value': 'open' // Registration status must be open to be included
                }
            ]
        };
        // now store the filter data into local storage in case we need it later.
        localStorage.setItem("filters", JSON.stringify(filters));

        // getting ready to run the ajax call
        var object60data = []; //setup success variable  
        var object60array = []; // setup success variable loop array
        var object60error = []; // setup error variable

        var i = 0; //setup loop counting variable

        var rowarray = []; //setup an array to store the table rows

        // Now I get the data I need from the Knack object using an API call
        $.ajax({
            // the URL of the api call tells knack wich object to look at and in this case
            // which field to sort the results by and that it should only get records that match the filter critera set in the filter variable
            url: 'https://api.knackhq.com/v1/objects/object_60/records/?sort_field=field_1328&sort_order=asc&filters=' + encodeURIComponent(JSON.stringify(filters)),
            type: 'GET',
            headers: {
                'X-Knack-Application-ID': '5a2edc<< HIDDEN >>d3f67c', // mystars APP ID
                'X-Knack-REST-API-Key': '60cd1090<< HIDDEN >>d4aebf' // my API key
            }, // Close API headers
            async: false, // tried this to stop code while this ajax call is running, but its not working.  Code is continuing.
            success: function (object60data) // if the API call was successful, put the results into a variable
            {
                var row = ''; // set a variable to blank for use later

                for (var i = 0; i < object60data.total_records; i++) // start a loop until all records returned have been parsed
                {
                    var object60array = { // this variable holds data for a moment during each loop
                        recordid: object60data.records[i].id, //record id
                        season: object60data.records[i].field_1297, //season
                        community: object60data.records[i].field_1299, //community
                        communityid: object60data.records[i].field_1299_raw, //community id 
                        gender: object60data.records[i].field_1315, //gender
                        type: object60data.records[i].field_1360, //type
                        feeraw: object60data.records[i].field_1295_raw, //feeraw
                        fee: object60data.records[i].field_1295, //fee
                        startdate: object60data.records[i].field_1328, //start date
                        sessions: object60data.records[i].field_1329, // number of sessions
                        description: object60data.records[i].field_1313, // description
                        minage: object60data.records[i].field_1350, // min age
                        maxage: object60data.records[i].field_1349, // max age
                        spotsavail: object60data.records[i].field_1357, // number of places available
                        title: object60data.records[i].field_1362, // title
                        status: object60data.records[i].field_1355 //status
                    }; // close object60array

                    var tablerowopen = ('<tr id = "' + object60array.recordid + '">'); // a variable setting the ID of each row in the table to the ID number of the record
                    var checkboxcell = ('<td><input type="checkbox"></td>'); // a variable to store the HTML required to create a checkbox at the start of the row
                    var typecell = ('<td>' + object60array.type + '</td>'); // a variable to take the data for this cell out of the array from above
                    var titlecell = ('<td>' + object60array.title + '</td>');
                    var startdatecell = ('<td>' + object60array.startdate + '</td>');
                    var sessionscell = ('<td>' + object60array.sessions + '</td>');
                    var feecell = ('<td>' + object60array.fee + '</td>');
                    var linkcell = ('<td class = "kn-table-link"><span><a href = "#view-program-details/' + object60array.recordid + '" class = "kn-link kn-link-page" address = "true"><span class = "level is-compact"><span class = "icon-is-left"><i class = "fa fa-binoculars"></i></span></a></span></td></tr>');
                    var tablerowclose = ('</tr>'); // close the table row.

                    // now I put all the HTML stored in each of the variables above together to make the HTML I need to create the entire row in the table
                    var row = row + tablerowopen + checkboxcell + typecell + titlecell + startdatecell + sessionscell + feecell + linkcell + tablerowclose;

                    // add this row to the row array variable  
                    rowarray[i] = row;

                }; //close the loop

                localStorage.setItem("rowarray_length", rowarray.length); //store the legth of the array

                // the button code below is not needed... i could just write out the results of the table without the user clicking a button
                // but the table kept loading with no results so I tried adding a button to see if I could slow the code down long
                // enough to have things catch up.  It did not work.

                document.getElementById("view_702").innerHTML = '<button id="load_programs"">We found ' + object60data.total_records + ' programs for this player.  Click here to load.</button>'; // Add a button below table

            }, // Close success function
            error: function (object60error) // if the API call fails, store the message from knack in this variable
            {
                alert('line 1103 ERROR! object60error is: ' + JSON.stringify(object60error)); // pop up a message box showing the error message from knack
            } //close the error function
        }); // Close the ajax function 

        /////////////// THIS IS WHERE THE PROBLEM IS -- THE CODE ABOVE FINISHES THE FIRST TIME WITH NO RESULTS BECAUSE THE FILTER VARIABLE IS NULL WHEN THE AJAX RUNS.  THEN THE USER REFRESHES AND IT WORKS FINE BECAUSE THE FILTER VARIABLE HAS VALUE.  HOW CAN I PREVENT AJAX FROM RUNNING WITHOUT THE FILTER HAVING VALUE?

0 个答案:

没有答案