Dynamic Web Page Element Update Mechanism

Resolve Bottlenecks,
Find Innovative SolutionsGenerate Solutions

Solution Overview

Problem

Conventional methods for refreshing web pages are resource-intensive, disrupting the user interface and requiring extensive processing and bandwidth due to the need for full page reloads, which is inefficient and inconvenient for both users and servers.

Innovation Solution

A system and method for dynamically updating web pages by allowing multiple page elements to be refreshed in response to a single request, where updated elements are generated and transmitted from a server to a client device for insertion into the page, reducing the need for full page reloads and optimizing resource usage.

Engineering Contradictions & Design Principles

VSEngineering Contradiction Analysis

1Reliability

If conventional full page refresh is used, then the entire website content is updated, but the user interface is disrupted and processing resources are heavily consumed

Engineering Contradiction:

Improvecontent update completenessVSAvoiduser interface responsiveness

Core Design Contradiction:

ReliabilityVSProductivity

Solution Approach 1:

The patent segments the web page into multiple independent updateable sections (e.g., header, content, sidebar, footer). Instead of refreshing the entire page, only specific segments are updated based on user interaction or data changes. This is achieved through client-side code that identifies and updates only the necessary DOM elements, maintaining user interface responsiveness while ensuring content accuracy.

Inventive Principle:

Principle #1Segmentation

Solution Approach 2:

The patent extracts the update logic from the traditional full page refresh mechanism. The client-side code selectively retrieves and applies only the necessary data changes to specific page segments, rather than re-fetching and re-rendering the entire page. This extraction reduces processing overhead and maintains UI continuity.

Inventive Principle:

Principle #2Taking out (Extraction)

2Reliability

If conventional full page refresh is used, then all content is updated, but bandwidth resources are heavily consumed

Engineering Contradiction:

Improvecontent update completenessVSAvoidbandwidth consumption

Core Design Contradiction:

ReliabilityVSLoss of energy

Solution Approach 1:

The patent extracts and transmits only the specific data changes needed for updating particular page segments, rather than transmitting the entire page content. The client-side code receives minimal data packets containing only the changed elements, significantly reducing bandwidth consumption while maintaining content update reliability.

Inventive Principle:

Principle #2Taking out (Extraction)

Solution Approach 2:

The patent applies partial action by updating only the necessary portions of the page rather than the entire page. The system determines the minimum required data transmission needed to achieve the update goal, avoiding unnecessary data transfer and optimizing bandwidth utilization.

Inventive Principle:

Principle #16Partial or excessive action

3Productivity

If AJAX is used to refresh content, then the user interface remains responsive, but multiple requests are required for each page section update

Engineering Contradiction:

Improveuser interface responsivenessVSAvoidrequest management complexity

Core Design Contradiction:

ProductivityVSDevice complexity

Solution Approach 1:

The patent merges multiple individual section update requests into a single coordinated request mechanism. The client-side code can request updates for multiple segments simultaneously or in an optimized sequence, reducing the overall number of network round-trips and simplifying request management while maintaining UI responsiveness.

Inventive Principle:

Principle #5Merging (Combining)

Solution Approach 2:

The patent creates a universal update mechanism that can handle multiple different page sections through a single request interface. The system uses a standardized protocol that works across different content types and locations, reducing the complexity of managing separate request logic for each section.

Inventive Principle:

Principle #6Universality (Multi-functionality)

4Productivity

If AJAX is used to refresh content, then content can be updated dynamically, but client-side processing resources are heavily consumed

Engineering Contradiction:

Improvecontent update capabilityVSAvoidclient-side processing energy

Core Design Contradiction:

ProductivityVSUse of energy by moving object

Solution Approach 1:

The patent extracts the heavy processing workload from the client-side and relocates it to the server-side. The server prepares and formats the update data before transmission, so the client only needs to perform minimal DOM manipulation operations. This extraction significantly reduces client-side processing energy consumption while maintaining dynamic content update capability.

Inventive Principle:

Principle #2Taking out (Extraction)

Data Source

PatentUS10534831B2Systems and methods for updating rich internet applications

Publication Date: 2020.01.14 CBS INTERACTIVE INC

AI summary

Systems, computer-implemented methods, and media for updating content of a page composed of markup language in response to a triggering event method include: receiving a request that indicates a triggering event; determining the type of triggering event based on the request; determining at least one page element from amongst plural page elements of the page to be updated based on the request; generating a response to the request, the response including metadata indicating the at least one page element and the content of the at least one page element, the content of the at least one page element being composed of the markup language; and transmitting the response.