Блог

Я использую django, и у меня есть базовый шаблон, в котором я определил модальный с помощью alpine.js с отправителем $dispatch.

base.html:

 <div x-data="modal()" class="mt-6" x-cloak>
 <template x-on:show-modal.window="isOpenModal = $event.detail.show; modalHeader = $event.detail.modalHeader; modalData = showData($event.detail.modalData);  "></template>  
  <div  class="absolute z-50 top-0 left-0 w-full h-full flex items-center justify-center bg-black bg-opacity-50" x-show="isOpenModal">
    <div class="z-50 text-left bg-gray-200 px-4 shadow-xl rounded-lg mx-2 md:max-w-lg md:p-6 lg:p-8 md:mx-0 h-auto " >
     <div class="flex justify-between">
      <h2 id="modalHeader" class="text-2xl" x-text="modalHeader"> </h2>
     </div>
     <div class="w-full border border-gray-600 mt-4" ></div>
     <div id="modalContent" class="text-lg w-auto" > </div>
    </div>
   </div> 
 </div>
  

в тегах скрипта ….

  function modal(){
  return{
   isOpenModal: false,
   modalHeader:'',
   modalData: '',
   showData(data){
    document.getElementById('modalContent').innerHTML = data
    let fp = flatpickr(".pickerDate", {locale: "at", dateFormat: "d.m.Y"}); 
  },
}
  

}

затем в другом html, который расширяется из base.html я хочу использовать модальный, где я хочу получить данные формы axios с сервера и поместить их в модальный. Это работает идеально. Но я не знаю, как реализовать кнопку отправки?

new.html

 <div x-data="test()" @click="getCreateForm($dispatch)">
 test click
</div>
  

это тот момент , когда я перехожу к функции getCreateForm ….

 function test(){
 return{
  getPatientCreateForm($dispatch){
   axios.get("{% url 'user:createForm'%}")
            .then(response => {
                  var modalHeader = response.data.header
                  var modalData = "<form id='createUser' class='' method='POST' action='' x-on:submit.prevent='?????????'> {% csrf_token %}"  response.data.seite.seite
                  $dispatch('show-modal', { show: true, modalHeader: modalHeader, modalData: modalData })                                               
                  })
                  .catch(error => {
                      console.log(error);
                  })

       }
      }
     }
  

Проблема в том, что когда я помещаю функцию отправки формы в submit.prevent like: x-on:submit.prevent=’sendForm()’, alpine ищет функцию в base.html (где определен модальный), и я не хочу реализовывать там функцию. Я хочу, нажав кнопку отправки, чтобы данные были отправлены с помощью axios на new.html (где я начал с getCreateForm ), а не на base.html . Возможно ли это с alpine.js а $dispatch ? или это невозможно

Спасибо за помощь! Мартин