call php function without reloading page?

[garyed]

I have a php file that pulls information from another source & takes about 5 to 10 seconds to load.  

After it loads I want to be able to run a php function from the page without waiting for it to reload. 

I found a simple way to do it wit Javascript but my research is telling me it's very dangerous & would open the server to malicious attacks. 

I'm trying to understand why & also to see if there is another simple option to do it. Here's an example of the code I'm using:

<?php
function tester() {
$x= "Get or do anything you want from the server";
echo $x; 
}
?>
<script>
function test1() {
var test = "<?php echo tester(); ?>";
document.getElementById("tx1").innerHTML=test;
}
</script>

<div id="tx1">This shows on page load </div>
<button onclick="test1();"> call php function</button>  

   

Edited March 26 by garyed

[gw1500se]

Javascript is client side code and does not interface with the server. I don't know why/where you got the information that it was dangerous for the server. If it calls a php program on the server the there may be a vulnerability but you can write your php code to assure no unauthorized access.

[garyed]

To go a little further into what I'm planning to do with my php function is to edit a mysql database. 

That's why I was concerned when I read about my javascreipt method of calling the php function being insecure. 

I was trying to figure out how calling a php function with javascript would be any more insecure than any php code that is executed when a page loads.  

 

[mac_gyver]

browsers, including javascript running in the browser, make http(s) requests to web servers. the browser/javascript is not directly calling anything in the php code. the server-side code, on the page that you make the http(s) request to, would build and execute any edit/update query for a database.

to use javascript to make a http(s) request, after the page has been requested and sent to the browser, you would make the request using ajax. see - https://developer.mozilla.org/en-US/docs/Glossary/AJAX

all data submitted in http(s) requests to a web site can come from anywhere, not just your web pages, can be set to anything, and cannot be trusted. you must use the data securely in whatever context you are using it in. if the edit/update operation requires a logged in user having permission to perform an update query, the server-side code must have logic to enforce these conditions. the actual query must securely use the data to protect against any sql special characters in a value being able to break the sql query syntax. the simplest way of providing this protection, for all data types, is to use a prepared query.

what does reading information from a source that takes a long time have to do with editing/updating data in a database?

 

[garyed]

4 hours ago, mac_gyver said:

browsers, including javascript running in the browser, make http(s) requests to web servers. the browser/javascript is not directly calling anything in the php code. the server-side code, on the page that you make the http(s) request to, would build and execute any edit/update query for a database.

to use javascript to make a http(s) request, after the page has been requested and sent to the browser, you would make the request using ajax. see - https://developer.mozilla.org/en-US/docs/Glossary/AJAX

all data submitted in http(s) requests to a web site can come from anywhere, not just your web pages, can be set to anything, and cannot be trusted. you must use the data securely in whatever context you are using it in. if the edit/update operation requires a logged in user having permission to perform an update query, the server-side code must have logic to enforce these conditions. the actual query must securely use the data to protect against any sql special characters in a value being able to break the sql query syntax. the simplest way of providing this protection, for all data types, is to use a prepared query.

what does reading information from a source that takes a long time have to do with editing/updating data in a database?

 

I get what you're saying about the server side protecting against a malicious query & I understand I need to work on that. 

My real question is whether there any more danger in using my javascript example to call the php function than if I was to use ajax instead. 

As for the time issue, when the page loads it pulls data from other sources that are not from my server & that is what takes so long. 

Editing my database is virtually instantaneous so there is quite a bit of down time saved if I can do it without reloading the page every time the database is edited.

  

[mac_gyver]

3 minutes ago, garyed said:

My real question is whether there any more danger in using my javascript example to call the php function than if I was to use ajax instead. 

danger of what?

your example doesn't do what you think. the javascript is NOT calling the php function. the php code runs on the web server when the page is requested. the php code is echoing whatever the function produces (and the echo tester(); statement echoes a null value because the function is not returning anything.) if you look at the 'view source' in the browser of the page that this code is on, the output from the php code is already there. all the javascript is doing is taking what was assigned to the test variable and putting it into the id="tx1" element. the code might as well just directly echo whatever the function produces in the markup for the id="tx1" element.

13 minutes ago, garyed said:

Editing my database is virtually instantaneous so there is quite a bit of down time saved if I can do it without reloading the page every time the database is edited.

how often does this remote data change? you would need to cache/persistently store this remote data somewhere in order to avoid reading it again. web servers are stateless. they don't know or care what happens outside of the current http(s) request they are serving. when the php code  on a page ends, all the resources used in the code are destroyed, so the remote data that you read is destroyed.

perhaps if you provide a more helpful example of what you are trying to accomplish, rather than your proposed solution for accomplishing it?

[garyed]

1 hour ago, mac_gyver said:

danger of what?

your example doesn't do what you think. the javascript is NOT calling the php function. the php code runs on the web server when the page is requested. the php code is echoing whatever the function produces (and the echo tester(); statement echoes a null value because the function is not returning anything.) if you look at the 'view source' in the browser of the page that this code is on, the output from the php code is already there. all the javascript is doing is taking what was assigned to the test variable and putting it into the id="tx1" element. the code might as well just directly echo whatever the function produces in the markup for the id="tx1" element.

how often does this remote data change? you would need to cache/persistently store this remote data somewhere in order to avoid reading it again. web servers are stateless. they don't know or care what happens outside of the current http(s) request they are serving. when the php code  on a page ends, all the resources used in the code are destroyed, so the remote data that you read is destroyed.

perhaps if you provide a more helpful example of what you are trying to accomplish, rather than your proposed solution for accomplishing it?

I thought I could just change the php function in my example to a mysql call to edit a database & it would work from plain javascipt but I was obvuiously wrong.

Thanks for setting me straight before I wasted any more time. It looks like I'm going to have to learn some ajax to do what I want. 

As for the page reloading time issue,

I'm sure I can solve the time issue using just php code but I wanted to learn a way to execute a php function without reloading the page.

[mac_gyver]

i'm going to guess that the overall goal you are trying to accomplish is reading data from an api and insert new data into a database table or update existing data? if so, you can accomplish the insert new data/update existing data using a single query. see - https://dev.mysql.com/doc/refman/8.4/en/insert-on-duplicate.html

[garyed]

3 hours ago, mac_gyver said:

i'm going to guess that the overall goal you are trying to accomplish is reading data from an api and insert new data into a database table or update existing data? if so, you can accomplish the insert new data/update existing data using a single query. see - https://dev.mysql.com/doc/refman/8.4/en/insert-on-duplicate.html

Unless I'm missing something that link only descibes how to edit the mysql database which I arleady have no problem with. 

My only prblem is eidting the databse without having to reload the webpage. 

I'm not sure what API you're referring to but I didn't see it on the link you posted but I'm not even sure what API really is.

What I'm looking for is a some way whether it's javascript, ajaxj,jquery or something else that will tell a php function to run on the server without reloding the page.

[gw1500se]

Sounds like an Ajax app to me.

[gizmola]

On 3/27/2025 at 10:09 AM, garyed said:

 

What I'm looking for is a some way whether it's javascript, ajaxj,jquery or something else that will tell a php function to run on the server without reloding the page.

 

Every browser has a DOM built into it which represents the HTML elements and styles the browser has created from the underlying HTML/CSS and Javascript code.  

To manipulate the page, once the HTTP response from the server is complete, you need to use javascript.  That is not inherently dangerous, given the limitations that are built into browsers, and standard security models like CORS which you can read more about here:  https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CORS

So yes, you want to use "ajax" which is a generalized term for using javascript functions (should use fetch at this point) to retrieve data, and from there to make updates to the DOM that is loaded.

[Strider64]

Yes, using fetch is easier in my opinion and here's an example of a page on my website (not the full code):

'use strict';

class ProductManager {
    constructor() {
        // DOM Elements
        this.category = document.querySelector('#category');
        this.container = document.querySelector('.main_manager_container');
        this.sidebar = document.querySelector('.sidebar_pages');
        this.lightbox = document.querySelector('.lightbox');



        // Pagination Configurations
        this.current_page = 1;
        this.per_page = 3;
        this.offset = 0;
        this.total_pages = 0;

        // Data fetched from the database
        this.database_data = {
            'category': 'images',
            'current_page': this.current_page,
            'per_page': this.per_page,
            'total_count': 0,
            'offset': this.offset
        };
        this.pages = [{}];

        // Binding `this` context to methods
        this.categoryUISuccess = this.categoryUISuccess.bind(this);
        this.paginationUISuccess = this.paginationUISuccess.bind(this);
        this.resetLinks = this.resetLinks.bind(this);
    }

    // Handle fetch errors
    handleErrors(response) {
        if (!response.ok) {
            throw (response.status + ' : ' + response.statusText);
        }
        return response;
    }

    // Update the UI upon successfully fetching gallery category data
    async categoryUISuccess(parsedData) {
        this.clearContainer();
        console.log('parsed data', parsedData);

        // Close the lightbox if it's open
        this.exitLightbox();

        parsedData.forEach((slide, index) => {
            this.createSlide(slide, index);
        });

        this.addImageListeners();
    }


    // Clear all child elements of the container
    clearContainer() {
        while (this.container.firstChild) {
            this.container.removeChild(this.container.firstChild);
        }
    }

    // Function to truncate text and add a "More..." link
    addReadMore(paragraph) {
        const fullText = paragraph.textContent;
        const truncatedText = fullText.slice(0, 300) + '...'; // Adjust the number of characters as needed
        const moreLink = document.createElement('span');
        moreLink.textContent = ' More...';
        //moreLink.style.color = 'blue';
        //moreLink.style.cursor = 'pointer';

        paragraph.textContent = truncatedText;
        paragraph.appendChild(moreLink);
        paragraph.dataset.fullText = fullText;

        moreLink.addEventListener('click', function() {
            if (paragraph.textContent.includes('...')) {
                paragraph.textContent = paragraph.dataset.fullText;
                moreLink.textContent = ' Less';
            } else {
                paragraph.textContent = truncatedText;
                paragraph.appendChild(moreLink);
            }
        });
    }

    equalizeArticleHeights() {
        const articles = document.querySelectorAll('.article');
        let maxHeight = 0;

        // Find the tallest article
        articles.forEach(article => {
            if (article.offsetHeight > maxHeight) {
                maxHeight = article.offsetHeight;
            }
        });

        // Set all articles to the height of the tallest one
        articles.forEach(article => {
            article.style.minHeight = `${maxHeight}px`;
        });
    }

    // Create individual gallery slides
    createSlide(slide) {
        const article = this.createElementWithClass('section', 'article');
        this.container.appendChild(article);

        const largeImage = this.createElementWithClass('a', 'largeImage');
        largeImage.href = "#";
        largeImage.setAttribute('data-image', slide.image_path);
        // Updated part: Attach event listener to largeImage
        largeImage.addEventListener('click', (event) => {
            event.preventDefault(); // Prevent default anchor action
            this.handleImageClick(largeImage);
        });
        article.appendChild(largeImage);
        console.log('largeImage', largeImage);

        const image = this.createElement('img', {
            src: slide.thumb_path,
            alt: slide.content,
            loading: 'lazy',
            class: 'imageStyle'
        });
        largeImage.appendChild(image);
        const heading = this.createElementWithClassAndContent('h2', 'articleHeading', slide.heading);
        article.appendChild(heading);
        const paragraph = this.createElementWithClassAndContent('p', 'articleText', slide.content);
        article.appendChild(paragraph);
        // Truncate text and add "More..." link
        this.addReadMore(paragraph);
        this.equalizeArticleHeights();
    }
    // Utility function to create an HTML element with attributes
    createElement(tag, attributes = {}) {
        const element = document.createElement(tag);
        Object.entries(attributes).forEach(([key, value]) => {
            element.setAttribute(key, value);
        });
        return element;
    }
    createElementWithClass(tag, className) {
        const element = this.createElement(tag);
        element.className = className;
        return element;
    }
    createElementWithClassAndContent(tag, className, content) {
        const element = this.createElementWithClass(tag, className);
        element.textContent = content;
        return element;
    }
    // Add click event listeners to images to open in lightbox
    addImageListeners() {
        const images = document.querySelectorAll('img');
        images.forEach(image => {
            image.addEventListener('click', () => this.handleImageClick(image));
        });
    }

    // Add click event listener to lightbox to close it
    addLightboxListener() {
        this.lightbox.addEventListener('click', () => {
            this.exitLightbox();
        });
    }


// Updated handleImageClick to include title and content
    handleImageClick(anchor) {
        const largeImageUrl = anchor.getAttribute('data-image'); // Get large image URL
        const title = anchor.getAttribute('data-title'); // Assuming you add this attribute
        const content = anchor.getAttribute('data-content'); // Assuming you add this attribute

        // Clear and set up the lightbox
        this.lightbox.innerHTML = ''; // Clear previous content

        // Create and display the large image
        const largeImage = this.createElement('img', { src: largeImageUrl });
        largeImage.classList.add('lightbox-image');
        this.lightbox.appendChild(largeImage);

        // Create and append the title
        if (title) {
            const imageTitle = this.createElementWithClassAndContent('h2', 'lightbox-title', title);
            this.lightbox.appendChild(imageTitle);
        }

        // Create and append the content
        if (content) {
            const imageContent = this.createElementWithClassAndContent('p', 'lightbox-content', content);
            this.lightbox.appendChild(imageContent);
        }

        // Show the lightbox
        this.lightbox.style.display = 'block';
    }

    // Close the lightbox
    exitLightbox() {
        this.lightbox.style.display = 'none'; // Hide the lightbox
        this.lightbox.innerHTML = ''; // Clear the lightbox content
    }

    // Handle errors when fetching gallery category data fails
    categoryUIError(error) {
        console.log("Database Table did not load", error);
    }

    // Send a request to the server to fetch images
    async createImageRequest(url, succeed, fail) {
        try {
            const response = await fetch(url, {
                method: 'POST', // or 'PUT'
                body: JSON.stringify(this.database_data),
            });

            this.handleErrors(response);

            const data = await response.json();
            succeed(data);
        } catch (error) {
            fail(error);
        }
    }

    // Clear all pagination links
    resetLinks() {
        /* Remove Links For Screen (cleanup) */
        while (this.sidebar.firstChild) {
            this.sidebar.removeChild(this.sidebar.firstChild)
        }
    }

    // Update the UI with the received pagination data
    async paginationUISuccess(parsedData) {
        this.resetLinks();

        this.database_data.offset = await parsedData.offset;
        this.total_pages = Math.ceil(this.database_data.total_count / this.database_data.per_page);

        /* Create the Display Links and add an event listener */
        this.pages = [{}];
        /*
         * Creating the array of page object(s)
         */
        for (let x = 0; x < this.total_pages; x++) {
            this.pages[x] = {page: x + 1};
        }

        this.pages.forEach(link_page => {
            const links = document.createElement('div');
            links.className = 'links';
            this.sidebar.appendChild(links);
            /*
             * Add event listener for the links
             */
            links.addEventListener('click', () => {
                this.database_data.current_page = link_page.page;
                this.createRequest('portfolioPagination.php', this.paginationUISuccess, this.paginationUIError);
            });

            const pageText = document.createElement('p');
            pageText.className = 'linkStyle';
            pageText.id = 'page_' + link_page.page;
            pageText.textContent = link_page.page;
            links.appendChild(pageText);
            if (this.database_data.current_page === link_page.page) {
                links.style.backgroundColor = "#00b28d";
            }
        })

        await this.createImageRequest('portfolioGetImages.php', this.categoryUISuccess, this.categoryUIError);
    }


    // Handle errors when fetching pagination data fails
    paginationUIError(error) {
        console.log("Database Table did not load", error);
    }

    // Send a request to the server
    async createRequest(url, succeed, fail) {
        try {
            const response = await fetch(url, {
                method: 'POST', // or 'PUT'
                body: JSON.stringify(this.database_data),
            });

            this.handleErrors(response);

            const data = await response.json();
            //console.log('count', data);
            succeed(data);
        } catch (error) {
            fail(error);
        }
    }

    // Send a request to get the total number of images in a category
    async updateTotalCountAndPagination() {
        await this.createRequest('getTotalCount.php', this.totalCountUISuccess.bind(this), this.totalCountUIError.bind(this));
    }

    // Update the UI upon successfully fetching the total count
    totalCountUISuccess(parsedData) {
        this.database_data.total_count = parsedData.total_count;
        this.createRequest('portfolioPagination.php', this.paginationUISuccess.bind(this), this.paginationUIError.bind(this));
    }

    // Handle errors when fetching the total count fails
    totalCountUIError(error) {
        console.log("Database Table did not load", error);
    }

    // Add event listeners to DOM elements
    bindEvents() {
        this.category.addEventListener('change', () => {
            this.database_data.current_page = 1;
            this.database_data.category = this.category.value;
            this.updateTotalCountAndPagination();
        });

        document.addEventListener('DOMContentLoaded', () => {
            this.createRequest('portfolioPagination.php', this.paginationUISuccess.bind(this), this.paginationUIError.bind(this));
        });
    }

    // Initialization function
    init() {
        this.addLightboxListener();
        this.updateTotalCountAndPagination();
        this.bindEvents();
    }
}

const productManager = new ProductManager();
productManager.init();

and the main PHP file:
 

<?php
// Load the configuration settings and Composer's autoloader to manage dependencies.
require_once __DIR__ . '/../config/clearwebconfig.php';
require_once "vendor/autoload.php";

// Import necessary classes from the clearwebconcepts namespace for error handling, database interaction, and image management.
use clearwebconcepts\{
    ErrorHandler,
    Database,
    ImageContentManager,
};

// Create an instance of the ErrorHandler to handle exceptions throughout the script.
$errorHandler = new ErrorHandler();

// Register the custom exception handler to delegate exception handling to the ErrorHandler class.
set_exception_handler([$errorHandler, 'handleException']);

// Initialize a Database instance and create a PDO connection for database access.
$database = new Database();
$pdo = $database->createPDO();

// Placeholder for optional arguments that might be needed by the ImageContentManager.
$args = [];

// Create an instance of the ImageContentManager for managing image content in the specified portfolio gallery.
$gallery = new ImageContentManager($pdo, $args, 'portfolio');

// Initialize an empty array to hold input data parsed from the request body.
$database_data = [];

try {
    /*
     * Attempt to retrieve and decode JSON input from the HTTP request body.
     * JSON_THROW_ON_ERROR ensures a JsonException is thrown in case of any decoding issues.
     */
    $database_data = json_decode(file_get_contents('php://input'), true, 512, JSON_THROW_ON_ERROR);
} catch (JsonException $e) {
    // Handle decoding errors silently; optional logging can be added here.
}

/*
 * Retrieve paginated image content from the ImageContentManager.
 * This method takes the number of items per page, the offset, the gallery type ('portfolio'),
 * and an optional category filter from the decoded input data.
 */
$send = $gallery->page(
    (int)$database_data['per_page'],
    (int)$database_data['offset'],
    'portfolio',
    $database_data['category']
);

// Output the resulting image data to the client in JSON format.
output($send);

/**
 * Outputs the given data as a JSON response with HTTP 200 status.
 *
 * @param mixed $output The data to be encoded and sent in the HTTP response body.
 */
function output($output): void
{
    http_response_code(200);
    try {
        // Encode the output data as JSON and send it to the client.
        echo json_encode($output, JSON_THROW_ON_ERROR);
    } catch (JsonException) {
        // Fail silently on JSON encoding errors; optional error handling can be added here.
    }
}

and the page itself: https://www.clearwebconcepts.com/portfolio.php