Reload issue with Laravel Livewire and Bootstrap form

Question

I’m seeing a Livewire issue for me when I use ANY Javascript form. Use the following form: https://bbbootstrap.com/snippets/multi-step-form-wizard-30467045 (Although I tried other forms and it happens to me all due to wire: model events from livewire)

The problem is that WIRE: MODEL takes me to the first section and I can’t use WIRE: IGNORE because it overrides SELECT related behaviors.

In the second section I use the following related form:

<div class="form-group">
  <label for="provincia">Provincia</label>
  <select wire:model="ubicacionSeleccionada" class="form-control" id="ubicacion">
       <option value=''>Seleccionar provincia</option>
       @foreach($ubicaciones as $ubicacion)
       <option value="{{$ubicacion->id}}">{{ $ubicacion->ubicacion }}</option>
       @endforeach                                          
  </select>
  </div>
                                        
    
   <div class="form-group">
   <label for="tipopropiedad">Localidad</label>
   <select wire:model="area" class="form-control" id="localidad
         {{ count($this->areas)== 0 ? 'hidden' : '' }} ">
         <option value=''>Seleccionar localidad</option>
         @foreach($this->areas as $area)
         <option value={{ $area->id }}>{{ $area->name }}</option>
         @endforeach
   </select>
   </div>

And this does not allow me to use the WIRE: IGNORE to abort the events.

The problem is that any WIRE: MODEL generates an event that takes the form to the first section. It seems to be a REFRESH

Does anyone know how I could use livewire without this inconvenience?

EDITION

BUTTON NEXT VIEW

<input type="button" name="next" class="next action-button" value="Continue" />

JAVASCRIPT

<script>
$(document).ready(function() {

    var current_fs, next_fs, previous_fs; //fieldsets
    var opacity;

    $(".next ").click(function() {

        current_fs = $(this).parent();
        next_fs = $(this).parent().next();

        //Add Class Active
        $(".progressbar li ").eq($("fieldset ").index(next_fs)).addClass("active ");

        //show the next fieldset
        next_fs.show();
        //hide the current fieldset with style
        current_fs.animate({
            opacity: 0
        }, {
            step: function(now) {
                // for making fielset appear animation
                opacity = 1 - now;

                current_fs.css({
                    'display': 'none',
                    'position': 'relative'
                });
                next_fs.css({
                    'opacity': opacity
                });
            },
            duration: 600
        });
    });

    $(".previous ").click(function() {

        current_fs = $(this).parent();
        previous_fs = $(this).parent().prev();

        //Remove class active
        $(".progressbar li ").eq($("fieldset ").index(current_fs)).removeClass("active ");

        //show the previous fieldset
        previous_fs.show();

        //hide the current fieldset with style
        current_fs.animate({
            opacity: 0
        }, {
            step: function(now) {
                // for making fielset appear animation
                opacity = 1 - now;

                current_fs.css({
                    'display': 'none',
                    'position': 'relative'
                });
                previous_fs.css({
                    'opacity': opacity
                });
            },
            duration: 600
        });
    });

    $('.radio-group .radio').click(function() {
        $(this).parent().find('.radio').removeClass('selected');
        $(this).addClass('selected');
    });

    $(".submit ").click(function() {
        return false;
    })

});

Ken · Accepted Answer · 2020-08-25 14:06:44Z

2

Livewire is reloading the component when you change the data in the form. Your Livewire component contains the entire form so any changes made by your javascript will be forgotten due to loss of state.

Instead of using the supplied JavaScript for the page changes, use a Livewire property like selectedSection and use it to determine with section of the form to show. This will allow you to maintain the state of the form when Livewire updates. Also use Livewire methods to update the value of selectedSection when the page buttons are clicked.

answered Aug 25, 2020 at 14:06

Ken

1312 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

maraet Over a year ago

I don't want to take advantage of your generosity but add my next view button and javascript code. Could you give me an example?

Ken Over a year ago

Can you provide your basic component, view, and JavaScript in a phpsandbox.io instance? It'd save me a ton of time and will result in code that you can use right away.

Najmus Sakib · Accepted Answer · 2020-08-25 12:25:58Z

0

You can use wire:model.lazy

  <div class="form-group">
  <label for="provincia">Provincia</label>
  <select wire:model.lazy="ubicacionSeleccionada" class="form-control" id="ubicacion">
       <option value=''>Seleccionar provincia</option>
       @foreach($ubicaciones as $ubicacion)
       <option value="{{$ubicacion->id}}">{{ $ubicacion->ubicacion }}</option>
       @endforeach                                          
  </select>
  </div>
                                        
    
   <div class="form-group">
   <label for="tipopropiedad">Localidad</label>
   <select wire:model.lazy="area" class="form-control" id="localidad
         {{ count($this->areas)== 0 ? 'hidden' : '' }} ">
         <option value=''>Seleccionar localidad</option>
         @foreach($this->areas as $area)
         <option value={{ $area->id }}>{{ $area->name }}</option>
         @endforeach
   </select>
   </div>

answered Aug 25, 2020 at 12:25

Najmus Sakib

7679 silver badges13 bronze badges

1 Comment

maraet Over a year ago

Hello, If I use it like this, only the drop-down does not work and with WIRE: IGNORE reloads the form anyway

Collectives™ on Stack Overflow

Reload issue with Laravel Livewire and Bootstrap form

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related