Get 2024 Templates Mega Bundle!$1000 worth of 19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets for just $99
Get for 99$

KT-Stepper with Laravel and Livewire


Hi,
I'm trying to achieve a basic insert to a database.
I kicked off with your Metronic laravel starter kit.
1. I have a model "Client"
2. I have a table "clients"
3. I have a Livewire component "ClientsAdd" with a "submit" function that retrieves the form data and does the insert to the database;
4. I have a Livewire view "clients-add.blade.php" contains the form based on the KT-Stepper template
5. I have a master layout blade view for adding a new Client - upon a button opening a modal window that contains and initiates the livewire component <livewire:clients-add>
6. Finally I have a link to a custom .js file that contains the JavaScript logic for the KT-Stepper to work.

My steps:
1. I open the clients page i.e. http://localhost/clients and see a list of clients and a button "Add New Client"
2. I click the "Add New Client" button and a modal pops up
3. The modal has a form divided into three KT-Stepper steps
4. I enter the data, i.e. Clients name, next, next
5. Within the javascript file and kt-stepper methods, I validate i.e. only that form input "name" as it is required (client-side validation), for this example the rest of the fields are irrelevant and nullable / not required
6. FINALLY - my issue!
How to properly code the submit button to be able to have a javascript logic for the kt-stepper, client-side validation (formvalidation.io), sweetalerts and so on... AND be able to submit the data to the Livewire component function for the server side validation (livewire) and finally throw an additional error with SweetAlert or save the data to the database.

Please be so kind as to assist me with this kind of approach. I may be wrong with something as I'm new to Livewire but I found Livewire implemented in your "User" examples in the laravel demo, and find Livewire as a good shortcut to the traditional ajax/resource controller/CRUD submits.

Thank you in advance,
Mati happy


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (6)


I'm glad you were able to figure it out! happy
I appreciate your patience. If you have any more questions or run into any other issues in the future, please don't hesitate to reach out.



Figured it out!
In your global stepper.js file you have an "if" to prevent the step index change if the step is already shown - in the goTo() function.


// Skip if this step is already shown
if ( index === the.currentStepIndex || index > the.totalStepsNumber || index < 0 ) {
return;
}


Once I commented out this part everything works fine.



Hi,
thanks for that. I understood the code and put it where my KTStepper is initialized.

I console.log the value of the getCurrentStepIndex() method, and this works fine:
1 - step one
2 - step two
Now everything works fine once I'm in step 1, but still, when I click next and go to step 2 and fill a value in any input, the console logs getCurrentStepIndex() as value 2 but the view switches to step 1. From then on, I can't even go back to step 2 with the Next button, as KTStepper and JS think they're in step 2 and probably try to validate my other fields from step 2, which were left empty.



To prevent Livewire from automatically switching the KTStepper view to the first step when you type in step 2 fields, you can place the provided code in your JavaScript file where the KTStepper is initialized.

Assuming you have a JavaScript file where you initialize your KTStepper, you can include this code there. Make sure you place it within the context of your KTStepper initialization:


// Initialize KTStepper
const stepper = new KTStepper(stepperElement, {
// Your KTStepper configuration options here
});

// Handle Livewire events
Livewire.hook("message.processed", (message, component) => {
// This is needed because the stepper component is reset when the Livewire component is updated
// Prevents the stepper from jumping to the first step

// Check if the component contains the stepper
if (component.el.contains(stepperElement)) {
// Get the current step index before it gets reset
const currentStepIndex = stepper.getCurrentStepIndex();

// Go to the previous step
stepper.goTo(currentStepIndex);
}
});


In this code, stepperElement should be replaced with the actual element or selector that represents your KTStepper. The code listens for Livewire events and, before Livewire resets the component, it retrieves the current step index using getCurrentStepIndex() and then uses goTo() to navigate to the previous step, thus preventing it from automatically switching to the first step.



Hi,
thanks a million. Finally, I managed to set my insert working, but I still have one problem though.

Livewire fields have some kind of conflict with the KTStepper:
1. When I fill out my inputs on the first step - all OK
2. When I type anything on any field in step 2, It automatically switches the KTStepper view to step 1 - probably because the fields are mapped to livewire component and the "data refresh" resets the steps in KTStepper.
Is there any way to prevent this?


EDIT:
I found a similar problem
https://devs.keenthemes.com/question/ktstepper-with-laravel-livewire
but I don't exactly know where to put this code. I tried in different places but it does not work for me.

Thank you happy mati



To create a submit button that handles JavaScript logic for the `kt-stepper`, client-side validation (using FormValidation.io), and SweetAlerts, while also being able to submit data to a Livewire component for server-side validation and database storage, you can follow these steps:

1. **HTML Structure**:
Start by creating an HTML form with a Livewire component. Make sure to include the necessary JavaScript and CSS files for `kt-stepper` and FormValidation.io.


<form wire:submit.prevent="submitForm" >
<!-- Form fields go here -->

<button type="submit" >Submit</button>
</form>


2. **JavaScript Logic**:
Add JavaScript logic to handle the `kt-stepper`, client-side validation, and SweetAlerts. Ensure the `submitForm` Livewire function is called when the submit button is clicked, and conditionally handle the success or failure of the Livewire component submission.


<script>
document.addEventListener("DOMContentLoaded", function() {
// Initialize the kt-stepper and FormValidation.io

document.getElementById("submitButton").addEventListener("click", function() {
// Perform client-side validation using FormValidation.io
const isValid = validateForm();

if (isValid) {
// Show a SweetAlert for confirmation
Swal.fire({
title: "Submit Form?",
text: "Are you sure you want to submit this form?",
icon: "warning",
showCancelButton: true,
}).then((result) => {
if (result.isConfirmed) {
// Proceed with Livewire submission
Livewire.emit("submitForm");
}
});
}
});
});
</script>


3. **Livewire Component**:
In your Livewire component, create the `submitForm` method to handle the server-side validation and data storage. You can use Livewire's validation features and the `save()` method to store data in the database.


public function submitForm()
{
$this->validate([
// Add your validation rules here
]);

// If validation passes, save data to the database
$this->save();

// Display a success message with SweetAlert
session()->flash("success", "Form submitted successfully!");

// Reset the form or perform other actions

// Additional logic if needed

// Redirect or refresh the page
return redirect()->to("/your-page");
}


4. **Display Success/Error Messages**:
In your Livewire component's view, you can display success or error messages using the `session` flash messages or Livewire properties. Additionally, you can conditionally show/hide messages using Livewire.


@if (session("success"))
<div class="alert alert-success">
{{ session("success") }}
</div>
@endif

@if ($errors->any())
<div class="alert alert-danger">
</p><ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif


This approach combines the best of client-side and server-side validation while providing user-friendly SweetAlerts for confirmation and success/error messages. Make sure to customize the JavaScript, Livewire component, and FormValidation.io validation rules according to your specific requirements.
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(