From 48dd6120fe8b7b5944be0df1b3145b81fc264e0c Mon Sep 17 00:00:00 2001
From: Sergey Panteleev <sergey@php.net>
Date: Wed, 13 Aug 2025 18:47:59 +0300
Subject: [PATCH 1/6] Update downloads content without full page reload

---
 downloads.php | 26 ++++++++++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/downloads.php b/downloads.php
index ae8ba587d4..021afb805b 100644
--- a/downloads.php
+++ b/downloads.php
@@ -218,10 +218,32 @@ function option(string $value, string $desc, $attributes = []): string
 
     <script>
         window.onload = function () {
-            let form = document.getElementById("instructions-form")
+            const form = document.getElementById("instructions-form")
+            const instructions = document.getElementById("instructions")
 
             form.addEventListener('change', function () {
-                form.submit();
+                const params = new URLSearchParams(new FormData(form)).toString()
+
+                const newUrl = form.action.split('?')[0] + '?' + params;
+                history.pushState(null, '', newUrl);
+
+                fetch(form.action + '?' + params)
+                    .then(response => response.text())
+                    .then(html => {
+                        const parser = new DOMParser();
+                        const doc = parser.parseFromString(html, 'text/html');
+
+                        const newForm = doc.querySelector('#instructions-form');
+                        const newInstructions = doc.querySelector('#instructions');
+
+                        if (newForm) form.innerHTML = newForm.innerHTML;
+                        if (newInstructions) instructions.innerHTML = newInstructions.innerHTML;
+
+                        if (window.Prism && typeof Prism.highlightAll === 'function') {
+                            Prism.highlightAll();
+                        }
+                    })
+                    .catch(err => console.error('Request failed', err));
             });
         }
     </script>

From 1d3e3809106dc466f2f458894c98574ff644fc71 Mon Sep 17 00:00:00 2001
From: Sergey Panteleev <sergey@php.net>
Date: Wed, 13 Aug 2025 19:42:27 +0300
Subject: [PATCH 2/6] PoC: Use AbortController

---
 downloads.php | 24 +++++++++++++++++++-----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/downloads.php b/downloads.php
index 021afb805b..a5c335b397 100644
--- a/downloads.php
+++ b/downloads.php
@@ -217,17 +217,22 @@ function option(string $value, string $desc, $attributes = []): string
 <?php endif; ?>
 
     <script>
+        let currentController = null;
+
         window.onload = function () {
             const form = document.getElementById("instructions-form")
             const instructions = document.getElementById("instructions")
 
             form.addEventListener('change', function () {
-                const params = new URLSearchParams(new FormData(form)).toString()
+                if (currentController) {
+                    currentController.abort();
+                }
 
-                const newUrl = form.action.split('?')[0] + '?' + params;
-                history.pushState(null, '', newUrl);
+                currentController = new AbortController();
+
+                const params = new URLSearchParams(new FormData(form)).toString()
 
-                fetch(form.action + '?' + params)
+                fetch(form.action + '?' + params, {signal: currentController.signal})
                     .then(response => response.text())
                     .then(html => {
                         const parser = new DOMParser();
@@ -242,8 +247,17 @@ function option(string $value, string $desc, $attributes = []): string
                         if (window.Prism && typeof Prism.highlightAll === 'function') {
                             Prism.highlightAll();
                         }
+
+                        const newUrl = form.action.split('?')[0] + '?' + params;
+                        history.pushState(null, '', newUrl);
+                    })
+                    .catch(err => {
+                        if (err.name === 'AbortError') {
+                            return
+                        }
+
+                        console.error('Request failed:', err);
                     })
-                    .catch(err => console.error('Request failed', err));
             });
         }
     </script>

From 85f93f0a8717ec25671cde31bff75ad5d4070407 Mon Sep 17 00:00:00 2001
From: Sergey Panteleev <sergey@php.net>
Date: Sat, 16 Aug 2025 14:36:58 +0300
Subject: [PATCH 3/6] Handle back and forward navigation, and `response.ok`
 behavior

---
 downloads.php | 93 ++++++++++++++++++++++++++++++---------------------
 1 file changed, 54 insertions(+), 39 deletions(-)

diff --git a/downloads.php b/downloads.php
index a5c335b397..45b0db5a24 100644
--- a/downloads.php
+++ b/downloads.php
@@ -219,47 +219,62 @@ function option(string $value, string $desc, $attributes = []): string
     <script>
         let currentController = null;
 
-        window.onload = function () {
-            const form = document.getElementById("instructions-form")
-            const instructions = document.getElementById("instructions")
-
-            form.addEventListener('change', function () {
-                if (currentController) {
-                    currentController.abort();
-                }
-
-                currentController = new AbortController();
+        function loadInstructions(url) {
+            const form = document.querySelector('#instructions-form')
+            const instructions = document.getElementById('instructions')
+
+            if (currentController) {
+                currentController.abort()
+            }
+            currentController = new AbortController()
+
+            fetch(url, {signal: currentController.signal})
+                .then(response => {
+                    if (!response.ok) {
+                        instructions.innerHTML = `<p class="error">Error ${response.status}: Unable to load data.</p>`
+                        throw new Error(`HTTP ${response.status} ${response.statusText}`)
+                    }
+                    return response.text()
+                })
+                .then(html => {
+                    const parser = new DOMParser();
+                    const doc = parser.parseFromString(html, 'text/html')
+
+                    const newForm = doc.querySelector('#instructions-form')
+                    const newInstructions = doc.querySelector('#instructions')
+
+                    if (newForm && form) form.innerHTML = newForm.innerHTML
+                    if (newInstructions && instructions) instructions.innerHTML = newInstructions.innerHTML
+
+                    if (window.Prism && typeof Prism.highlightAll === 'function') {
+                        Prism.highlightAll()
+                    }
+                })
+                .catch(err => {
+                    if (err.name === 'AbortError') return;
+                    console.error('Request failed:', err)
+                    if (!instructions.querySelector('.error')) {
+                        instructions.innerHTML = `<p class="error">An unexpected error occurred.</p>`
+                    }
+                });
+        }
 
+        document.addEventListener('change', function (e) {
+            if (e.target.closest('#instructions-form')) {
+                const form = e.target.closest('#instructions-form')
                 const params = new URLSearchParams(new FormData(form)).toString()
-
-                fetch(form.action + '?' + params, {signal: currentController.signal})
-                    .then(response => response.text())
-                    .then(html => {
-                        const parser = new DOMParser();
-                        const doc = parser.parseFromString(html, 'text/html');
-
-                        const newForm = doc.querySelector('#instructions-form');
-                        const newInstructions = doc.querySelector('#instructions');
-
-                        if (newForm) form.innerHTML = newForm.innerHTML;
-                        if (newInstructions) instructions.innerHTML = newInstructions.innerHTML;
-
-                        if (window.Prism && typeof Prism.highlightAll === 'function') {
-                            Prism.highlightAll();
-                        }
-
-                        const newUrl = form.action.split('?')[0] + '?' + params;
-                        history.pushState(null, '', newUrl);
-                    })
-                    .catch(err => {
-                        if (err.name === 'AbortError') {
-                            return
-                        }
-
-                        console.error('Request failed:', err);
-                    })
-            });
-        }
+                const newUrl = form.action.split('?')[0] + '?' + params
+
+                history.pushState({url: newUrl}, '', newUrl)
+                loadInstructions(newUrl)
+            }
+        })
+
+        window.addEventListener('popstate', function (e) {
+            if (e.state && e.state.url) {
+                loadInstructions(e.state.url)
+            }
+        })
     </script>
 
 <?php

From 1c4825b17ac9f5ffe4c2643f2a5f3ed23c3111f3 Mon Sep 17 00:00:00 2001
From: Sergey Panteleev <sergey@php.net>
Date: Sat, 16 Aug 2025 14:39:55 +0300
Subject: [PATCH 4/6] Remove Update Instructions button if JS is available

---
 downloads.php | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/downloads.php b/downloads.php
index 45b0db5a24..a96bab479c 100644
--- a/downloads.php
+++ b/downloads.php
@@ -164,9 +164,7 @@ function option(string $value, string $desc, $attributes = []): string
             <?= array_key_exists('source', $options) && $options['source'] === 'Y' ? 'checked' : '' ?>/>
     </label>
 
-    <noscript>
         <button type="submit" class="button">Update Instructions</button>
-    </noscript>
 </form>
 
 <h2>Instructions</h2>
@@ -259,6 +257,13 @@ function loadInstructions(url) {
                 });
         }
 
+        document.addEventListener('DOMContentLoaded', function () {
+            const btn = document.querySelector('#instructions-form button[type="submit"]');
+            if (btn) {
+                btn.remove()
+            }
+        })
+
         document.addEventListener('change', function (e) {
             if (e.target.closest('#instructions-form')) {
                 const form = e.target.closest('#instructions-form')

From 16fd22ce8982e42cd17fc5d1d375d573d59b3434 Mon Sep 17 00:00:00 2001
From: Sergey Panteleev <sergey@php.net>
Date: Sat, 16 Aug 2025 14:55:26 +0300
Subject: [PATCH 5/6] Fix remove Update Instructions button

---
 downloads.php | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/downloads.php b/downloads.php
index a96bab479c..60918904c4 100644
--- a/downloads.php
+++ b/downloads.php
@@ -244,6 +244,8 @@ function loadInstructions(url) {
                     if (newForm && form) form.innerHTML = newForm.innerHTML
                     if (newInstructions && instructions) instructions.innerHTML = newInstructions.innerHTML
 
+                    removeUpdateInstructionsButton()
+
                     if (window.Prism && typeof Prism.highlightAll === 'function') {
                         Prism.highlightAll()
                     }
@@ -257,11 +259,15 @@ function loadInstructions(url) {
                 });
         }
 
-        document.addEventListener('DOMContentLoaded', function () {
-            const btn = document.querySelector('#instructions-form button[type="submit"]');
+        function removeUpdateInstructionsButton() {
+            const btn = document.querySelector('#instructions-form button[type="submit"]')
             if (btn) {
                 btn.remove()
             }
+        }
+
+        document.addEventListener('DOMContentLoaded', function () {
+            removeUpdateInstructionsButton()
         })
 
         document.addEventListener('change', function (e) {

From 831d5b3b274ffadaf422ad29a4c2992cf2cba92a Mon Sep 17 00:00:00 2001
From: Sergey Panteleev <sergey@php.net>
Date: Sun, 17 Aug 2025 16:10:02 +0300
Subject: [PATCH 6/6] Update downloads.php

Co-authored-by: Shivam Mathur <shivam_jpr@hotmail.com>
---
 downloads.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/downloads.php b/downloads.php
index 60918904c4..1b5eb096cc 100644
--- a/downloads.php
+++ b/downloads.php
@@ -261,7 +261,7 @@ function loadInstructions(url) {
 
         function removeUpdateInstructionsButton() {
             const btn = document.querySelector('#instructions-form button[type="submit"]')
-            if (btn) {
+            if (btn && window.fetch && window.AbortController) {
                 btn.remove()
             }
         }