Issue
I have just started using this Ionic framework and using it with plain JS. I an having an issue that when I select something on the select box my JS function is not triggered and not sure why.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css"/>
<script>
function changeDate() {
alert('change date');
}
</script>
</head>
<body>
<ion-app>
<ion-tabs>
<ion-tab tab="view">
<ion-item color="dark">
<ion-label class="white-text">Date Range</ion-label>
<ion-select ionChange="changeDate()" id="airportsDateChanger" value="all">
<ion-select-option value="all">All</ion-select-option>
<ion-select-option value="sevendays">Last 7 Days</ion-select-option>
<ion-select-option value="lastthirty">Last 30 Days</ion-select-option>
<ion-select-option value="lastninety">Last 90 Days</ion-select-option>
<ion-select-option value="pastyear">Past Year</ion-select-option>
<ion-select-option value="custom">custom</ion-select-option>
</ion-select>
</ion-item>
</ion-app>
</body>
</html>Solution
You have to add an event listener in your script tag to listen for changes on ion-select.
<script>
function changeDate() {
alert('change date');
}
document.getElementById('airportsDateChanger').addEventListener('ionChange', changeDate);
</script>
Answered By - Dan
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.