nick/comfyui-serverless
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix View Progress button not responding to clicks
All checks were successful
Build and Push Frontend Docker Image / build (push) Successful in 1m0s
Details

Browse Source 
Replace inline onclick handlers with proper addEventListener to fix
silent failures from async promise rejections. Add try-catch error
handling to show errors to user instead of failing silently.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Debian
2026-01-07 21:27:25 +00:00
parent 8f050b41a0
commit a7cb20fb37
1 changed files with 37 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
frontend/public/js/app.js
View File

@@ -100,37 +100,56 @@ function showPendingJobsNotification(jobs) {
banner.innerHTML = `
<span>You have ${jobs.length} video${jobs.length > 1 ? 's' : ''} generating in the background</span>
<div class="pending-jobs-actions">
<button class="btn btn-sm" onclick="resumeLatestJob(${jobs[0].id}, '${jobs[0].runpod_job_id}')">View Progress</button>
<button class="btn btn-sm" onclick="this.closest('.pending-jobs-banner').remove()">Dismiss</button>
<button class="btn btn-sm view-progress-btn" data-content-id="${jobs[0].id}" data-job-id="${jobs[0].runpod_job_id}">View Progress</button>
<button class="btn btn-sm dismiss-btn">Dismiss</button>
</div>
`;
// Attach event listeners properly instead of inline onclick
banner.querySelector('.view-progress-btn').addEventListener('click', function() {
const contentId = parseInt(this.dataset.contentId, 10);
const jobId = this.dataset.jobId;
resumeLatestJob(contentId, jobId);
});
banner.querySelector('.dismiss-btn').addEventListener('click', function() {
banner.remove();
});
document.querySelector('.main-content').prepend(banner);
}
async function resumeLatestJob(contentId, jobId) {
// Switch to generate tab and show progress
showSection('generate');
const statusEl = document.getElementById('generation-status');
const videoEl = document.getElementById('output-video');
const btn = document.getElementById('generate-btn');
btn.disabled = true;
btn.textContent = 'Generating...';
statusEl.className = 'status-message info';
statusEl.textContent = 'Resuming job...';
statusEl.classList.remove('hidden');
videoEl.classList.add('hidden');
try {
// Switch to generate tab and show progress
showSection('generate');
// Remove the banner
const banner = document.querySelector('.pending-jobs-banner');
if (banner) banner.remove();
btn.disabled = true;
btn.textContent = 'Generating...';
statusEl.className = 'status-message info';
statusEl.textContent = 'Resuming job...';
statusEl.classList.remove('hidden');
videoEl.classList.add('hidden');
// Poll for completion
await pollJob(jobId, contentId, statusEl, videoEl);
// Remove the banner
const banner = document.querySelector('.pending-jobs-banner');
if (banner) banner.remove();
btn.disabled = false;
btn.textContent = 'Generate Video';
// Poll for completion
await pollJob(jobId, contentId, statusEl, videoEl);
} catch (error) {
console.error('Error resuming job:', error);
statusEl.className = 'status-message error';
statusEl.textContent = error.message || 'Failed to resume job';
statusEl.classList.remove('hidden');
} finally {
btn.disabled = false;
btn.textContent = 'Generate Video';
}
}
// Login