fix: Alpine.js JSON parsing error in x-data HTML attributes
Add tojson_attr Jinja2 filter that escapes double quotes to " for safe embedding in HTML attributes. The browser decodes entities before Alpine.js evaluates, so JSON parses correctly. Replaces |tojson with |tojson_attr in x-data attributes (select_recipe, recipe_list, base flash messages). Script tag usages are unaffected. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -90,7 +90,7 @@
|
||||
{% with messages = get_flashed_messages(with_categories=true) %}
|
||||
{% if messages %}
|
||||
<div class="fixed top-16 right-4 z-50 flex flex-col gap-2 max-w-md w-full"
|
||||
x-data="{ messages: {{ messages|tojson }} }"
|
||||
x-data="{ messages: {{ messages|tojson_attr }} }"
|
||||
x-init="setTimeout(() => { $el.remove() }, 8000)">
|
||||
{% for category, message in messages %}
|
||||
<div x-data="{ show: true }"
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
{% block content %}
|
||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-8 max-w-6xl"
|
||||
x-data="{
|
||||
recipes: {{ recipes|tojson }},
|
||||
recipes: {{ recipes|tojson_attr }},
|
||||
search: '{{ search or '' }}',
|
||||
filter: 'all',
|
||||
deleteModal: false,
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
{% block content %}
|
||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-8 max-w-7xl"
|
||||
x-data="{
|
||||
recipes: {{ recipes|tojson }},
|
||||
recipes: {{ recipes|tojson_attr }},
|
||||
search: '{{ auto_recipe_code }}',
|
||||
lot_number: '{{ auto_lot }}',
|
||||
serial_number: '{{ auto_serial }}',
|
||||
|
||||
Reference in New Issue
Block a user