Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to Localize Error Messages? #686

Open
obahareth opened this issue Sep 27, 2024 · 1 comment
Open

How to Localize Error Messages? #686

obahareth opened this issue Sep 27, 2024 · 1 comment

Comments

@obahareth
Copy link

Hey,

I would like to localize the Content missing message from here:

this.element.innerHTML = `<strong class="turbo-frame-error">Content missing</strong>`;

but I am not sure what's the appropriate way since this is a JS file that's putting a hardcoded string.

How can I get this to work with I18n?

Would monkeypatching this to use I18n.t and using the extension .js.erb work?

@seanpdoyle
Copy link
Contributor

seanpdoyle commented Sep 27, 2024

@obahareth the "Content missing" message is presented after a turbo:frame-missing event is dispatched.

At the moment, there isn't a way to customize or localize the error message. If you need to adjust the message (or do something else), you can define a global event listener:

addEventListener("turbo:frame-missing", (event) => {
  event.preventDefault()

  event.target.innerHTML = `<strong class="turbo-frame-error">A localized Content missing message</strong>`
})

That event listener could be paired with a server-rendered <template> element elsewhere in the page:

<script>
  addEventListener("turbo:frame-missing", (event) => {
    const template = document.getElementById("turbo_frame_missing_template")

    event.preventDefault()

    event.target.replaceChildren(template.content.cloneNode(true))
  })
</script>

<body>
  <template id="turbo_frame_missing_template">
    <strong class="turbo-frame-error"><%= translate("turbo_frame_missing_message") %></strong>
  </template>

  <!-- ... -->
</body>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

No branches or pull requests

2 participants