SA-MP Forums Archive
How do I make a php page to load in background? - Printable Version

+- SA-MP Forums Archive (https://sampforum.blast.hk)
+-- Forum: Other (https://sampforum.blast.hk/forumdisplay.php?fid=7)
+--- Forum: Everything and Nothing (https://sampforum.blast.hk/forumdisplay.php?fid=23)
+--- Thread: How do I make a php page to load in background? (/showthread.php?tid=657837)


How do I make a php page to load in background? - Mr.Anonymous - 16.08.2018

I have a MySQL table with 6000+ rows and 4 columns. When the user lands on the page, the website loads around 500 rows of data (plus 4 columns). I also have a button where if the user clicks it, it loads the remaining 5500 rows of data. Now this takes a huge time. Is there any way to load the remaining rows in background and when the user clicks on the button, the results are displayed instantly? I don’t want to implement the load more on scroll method because of certain issues.

Re: How do I make a php page to load in background? - Sew_Sumi - 16.08.2018

You're not pushing the button fast enough.

Re: How do I make a php page to load in background? - Mr.Anonymous - 16.08.2018

Quote:
Originally Posted by Sew_Sumi
Посмотреть сообщение
You're not pushing the button fast enough.
No I mean is there a way to preload the data from the table but only show them when the button is clicked?

Re: How do I make a php page to load in background? - harsimarriar96 - 16.08.2018

You can use AJAX (Asynchronous javascript and XML) to accomplish what you want.

and use javascript to show only certain amount of results in the first place and hide the others.

Re: How do I make a php page to load in background? - iLearner - 16.08.2018

Why would you load all those rows at once anyway my man, what I do is load a few rows with pagination, every time a user requests a page the respective rows are loaded.

Additionally you could offer a search feature

Re: How do I make a php page to load in background? - CoaPsyFactor - 16.08.2018

Here is js code, you put this in your main js, or inside <script> tags on index (main) file.
Just replace "PUT_YOUR_URL_HERE" with your url

After request is finished successfully your data will be stored in "window.API_DATA"

NOTE: API Must return proper JSON format
NOTE: ES6 is supported on most current generation browsers, you can checkout compatibility table here

PHP код:
'use strict'
const API_ENDPOINT = 'PUT_YOUR_URL_HERE';
(() => {
    const STATUS = {
        OK: 200
    };
    const ERROR = {
        NONE: 'NONE',
        PARSE: 'INVALID_JSON',
        STATUS: 'INVALID_STATUS_CODE'
    };
    const loadData = (url, data = {}) => {
        return new Promise((resolve, reject) => {
            const xhr = new XMLHttpRequest();
            // Using traditional function definition
            // to prevent invalid context (this)
            xhr.onreadystatechange = function () {
                if (XMLHttpRequest.DONE !== this.readyState) {
                    // Not resolving nor rejecting as we need this promise to be done when request is
                    return;
                }
                if (STATUS.OK !== this.status) {
                    // In case that status code is not 200 (OK) we assume something went wrong
                    return reject({ error: ERROR.STATUS, url });
                }
                let data;
                try {
                    data = JSON.parse(this.responseText);
                } catch (error) {
                    // In case that server response was not valid json
                    // we reject this promise with proper error
                    return reject({ error: ERROR.PARSE, response: this.responseText, url });
                }
                return resolve({ error: ERROR.NONE, data });
            };
            xhr.open('GET', url, true);
            xhr.send();
        });
    };
    window.onload = () => {
        loadData(API_ENDPOINT)
            .then((data) => { window.API_DATA = data; })
            .catch((error) => { console.error(error); });
    };
})(); 


Re: How do I make a php page to load in background? - harsimarriar96 - 17.08.2018

Quote:
Originally Posted by CoaPsyFactor
Посмотреть сообщение
Here is js code, you put this in your main js, or inside <script> tags on index (main) file.
Just replace "PUT_YOUR_URL_HERE" with your url

After request is finished successfully your data will be stored in "window.API_DATA"

NOTE: API Must return proper JSON format
NOTE: ES6 is supported on most current generation browsers, you can checkout compatibility table here

PHP код:
'use strict'
const API_ENDPOINT = 'PUT_YOUR_URL_HERE';
(() => {
    const STATUS = {
        OK: 200
    };
    const ERROR = {
        NONE: 'NONE',
        PARSE: 'INVALID_JSON',
        STATUS: 'INVALID_STATUS_CODE'
    };
    const loadData = (url, data = {}) => {
        return new Promise((resolve, reject) => {
            const xhr = new XMLHttpRequest();
            // Using traditional function definition
            // to prevent invalid context (this)
            xhr.onreadystatechange = function () {
                if (XMLHttpRequest.DONE !== this.readyState) {
                    // Not resolving nor rejecting as we need this promise to be done when request is
                    return;
                }
                if (STATUS.OK !== this.status) {
                    // In case that status code is not 200 (OK) we assume something went wrong
                    return reject({ error: ERROR.STATUS, url });
                }
                let data;
                try {
                    data = JSON.parse(this.responseText);
                } catch (error) {
                    // In case that server response was not valid json
                    // we reject this promise with proper error
                    return reject({ error: ERROR.PARSE, response: this.responseText, url });
                }
                return resolve({ error: ERROR.NONE, data });
            };
            xhr.open('GET', url, true);
            xhr.send();
        });
    };
    window.onload = () => {
        loadData(API_ENDPOINT)
            .then((data) => { window.API_DATA = data; })
            .catch((error) => { console.error(error); });
    };
})(); 
ES6 can be transpiled using Babel

Re: How do I make a php page to load in background? - CoaPsyFactor - 17.08.2018

Quote:
Originally Posted by harsimarriar96
Посмотреть сообщение
ES6 can be transpiled using Babel
Yup, I know, but then arrow functions and their context are gone (compiled to traditional), let variables are also changing their scope.... in other words, if you don't plan on supporting browers that does nit implement new ES, Avoid using any transpiler....

Re: How do I make a php page to load in background? - Mr.Anonymous - 18.08.2018

Quote:
Originally Posted by CoaPsyFactor
Посмотреть сообщение
Here is js code, you put this in your main js, or inside <script> tags on index (main) file.
Just replace "PUT_YOUR_URL_HERE" with your url

After request is finished successfully your data will be stored in "window.API_DATA"

NOTE: API Must return proper JSON format
NOTE: ES6 is supported on most current generation browsers, you can checkout compatibility table here

PHP код:
code... 
Wow thanks a lot for that function. I really appreciate it

Re: How do I make a php page to load in background? - CoaPsyFactor - 18.08.2018

Quote:
Originally Posted by Mr.Anonymous
Посмотреть сообщение
Wow thanks a lot for that function. I really appreciate it
Don't mention it
Hope it will help.