I have ASP.net mvc project. In my reservation page, dropdown menus are works fine. But when I switch mobile view, I get an error on javascript side. Error is
Quote:
> [Intervention] Unable to preventDefault inside passive event listener
> due to target being treated as passive. See
> https://www.chromestatus.com/features/5093566007214080[^]
I check this error and I found
this topic[
^]. And applied the solutions. none of them worked!
I tried
give #RefectoryId style touch-action:none; **didn't work!**
document.addEventListener("mousewheel", this.mousewheel.bind(this), { passive: false }); **didn't work**
document.addEventListener("touchmove", this.mousewheel.bind(this), { passive: false }); **didn't work**
I want my dropdown work on mobile view, I say again, It runs perfectly on normal view. Just don't work on mobile view.
**My JavaScript Side**
var reservationCount = 0;
var totalAmount = 0;
$(document).ready(function () {
$("#reservationCount")[0].textContent = "(" + reservationCount + ")";
var tablinks = document.getElementById("reservationPageHead");
tablinks.className = tablinks.className + " active";
document.getElementById('reservationPage').style.display = "block";
$("#RefectoryId").select2({
allowClear: true,
placeholder: 'Yemekhane Seçiniz',
});
var refectorySelect = $('#RefectoryId');
refectorySelect.on("select2:select", function (e) {
var foodMealId = $("#FoodMealId").val();
var refectoryId = $("#RefectoryId").val();
$.ajax({
url: "@Url.Action("GetRefectoryWithFoodMeal", "Reservation", new { area = "Common" })",
data: { refectoryId: refectoryId },
type: "POST",
async: false,
success: function (returnData) {
if (returnData.data == undefined) {
PageToastr(returnData.type, returnData.message, returnData.title);
}
else {
$("#FoodMealId option[value]").remove();
$("#FoodMealId").select2({
allowClear: true,
placeholder: 'Seçiniz',
data : returnData.data,
});
}
},
beforeSend: function () {
$(".loaderDiv").show();
$(".loader").show();
},
complete: function () {
$(".loaderDiv").hide();
$(".loader").hide();
},
error: function (xhr, status, err) {
if (xhr.status === 999) {
noAuthorize(this.url);
}
}
});
var foodMealId = $("#FoodMealId").val();
GetCalendarMenuPartial(foodMealId, refectoryId);
});
$("#FoodMealId").select2({
allowClear: true,
placeholder: 'Öğün Seçiniz',
});
var foodMealSelect = $('#FoodMealId');
foodMealSelect.on("select2:select", function (e) {
var foodMealId = $("#FoodMealId").val();
var refectoryId = $("#RefectoryId").val();
GetCalendarMenuPartial(foodMealId, refectoryId);
});
$('#completeReservation').tooltip('update');
});
What I have tried:
i added
#RefectoryId{
touch-action: none;
}
and added
document.addEventListener("touchmove", this.mousewheel.bind(this), { passive: false }); **didn't work**
**My All Code**
1 <div class="clearfix">
2 <div class="row">
3 <div class="col-xl-8 col-lg-8 col-md-12 col-sm-12">
4 <div class="alert alert-secondary" role="alert">
5 6 </div>
7 <div class="m-portlet m-portlet--tabs m-portlet--mobile ">
8 <div class="m-portlet__head">
9 <div class="m-portlet__head-toolbar">
10 @*<ul class="nav nav-tabs nav-tabs-line nav-tabs-line-brand nav-tabs-line-2x nav-tabs-line-right nav-tabs-bold" role="tablist">
11 <li class="nav-item">
12 <a id="reservationPageHead" class="nav-link active" data-toggle="tab" role="tab" aria-selected="true">
13 ^__i class="fa fa-calendar-alt"__^</i__^Rezervasyon Seçimi
14 </a>
15 </li>
16 <li class="nav-item">
17 <a id="paymentPageHead" class="nav-link" data-toggle="tab" role="tab" aria-selected="false">
18 ^__i class="fa fa-credit-card"__^Ödeme Yap
19 </a>
20 </li>
21 </ul>*@
22 <div class="tab">
23 <button id="reservationPageHead" class="tablinks">^__i class="fa fa-calendar-alt"__^ Rezervasyon Seçimi</button>@* onclick="openTab(event, 'reservationPageHead', 'reservationPage')"*@
24 <button id="paymentPageHead" class="tablinks"> ^__i class="fa fa-credit-card"__^ Ödeme Yap</button>@* onclick="openTab(event, 'paymentPageHead', 'paymentPage')"*@
25 </div>
26
27 </div>
28 </div>
29
30 <div class="m-portlet__body" style="padding-top:12px;">
31 <div class="tab-content">
32 @*<div id="London" class="tabcontent">
33 <h3>London</h3>
34 <p>London is the capital city of England.</p>
35 </div>
36
37 <div id="Paris" class="tabcontent">
38 <h3>Paris</h3>
39 <p>Paris is the capital of France.</p>
40 </div>
41
42 <div id="Tokyo" class="tabcontent">
43 <h3>Tokyo</h3>
44 <p>Tokyo is the capital of Japan.</p>
45 </div>*@
46 <div class="tab-pane active tabcontent" id="reservationPage" role="tabpanel">
47 <div class="col-sm-12 col-md-12">
48 <div class="form-group row rowR">
49 <label class="form-control-label col-md-4">^__strong__^Yemekhane </label>
50 ***<div class="col-md-8">
51 @Html.DropDownListFor(x => x.RefectoryId, new SelectList(Model.Refectories, "Id", "Name"), ("Seçiniz"), new { Id = "RefectoryId", @class = "form-control select2" })
52 </div>
53 </div>
54
55 <div class="form-group row rowR">
56 <label class="form-control-label col-md-4">^__strong__^Öğün </label>
57 <div class="col-md-8">
58 @Html.DropDownListFor(x => x.FoodMealId, new SelectList(Model.FoodMeals, "Id", "Name"), ("Seçiniz"), new { Id = "FoodMealId", @class = "form-control select2" })***
59 </div>
60 </div>
61
62 </div>
63
64
65 <div id="calendarMenuPartial" class="row">
66
67 </div> <!--
68
69 </div> <!--
70 <div class="tab-pane tabcontent" id="paymentPage" role="tabpanel">
71
72
73 @using (Html.BeginForm("DoPaymentSave", "Reservation", FormMethod.Post))
74
75 {
76 @Html.HiddenFor(x => x.AddCardMenuString)
77
78 @Html.HiddenFor(x => x.Description)
79
80
81 <div class="row">
82 @*<div class="col">
83 <div class="card paymentCard bg-light mb-4" style="min-height: 300px;">
84 <div class="card-header">^__i class="fa fa-credit-card-alt"__^ Kart Görseli</div>
85 <div class="card-body" style="min-height:264px;">
86 <div class='card-wrapper'></div>
87 </div>
88 </div>
89 </div>*@
90
91
92 <div class="col">
93 <div class="card paymentCard bg-light mb-4">
94 @* style="min-height: 405px;" ozelliği gecici olarak verildi. Mobil uyumlu değil.*@
95 <div class="card-header">^__i class="fa fa-credit-card"__^ Kart Bilgileri</div>
96 <div class="card-body">
97
98 <div class="row">
99 <div class="col-xl-6 col-md-12 col-sm-12 col-xs-12">
100
101 <div class="row">
102 <div class="col-sm-12">
103 <h5>
104 ^__i class="fa fa-credit-card"__^ Kart Numarası <br />
105 </h5>
106 @Html.TextBoxFor(x => x.number, new { @name = "number", @type = "text", @class = "form-control card-number", @placeholder = "16 Haneli Kart Numarası", @maxlength = "19" })
107
108 </div>
109 </div>
110 <div class="row">
111 <div class="col-sm-12">
112 <h5>
113 ^__i class="fa fa-user"__^ Kart Sahibi <br />
114 </h5>
115 @Html.TextBoxFor(x => x.name, new { @name = "name", @type = "text", @class = "form-control name", @placeholder = "Kart Sahibi" })
116
117
118 </div>
119 </div>
120
121 <div class="row">
122 <div class="col-sm-6">
123 <h5>
124 ^__i class="fa fa-calendar"__^ Son Kul. Tarihi (Ay) <br />
125 </h5>
126 @Html.DropDownListFor(x => x.expirymonth, new List<SelectListItem>()
127 {
128 new SelectListItem() { Value = "01", Text = "01" },
129 new SelectListItem() { Value = "02", Text = "02" },
130 new SelectListItem() { Value = "03", Text = "03" },
131 new SelectListItem() { Value = "04", Text = "04" },
132 new SelectListItem() { Value = "05", Text = "05" },
133 new SelectListItem() { Value = "06", Text = "06" },
134 new SelectListItem() { Value = "07", Text = "07" },
135 new SelectListItem() { Value = "08", Text = "08" },
136 new SelectListItem() { Value = "09", Text = "09" },
137 new SelectListItem() { Value = "10", Text = "10" },
138 new SelectListItem() { Value = "11", Text = "11" },
139 new SelectListItem() { Value = "12", Text = "12" },
140 }, null, new { @name = "expiry-month", @type = "text", @class = "form-control expiry-month", @placeholder = "AA" })
141
142 </div>
143 <div class="col-sm-6">
144 <h5>
145 ^__i class="fa fa-calendar"> Son Kul. Tarihi (Yıl) <br />
146 </h5>
147 @{
148 var thisYear = DateTime.Now.Year;
149 var expiryYears = new List<SelectListItem>();
150 expiryYears.Add(new SelectListItem() { Value = thisYear.ToString(), Text = thisYear.ToString() });
151 var xYear = thisYear;
152 var one = 1;
153 for (int i = 0; i < 15; i++)
154 {
155 xYear += one;
156 expiryYears.Add(new SelectListItem() { Value = xYear.ToString(), Text = xYear.ToString() });
157 }
158 }
159 @Html.DropDownListFor(x => x.expiryyear, expiryYears, null, new { @name = "expiry-year", @type = "text", @class = "form-control expiry-year", @placeholder = "YYYY" })
160 </div>
161 </div>
162
163
164 <div class="row">
165 <div class="col-sm-12">
166 <h5>
167 ^__i class="fa fa-lock"> CVV <br />
168 </h5>
169 @Html.TextBoxFor(x => x.cvc, new { @name = "cvc", @type = "text", @class = "form-control cvc", @placeholder = "CVV", @maxlength = "3" })
170 </div>
171 </div>
172 <div class="row">
173 <div class="col-sm-12">
174 <h5>
175 ^__i class="fa fa-lira-sign"> Tutar <br />
176 </h5>
177 @Html.TextBoxFor(x => x.TotalAmount, new { id = "TotalAmount", @type = "text", @class = "form-control", @placeholder = "Tutar", @readonly = "readonly" })<br />
178 </div>
179 </div>
180
181 </div>
182 </div>
183 </div>
184 </div>
185 </div>
186
187 </div>
188 <div class="row">
189 <div class="col">
190 <div class="form-group">
191 <button id="backReservation" type="button" class="btn btn-danger btn-lg mr-4 pull-left" style="font-size:14px;">GERİ</button>
192 </div>
193 </div>
194 <div class="col">
195 <div class="form-group">
196 <input id="btnDoPayment" type="submit" class="btn btn-success btn-lg mr-4 pull-right" style="font-size: 14px; " value="ÖDEME YAP" />
197 </div>
198 </div>
199 </div>
200
201
202 @*</form>*@
203 }
204
205 </div> <!--
206 </div>
207 </div>
208 </div>
209 </div>
210
211 <div class="col-md-4 col-xs-12">
212 <div class="row">
213 <div class="col-sm-12">
214
215 <div class="m-portlet m-portlet--mobile shoppingCart ">
216 <div class="m-portlet__head">
217 <div class="m-portlet__head-label">
218 <h3 class="m-portlet__head-title">
219 ^__i class="fa fa-shopping-basket"> <small>Rezervasyon Listem </small>
220 <small id="reservationCount" class="text-dark"></small>
221 </h3>
222 </div>
223 </div>
224
225 <table id="shopping-cart" style="text-align: center">
226 <tr>
227 <td style="display: none">#</td>
228 <td>Menü</td>
229 <td>Öğün</td>
230 <td>Yemekhane</td>
231 <td>Adet</td>
232 <td>Fiyat</td>
233 </tr>
234 @*<tr>
235 <td>02.04.2019</td>
236 <td>1 Adet</td>
237 <td>₺4,25</td>
238 </tr>
239 <tr>
240 <td>03.04.2019</td>
241 <td>1 Adet</td>
242 <td>₺4,25</td>
243 </tr>
244 <tr>
245 <td>05.04.2019</td>
246 <td>1 Adet</td>
247 <td>₺4,25</td>
248 </tr>*@
249 </table>
250 <table class="" style="text-align: right; margin-left:10px; margin-right:15px; font-size:15px; float:right">
251 <tr>
252 <td> </td>
253 <td> </td>
254 <td> </td>
255 <td>Toplam: </td>
256 <td id="PayableAmount">₺0.00</td>
257 </tr>
258 </table>
259 </div>
260 </div>
261 </div>
262 <div class="row">
263 <div class="col-sm-12">
264 <button id="completeReservation" style="margin-left:auto;margin-right:auto;width:100%" class="btn btn-success mt-5" data-toggle="tooltip" data-placement="top" title="Seçilen menüleri satın almak için tıklayın">Rezervasyonu Tamamla</button>
265 </div>
266 </div>
267 <div class="row mt-5">
268 <div class="col-sm-12">
269 <div class="alert alert-secondary">
270 <table class="table table-striped- table-bordered table-hover">
271 <thead>
272 <tr class="m-datatable__row">
273 <td>ÖĞÜN</td>
274 <td>BAŞLANGIÇ SAATİ</td>
275 <td>BİTİŞ SAATİ</td>
276 </tr>
277 </thead>
278 <tbody>
279
280 @foreach (var fm in Model.FoodMealsInfo)
281 {
282
283 <tr>
284 <td>@fm.Name</td>
285 <td>@fm.StartHour</td>
286 <td>@fm.EndHour</td>
287 </tr>
288 }
289 </tbody>
290 </table>
291 </div>
292 </div>
293 </div>
294 </div>
295 </div>
296
297
298 </div>
299
300
301
302
303 <script>
304
305 var reservationCount = 0;
306 var totalAmount = 0;
307
308 $(document).ready(function () {
309 $("#reservationCount")[0].textContent = "(" + reservationCount + ")";
310
311
312
313 var tablinks = document.getElementById("reservationPageHead");
314 tablinks.className = tablinks.className + " active";
315 document.getElementById('reservationPage').style.display = "block";
316
317 $("#RefectoryId").select2({
318 allowClear: true,
319 placeholder: 'Yemekhane Seçiniz',
320
321
322 });
323
324 var refectorySelect = $('#RefectoryId');
325 refectorySelect.on("select2:select", function (e) {
326 var foodMealId = $("#FoodMealId").val();
327 var refectoryId = $("#RefectoryId").val();
328 $.ajax({
329 url: "@Url.Action("GetRefectoryWithFoodMeal", "Reservation", new { area = "Common" })",
330 data: { refectoryId: refectoryId },
331 type: "POST",
332 async: false,
333 success: function (returnData) {
334 if (returnData.data == undefined) {
335 PageToastr(returnData.type, returnData.message, returnData.title);
336 }
337 else {
338
339 $("#FoodMealId option[value]").remove();
340 $("#FoodMealId").select2({
341 allowClear: true,
342 placeholder: 'Seçiniz',
343 data : returnData.data,
344 });
345 }
346 },
347 beforeSend: function () {
348 $(".loaderDiv").show();
349 $(".loader").show();
350 },
351 complete: function () {
352 $(".loaderDiv").hide();
353 $(".loader").hide();
354 },
355 error: function (xhr, status, err) {
356 if (xhr.status === 999) {
357 noAuthorize(this.url);
358 }
359 }
360 });
361 var foodMealId = $("#FoodMealId").val();
362 GetCalendarMenuPartial(foodMealId, refectoryId);
363 });
364
365
366 $("#FoodMealId").select2({
367 allowClear: true,
368 placeholder: 'Öğün Seçiniz',
369
370 });
371
372 var foodMealSelect = $('#FoodMealId');
373 foodMealSelect.on("select2:select", function (e) {
374 var foodMealId = $("#FoodMealId").val();
375 var refectoryId = $("#RefectoryId").val();
376 GetCalendarMenuPartial(foodMealId, refectoryId);
377 });
378
379
380
381 $('#completeReservation').tooltip('update');
382 });
383 </script>
384
385 <script>
386 function GetCalendarMenuPartial(foodMealId, refectoryId) {
387 $.ajax({
388 url: '@Url.Action("NewReservationCalendarMenuPartial", "Reservation", new { area = "Common" })',
389 data: { foodMealId: foodMealId, refectoryId: refectoryId, addCardMenu: $("#AddCardMenuString").val() },
390 type: "POST",
391 success: function (partialPage) {
392 if (partialPage.title != undefined) {
393 PageToastr(partialPage.type, partialPage.message, partialPage.title);
394 if (partialPage.result == '@Enums.ResultStatus.SessionTimeExpired.ToString()') {
395 setTimeout(function () { window.location.href = '/Login/Login'; }, 5000)
396 }
397 }
398 else {
399 $("#calendarMenuPartial").html(partialPage);
400 }
401 },
402 beforeSend: function () {
403 $(".loaderDiv").show();
404 $(".loader").show();
405 },
406 complete: function () {
407 $(".loaderDiv").hide();
408 $(".loader").hide();
409 },
410 error: function (xhr, status, err) {
411 if (xhr.status === 999) {
412 noAuthorize(this.url);
413 }
414 }
415 });
416 }
417 </script>
Submit an article or tip