Level 122
how do you call this function?
Dec 1, 2022
13
Level 7
Livewire array not persisting to View
I have an array
public function getWeekDay($key)
{
$this->times_arr = [];
$day = $this->weekdays[$key];
$start = $this->start_end[$day][0];
$end = $this->start_end[$day][1];
// dd($day, $this->start_end[$day], $this->range);
// $length =
for ($i=$start; $i <= $end; $i+=$this->range) {
$time = Time::where('id', $i)->value('time');
array_push($this->times_arr, $time);
}
// dd($this->times_arr);
$this->switch = ! $this->switch;
$this->dispatchBrowserEvent('render-calendar');
// dd($this->times_arr);
}
the array is $times_arr when i update and check using dd() the values are correct but on the view only the first time i click it is showing
<div @class(['text-center w-64 text-center overflow-auto', 'hidden' => $this->switch == false])>
<p class="text-sm mb-2 font-medium text-primary-600">Pick a time</p>
{{ var_export($times_arr) }}
@foreach ($times_arr as $time)
<button type="button" class="rounded-sm w-40 justify-center inline-flex items-center m-2 hover:text-white transition duration-300 ease-in border-2 border-primary-600 text-primary-600 hover:bg-primary-700 focus:ring-4 focus:ring-primary-300 font-medium text-sm px-5 py-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">
{{$time}}
</button>
@endforeach
</div>
Level 7
window.addEventListener('render-calendar', event => {
renderCalendar();
});
const renderCalendar = () => {
let firstDayofMonth = new Date(currYear, currMonth, 1).getDay(),
lastDateofMonth = new Date(currYear, currMonth + 1, 0).getDate(),
lastDayofMonth = new Date(currYear, currMonth, lastDateofMonth).getDay(),
lastDateofLastMonth = new Date(currYear, currMonth, 0).getDate();
let available_days ='<?php echo json_encode($selected_days);?>';
console.log(available_days);
let liTag = '';
for (let i = firstDayofMonth; i>0; i--) {
liTag += `<li class="inactive">${lastDateofLastMonth - i + 1}</li>`;
}
for (let i = 1; i <= lastDateofMonth; i++) {
const y = new Date(currYear, currMonth, i).getDay();
let x = y % 6;
let isToday = i === date.getDate() && currMonth === new Date().getMonth();
if(available_days.indexOf(y) >= 0){
liTag += `<li class="not-choosed hover:text-white px-1">
<a href="#" class="" wire:click='getWeekDay(${y})'>${i}</a>
</li>`;
} else {
liTag += `<li class="inactive choosed px-1">
<a href="#" class="">${i}</a>
</li>`;
}
}
for (let i = lastDayofMonth; i<6; i++) {
liTag += `<li class="inactive">${i - lastDayofMonth + 1}</li>`;
}
currentDate.innerText = `${months[currMonth]} ${currYear}`;
daysTag.innerHTML = liTag;
}
prevNextIcon.forEach(icon => {
icon.addEventListener("click", () => {
currMonth = icon.id === "prev" ? currMonth - 1 : currMonth + 1;
if(currMonth < 0 || currMonth > 11) {
date= new Date(currYear, currMonth);
currYear = date.getFullYear();
currMonth = date.getMonth();
} else {
date = new Date();
}
renderCalendar();
})
})
renderCalendar();
Level 7
for (let i = 1; i <= lastDateofMonth; i++) {
const y = new Date(currYear, currMonth, i).getDay();
let x = y % 6;
let isToday = i === date.getDate() && currMonth === new Date().getMonth();
if(available_days.indexOf(y) >= 0){
liTag += `<li class="not-choosed hover:text-white px-1">
<a href="#" class="" wire:click='getWeekDay(${y})'>${i}</a>
</li>`;
} else {
liTag += `<li class="inactive choosed px-1">
<a href="#" class="">${i}</a>
</li>`;
}
}
Level 122
@TimiAde inspect the html. What does this render;
<li class="not-choosed hover:text-white px-1">
<a href="#" class="" wire:click='getWeekDay(${y})'>${i}</a>
</li>
Level 7
@Snapey dates in a calendar for example if the user chooses wed thurs fri, then days of wed thurs fri will onnly be clickable
Level 122
@TimiAde some reason you did not answer?
Level 7
@Snapey please which one, it seems i did not get you.
Level 7
@Snapey what is happening is the $times_arr on the view does not change but updates in livewire. I think it is the foreach loop or the render method in livewire file
Level 122
@TimiAde i asked you to look at the html in the browser. what is rendered wire:click='getWeekDay(${y})'
Level 7
<li class="not-choosed hover:text-white px-1">
<a href="#" class="" wire:click="getWeekDay(1)">19</a>
</li>
<li class="not-choosed hover:text-white px-1">
<a href="#" class="" wire:click="getWeekDay(2)">20</a>
</li>
<li class="not-choosed hover:text-white px-1">
<a href="#" class="" wire:click="getWeekDay(3)">21</a>
</li>
Level 7
Level 122
best thing i can suggest is install laravel debugbar since you will then be able to inspect all public properties at any time and see what causes the array to change
Level 7
@Snapey i have used the laravel debugbar i just noticed the getWeekDay function is only called once after that it doesnt work again. it sets $selected_day to a value in an array
public $weekdays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
public function getWeekDay($key)
{
$this->selected_day = $this->weekdays[$key];
$this->switch = ! $this->switch;
$this->dispatchBrowserEvent('render-calendar');
return;
}
once i set getWeekDay(1) is sets $selected_day to $weekday[1] which is equal to 'Mon' after that getWeekDay(2) and getWeekDay(3) dont set it again.
Please or to participate in this conversation.