I created a registration form that when the person presses save a load appears, I just wanted to make this load disappear when an error occurs in the form. I'm having trouble finding a solution to my problem, if you can help me I'd appreciate it.
I'm using laravel 8 on the backend
Code father:
<v-main v-on:load="toggleOverlay">
<!-- <span class="loading" v-show="loading"> -->
<v-overlay :model-value="loading" class="align-center justify-center">
<!--loading-->
<v-progress-circular :size="295" :width="30" color="green" indeterminate>
</v-progress-circular>
</v-overlay>
<!-- </span> -->
<slot />
</v-main>
i tried using ref but i don't know if i did it the right way and i tried using emit
Related
I'm trying to render a modal that gets triggered by a button, so that I can then include payment elements in this modal and allow the user to begin to make payment. However, most Livewire modals I've seen - here, for example - use Livewire events to do the toggling of the model, which both requires adding ugly logic to the view and seems like it would still be slower than anything client-side.
It seems to me like it would be faster to allow Bootstrap to trigger the modal via its own JavaScript (using data-bs-* attributes), and only make use of Livewire when actually loading the content into the modal. Is this approach possible, or do Livewire components have to be loaded via Livewire in order to be populated by it?
Using the LiveWire is logical when you need to exchange information with the server and need to request and respond via HTTP protocol. LiveWire has replaced ajax or something like axios. So it’s better you use a modal bootstrap or any element handled on front and use livewire when you want to do something on the server for example fetch or save data via database. You can use livewire components in any blade as any part of your project.
I use tailwind modals, in theory you could use any modal, the only thing is that you put the wire to each input, look at this example
<div class="md:col-span-3">
<label
for="class_name"
class="block text-gray-700 text-sm font-bold mb-2"
>
Description:
</label>
<textarea
class="border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 resize rounded-md shadow-sm block mt-1 w-full"
id="step_description"
wire:model.defer="step_description"
></textarea>
</div>
I'm confused. I've thought it's possible to pass SpringBoot/Thymeleaf objects from the html page to the Modal form. I've come across many examples using ajax to pull data from the REST endpoint instead.
Is using ajax to pull in objects into Modals, the only method?
Thymeleaf is a server side templating language... the concept of a modal form usually means showing/hiding a window opens and closes on the client side (meaning JavaScript that runs when a user clicks a link or a button ). If you don't want to use an API to pull that data (which I think makes the most sense), then you have to create a hidden modal for every row on your page. For example:
<div th:each="item, i: ${items}">
<a href="#"
onClick="openModal(this.getAttribute('data-modal'))"
th:data-modal="|#modal${i.index}|">
Edit modal #<span th:text="${i.index}" />
</a>
<div th:id="|modal${i.index}|" style="display: none;">
<p>I am a modal form for element <span th:text="${i.index}" />!</p>
<input type="text" th:value="${item.value}" />
</div>
</div>
You can see how this works... creating a hidden div/modal form for every row (so you don't have to call an API to get the form values), but it comes with a lot of extra HTML.
I am trying to use kendo-popup with the input anchor but it doesn't work for me properly.
I want from app.component.html to have:
<div class="first-container flex-column">
<!-- a lot of elements -->
</div>
<div class="second-container flex-column">
<!-- a lot of elements -->
</div>
<kendo-popup [anchor]="anchor">
<div class='content'>
<!-- User-defined content -->
Popup content.
</div>
</kendo-popup>
And the #anchor id can be deep inside one of the containers.
I want to create generic kendo-popup and it should open the popup each time near to other element (that has the anchor).
If I put #anchor inside an element in one of the containers it's not popup near that element, and it popup in a place that not related to this element.
How should I do it?
BTY, I tried first using ngbPopover of ngBootsrap but it requires to 'wrap' the html element that we want the popover on, this doesn't work for me because I want to put the popover/popup code in generic place that I will use for multiple elements.
Thanks!
Say I have this simple scaffold in my app_component.html:
<header>
<div>
<!-- here I have some elements that won't change -->
</div>
<div>
<!-- SECTION HEADER: but I want to change this part's content, based on
navigation or something else (auth roles, for example) -->
</div>
</header>
<main>
<div class="container">
<div class="row">
<div class="col s12">
<section class="section">
<router-outlet>
<!-- SECTION MAIN: main content goes here -->
</router-outlet>
</section>
</div>
</div>
</div>
</main>
<div class="divider"></div>
<footer>
<div>
some footer here. nothing important
</div>
</footer>
As you can see in the snippet, I'm using a <router-outlet> in SECTION MAIN to show contents which is fine. The problem is, how can I have a changeable part in header section (the SECTION HEADER in the code) and how can I change it's content based on e.g. navigation, auth roles, etc. ? Does AngularDart support this kind of routing? Thanks in advance.
The short answer is no, the router doesn't currently have support for doing this easily.
Other frameworks support this functionality through "named" router outlets. This allows multiple outlets to exist in the same view, provided they're given unique names. Each route configuration then must designate which component is rendered in which named outlet. If this sounds desirable, please feel free to file a feature request: https://github.com/dart-lang/angular
Of course you could always write your own solution. You could create a component for the header section that dynamically loads a different component, depending on which route is active. It simply needs to inject Router and listen to Router.stream for route changes.
for some reason this navbar is not rendering correctly on the browser :
<header data-role="header">
<div id="navbar-personalize" data-role="navbar" class="my-navbar">
<div data-align="left">
<img src="../../Images/dashboard6.png" alt="Dashboard"/>
</div>
<span data-role="view-title">Cart Summary</span>
<div data-align="right">
<a href="#merchandise-otherorders-view">
<img src="../../Images/whoelse6.png" alt="Who else is going?"/>
</a>
</div>
</div>
</header>
I have other navbars just like this one all around my index file, and they all work fine, except for this one. It seems that KendoUI isn't initializing it all. By inspecting the code I can see that it's missing all of kendo's styling (like "km-navbar" and such).
It may have to do with the fact that I'm defining this header in each one of the views inside the file, instead of defining it in the app layout, but for some reason defining it inside the app layout doesn't work for me, it simply doesn't render at all.
I'm out of ideas, can somebody help me?
Thanks
I had this problem today. Make sure that kendo.mobile.min.js is included on your page. The docs don't say to put it in, but adding that made it work for me.