IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Laravel PHP Discussion :

Laravel Livewire affichage d'une variable pour datepicker


Sujet :

Laravel PHP

  1. #1
    Membre habitué Avatar de legrandse
    Homme Profil pro
    Responsable de service informatique
    Inscrit en
    décembre 2010
    Messages
    324
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Responsable de service informatique

    Informations forums :
    Inscription : décembre 2010
    Messages : 324
    Points : 139
    Points
    139
    Par défaut Laravel Livewire affichage d'une variable pour datepicker
    Bonjour à tous,

    Je patauge dans Livewire.

    Le principe c'est un select tag contenant une liste de maisons. L'ID sélectionné dynamiquement sert à préparer l'affichage d'un datepicker (appelé par le input name="arrival" du formulaire) contenant via le beforeshowday des périodes (basse saison, moyenne, haute). Ces périodes varient en fonction de la maison sélectionnée.

    Une classe permet le calcul des saisons pour le datepicker.

    Mes tentatives sont un échec pour afficher le datepicker dynamiquement.

    J'ai entre autre un message d'erreur :
    "Livewire component's [select-house] public property [seasonLow] must be of type: [numeric, string, array, null, or boolean]. Only protected or private properties can be set as other types because JavaScript doesn't need to access them. "

    Lorsque je clique sur "arrival" il fait appel à la methode datepicker() qui devrait utiliser l'attribut selectedhouse pour afficher le jquery datepicker en fonction de la maison sélectionnée.

    Le datepicker à besoin de la ligne
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <script>var lowSeason = @json($seasonLow);</script>
    pour afficher les saisons.

    Je ne sais pas comment faire.

    Si qqu'un peut m'aider svp


    Voici mon fichier blade
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
     
    <!DOCTYPE html>
    <html lang="en">
     
    <head>
     
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <meta name="description" content="">
      <meta name="author" content="">
     
      <title>Sign-up</title>
     
     
      <!-- Custom styles for this page -->
       <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" media="all" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.2/css/swiper.min.css" media="all" />
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
     <link href="{{ asset('drupal/dist/styles/main.css') }}" rel="stylesheet" type="text/css">
     
     
     <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
     <link href="{{ asset('css/sign-up.css') }}" rel="stylesheet" type="text/css">  
     
     
      @livewireStyles
     
    </head>
    <body>  
    <section id="home-intro">
       <div class="container">
     
       	<div class="col-lg-12 ">
    		<h1 class="heading2">Demande de réservation</h1>
        </div>
     
        <form class="form"  method="post" action="{{route('newBooking')}}">
        @csrf
        @method('POST')
     
    	@livewire('select-house')
     
     
     
        </div>
     
    </section>
    <script src="{{asset('js/datepicker2.js') }}"></script>
     
     
     
      @livewireScripts
     
    </body>
    </html>
    Mes deux fichiers Livewire select-house.blade
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    <div>
    <div class="form-group row">
        	<div class="col-md-6">
          		<label class="control-label " for="house">Votre choix de maison:</label><sup>*</sup>
                <select class="form-control input-lg" name="house_id" id="house_id" wire:model="selectedHouse"   >
                    @foreach($houses as $house)
                    
                    <option class="form-control" value="{{$house->id}}" {{old('house_id') == $house->id ? 'selected' : ''}} >{{$house->name }} {{$house->capacity }}</option>
    				@endforeach
           		</select>
           		{{ $selectedHouse }}
            </div>
        </div>
        <div class="form-group row">
        	<div class="col-md-6">
          		<label class="control-label " for="arrival">Date d'arrivée:</label><sup>*</sup>
                <input wire:click="datepicker" type="text" class="form-control input-lg @error('arrival') is-invalid @enderror" id="from"  name="arrival" autocomplete="off"  placeholder="Please choose a date..." value="{{old('arrival')}}" />
            @error('arrival')
    	    <div class="invalid-feedback">{{ $errors->first('arrival') }}</div>
    	  	@enderror
            </div>
          	<div class="col-md-6">
          		<label class="control-label " for="departure">Date de départ:</label><sup>*</sup>
          		<input type="text" class="form-control input-lg @error('departure') is-invalid @enderror" id="to"  name="departure" autocomplete="off"  readonly value="{{old('departure')}}" />
          		@error('departure')
    		    <div class="invalid-feedback">{{ $errors->first('departure') }}</div>
    		  	@enderror
          	</div>
        </div>
        
    <script>
    	var lowSeason = @json($seasonLow);
    </script>
    </div>
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
     
    namespace App\Http\Livewire;
     
    use Livewire\Component;
    use App\House;
    use App\Classes\Datepicker;
    class SelectHouse extends Component
    {	
     
    	public $selectedHouse = 1;
    	public $seasonLow; 
     
    	public function datepicker()
    	{
    	      $this->seasonLow = new Datepicker($this->selectedHouse);
        	      $this->seasonLow->showSeason('low');	
     
    	}
     
     
     
        public function render()
        {
     
        	return view('livewire.select-house',[
            'houses' => House::all(),
     
             ]);
        }
     
    }

  2. #2
    Membre habitué Avatar de legrandse
    Homme Profil pro
    Responsable de service informatique
    Inscrit en
    décembre 2010
    Messages
    324
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Responsable de service informatique

    Informations forums :
    Inscription : décembre 2010
    Messages : 324
    Points : 139
    Points
    139
    Par défaut
    Voilà j'ai trouvé mais c'était plus lié à la classe qui calcule les saisons que du code livewire.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    namespace App\Http\Livewire;
    
    use Livewire\Component;
    use App\House;
    use App\Classes\Datepicker;
    class SelectHouse extends Component
    {	
    	
    	public $selectedHouse = 1;
    	public $seasonLow ; 
    			
    	
        public function render()
        {
        	 $season = new Datepicker($this->selectedHouse);
        	 $season->showSeason('low');
        	 $this->seasonLow = $season->_arraySeason;	
        	 
        	return view('livewire.select-house',[
            'houses' => House::all(),
            'seasonLow'=> $this->seasonLow,
             ]);
        }
    
    
    
    }
    et
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    <div>
    <div class="form-group row">
        	<div class="col-md-6">
          		<label class="control-label " for="house">Votre choix de maison:</label><sup>*</sup>
                <select class="form-control input-lg" name="house_id" id="house_id" wire:model="selectedHouse"   >
                    @foreach($houses as $house)
                    
                    <option class="form-control" value="{{$house->id}}" {{old('house_id') == $house->id ? 'selected' : ''}} >{{$house->name }} {{$house->capacity }}</option>
    				@endforeach
           		</select>
           		{{ $selectedHouse }}
            </div>
        </div>
        <div class="form-group row">
        	<div class="col-md-6">
          		<label class="control-label " for="arrival">Date d'arrivée:</label><sup>*</sup>
                <input  type="text" class="form-control input-lg @error('arrival') is-invalid @enderror" id="from"  name="arrival" autocomplete="off"  placeholder="Please choose a date..." value="{{old('arrival')}}" />
            @error('arrival')
    	    <div class="invalid-feedback">{{ $errors->first('arrival') }}</div>
    	  	@enderror
            </div>
          	<div class="col-md-6">
          		<label class="control-label " for="departure">Date de départ:</label><sup>*</sup>
          		<input type="text" class="form-control input-lg @error('departure') is-invalid @enderror" id="to"  name="departure" autocomplete="off"  readonly value="{{old('departure')}}" />
          		@error('departure')
    		    <div class="invalid-feedback">{{ $errors->first('departure') }}</div>
    		  	@enderror
          	</div>
        </div>
        
    <script>
    	var lowSeason = @json($seasonLow);
    </script>
    </div>

  3. #3
    Membre habitué Avatar de legrandse
    Homme Profil pro
    Responsable de service informatique
    Inscrit en
    décembre 2010
    Messages
    324
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Responsable de service informatique

    Informations forums :
    Inscription : décembre 2010
    Messages : 324
    Points : 139
    Points
    139
    Par défaut
    Hum hum j'ai crié victoire un peu trop vite.

    Le datepicker et ses données beforeShowDay s'affichent bien lorsque je clique sur le champ "arrival" du formulaire.
    Mais les données qui sont affichées, sont obtenues par l'ID n°1 du select tag et uniquement cet ID. Les autres ID ne sont donc pas récupérés dynamiquement selon la sélection choisie.

    j'ai joint 2 captures d'écran pour la compréhension. Dans celles-ci la période réservée est identique pour les deux maisons alors que ce n'est pas le cas.

    Pourtant on remarque que l'ID de celles-ci (situé en dessous du select) varie bien dynamiquement.

    Nom : web1.PNG
Affichages : 104
Taille : 35,8 Ko
    Nom : web2.PNG
Affichages : 102
Taille : 37,1 Ko

    Je ne vois pas ce qui cause le problème du fait que l'ID ne se récupère pas dynamiquement pour calculer les données de réservations.

    Si qqu'un sait m'aider sur ce coup...
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    <?php
    
    namespace App\Http\Livewire;
    
    use Livewire\Component;
    use App\House;
    use App\Classes\Datepicker;
    class SelectHouse extends Component
    {	
    	
    	public $selectedHouse = 1;        //initialisation de l'ID
    	public $showbookingActiveDays; //récupération réservation jours entre l'arrivée et le départ
    	public $showbookingArrival;       //récupération jours d'arrivée
    	public $showbookingDeparture;  //récupération jours de départ
    	
    	
        public function render()
        {
        	
        	$showbooking = new Datepicker($this->selectedHouse);
        	$showbooking->datepicker('2');
        	$this->showbookingActiveDays = $showbooking->_activeDays;
        	
        	$this->showbookingArrival = $showbooking->_arrayArrival;
        	$this->showbookingDeparture = $showbooking->_arrayDeparture;
        	
        	
        	 
        	 
        	return view('livewire.select-house',[
            'houses' => House::all(),
            'showbookingActiveDays' => $this->showbookingActiveDays,
        	'showbookingArrival' => $this->showbookingArrival,
        	'showbookingDeparture' => $this->showbookingDeparture,
        	
             ]);
        }
    
    
    
    }
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    <div>
    <div class="form-group row">
        	<div class="col-md-6">
          		<label class="control-label " for="house">Votre choix de maison:</label><sup>*</sup>
                <select class="form-control input-lg" name="house_id" id="house_id" wire:model="selectedHouse"   >
                    @foreach($houses as $house)
                    
                    <option class="form-control" value="{{$house->id}}" {{old('house_id') == $house->id ? 'selected' : ''}} >{{$house->name }} {{$house->capacity }}</option>
    				@endforeach
           		</select>
           		{{ $selectedHouse }}
            </div>
        </div>
        <div class="form-group row">
        	<div class="col-md-6">
          		<label class="control-label " for="arrival">Date d'arrivée:</label><sup>*</sup>
                <input  type="text" class="form-control input-lg @error('arrival') is-invalid @enderror" id="from"  name="arrival" autocomplete="off"  placeholder="Please choose a date..." value="{{old('arrival')}}" />
            @error('arrival')
    	    <div class="invalid-feedback">{{ $errors->first('arrival') }}</div>
    	  	@enderror
            </div>
          	<div class="col-md-6">
          		<label class="control-label " for="departure">Date de départ:</label><sup>*</sup>
          		<input type="text" class="form-control input-lg @error('departure') is-invalid @enderror" id="to"  name="departure" autocomplete="off"  readonly value="{{old('departure')}}" />
          		@error('departure')
    		    <div class="invalid-feedback">{{ $errors->first('departure') }}</div>
    		  	@enderror
          	</div>
        </div>
        
    <script>
      var activeDays = @json($showbookingActiveDays);
      var arrival = @json($showbookingArrival);
      var departure = @json($showbookingDeparture);
      
      
    </script>
    </div>

  4. #4
    Membre habitué Avatar de legrandse
    Homme Profil pro
    Responsable de service informatique
    Inscrit en
    décembre 2010
    Messages
    324
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Responsable de service informatique

    Informations forums :
    Inscription : décembre 2010
    Messages : 324
    Points : 139
    Points
    139
    Par défaut
    J'avance comme un escargot mais je ne veux pas abandonner.

    J'ai modifié quelques lignes en ajoutant une méthode datepicker()

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    namespace App\Http\Livewire;
    
    use Livewire\Component;
    use App\House;
    use App\Classes\Datepicker;
    class SelectHouse extends Component
    {	
    	
    	public $selectedHouse;
    	public $showbookingActiveDays;
    	public $showbookingArrival;
    	public $showbookingDeparture;
    	
    	public function mount()
        {
            $this->selectedHouse = 1 ;
        }
    	
    	
    	public function datepicker()
    	{
    	$this->selectedHouse;
        	$showbooking = new Datepicker($this->selectedHouse);
        	$showbooking->datepicker('2');
        	$this->showbookingActiveDays = $showbooking->_activeDays;
        	$this->showbookingArrival = $showbooking->_arrayArrival;
        	$this->showbookingDeparture = $showbooking->_arrayDeparture;
        	//dd($this->showbookingActiveDays);
        	
    	}
    	
    	
    	
        public function render()
        {
        	return view('livewire.select-house',[
            'houses' => House::all(),
             ]);
        }
    
    
    
    }
    Je remarque que la requête fonctionne bien :
    Nom : web3.PNG
Affichages : 91
Taille : 21,3 Ko

    Ce qui m'amène à conclure que c'est donc cette partie ci-dessous en rouge qui devrait récupérer les données de la requête:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    <div>
    <div class="form-group row">
        	<div class="col-md-6">
          		<label class="control-label " for="house">Votre choix de maison:</label><sup>*</sup>
                <select class="form-control input-lg" name="house_id" id="house_id" wire:model="selectedHouse"   >
                    @foreach($houses as $house)
                    
                    <option class="form-control" value="{{$house->id}}" {{old('house_id') == $house->id ? 'selected' : ''}} >{{$house->name }} {{$house->capacity }}</option>
    				@endforeach
           		</select>
           		{{ $selectedHouse }}
            </div>
        </div>
        <div class="form-group row">
        	<div class="col-md-6">
          		<label class="control-label " for="arrival">Date d'arrivée:</label><sup>*</sup>
                <input wire:click="datepicker" type="text" class="form-control input-lg @error('arrival') is-invalid @enderror" id="from"  name="arrival" autocomplete="off"  placeholder="Please choose a date..." value="{{old('arrival')}}" />
            @error('arrival')
    	    <div class="invalid-feedback">{{ $errors->first('arrival') }}</div>
    	  	@enderror
            </div>
          	<div class="col-md-6">
          		<label class="control-label " for="departure">Date de départ:</label><sup>*</sup>
          		<input type="text" class="form-control input-lg @error('departure') is-invalid @enderror" id="to"  name="departure" autocomplete="off"  readonly value="{{old('departure')}}" />
          		@error('departure')
    		    <div class="invalid-feedback">{{ $errors->first('departure') }}</div>
    		  	@enderror
          	</div>
        </div>
        
    <script>
      var activeDays = @json($showbookingActiveDays); 
      var arrival = @json($showbookingArrival);
      var departure = @json($showbookingDeparture);
      
      
    </script>
    
    </div>
    mais comment dois-je m'y prendre ? en javascript ?

    Si vous savez m'aider sur ce coup ce serait vraiment sympa.

Discussions similaires

  1. Réponses: 2
    Dernier message: 07/12/2011, 16h14
  2. Réponses: 1
    Dernier message: 17/05/2009, 19h40
  3. Réponses: 1
    Dernier message: 22/06/2007, 15h39
  4. [C#] Passage d'une variable pour un controluser
    Par julio84 dans le forum ASP.NET
    Réponses: 10
    Dernier message: 07/04/2005, 13h50
  5. [XSL] utiliser une variable pour nom d'élément
    Par luta dans le forum XSL/XSLT/XPATH
    Réponses: 13
    Dernier message: 07/09/2004, 13h58

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo