Stimulus ile HTML Append

Yardım
1

Merhaba,

Basit bir formum var ve form icinde bir link’e tiklanarak ayri bir div icine html append etmek istiyorum.

Formum su sekilde

<%= form_with(model: word) do |form| %>
  <% if word.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(word.errors.count, "error") %> prohibited this word from being saved:</h2>

      <ul>
        <% word.errors.each do |error| %>
          <li><%= error.full_message %></li>
        <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field">
    <%= form.label :content %>
    <%= form.text_field :content %>
  </div>

  <div class="field">
    <%= form.label :language %>
    <%= form.collection_select :language, Word::LANGUAGES, :second, :first %>
  </div>

  <div data-controller="toggle">
    <div data-toggle-target="foo"></div>
    <a href='#' data-action="click->toggle#greet">Greet</a>
  </div>

  <div class="actions">
    <%= form.submit %>
  </div>
<% end %>

stimulus controller’im ise

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = [ "foo" ]

  greet() {
    const element = this.fooTargets[0]
    element.innerHTML = 'FooBar'
  }
}

boyle. Burada innerHTML calisiyor ancak sayfa yenilendigi icin kayboluyor. Sizce neden sayfa yeniliyor burada? Bir tahmininiz var mi?

Diger yandan <button data-action="click->toggle#greet">Greet</button> sekinde yaptigimda ise form’u post ediyor.

2

Büyük ihtimalle greet metodu false return ederse sorun çözülür, ama Stimulus’da böyle mi bilmiyorum. Genel olarak DOM event handler’lari event’i cancel etmezler. Ya handler’in false döndürmesi gerekir yada e.preventDefault() çağırması gerekir. Bence ikisini de dene.

3

Tesekkurler @ufuk greet methodunun sonuna event.preventDefault() koyunca ve <a href='javascript:void(0);'.. yapinca istedigim gibi calisiyor. https://github.com/hotwired/stimulus/issues/163 soyle bir konuya da denk geldim preventDefault’a bakarken.

4

Bu sorunu bende yaşamıştım abi. Aslında href’e void yazmana gerek yok issue’de yanıt olarak verilen fonksiyon içine

 testPreventDefault(event){
    event.preventDefault()
    event.stopImmediatePropagation()
  }

yazmak yeterli oluyor. <a href='javascript:void(0);' yaptığın zaman zaten preventDefault’a gerek kalmıyor

1 Beğeni