What is the best way to trigger an Ionic Modal when clicking?

I'm completely new to working with Ionic and AngularJS, and I've hit a roadblock when trying to implement a modal box that should open upon clicking on a checkbox or radio button in the settings page. Specifically, this issue occurs when selecting the third option for hashtag search. I've utilized ng-controller and ng-click to trigger the action, but it seems like there's an error popping up in the debugger:

GET http://localhost:8100/hashtag-modal [HTTP/1.1 404 Not Found 1ms]

The 404 Not Found error typically indicates that the templateUrl couldn't be located. However, all my navigation pages are successfully linked in the index.html except for hashtag-modal.html within the app.js file. Why is this happening and how can I resolve it?

app.js

// Navigation pages
app.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
  .state('index', {
    url: '/index',
    templateUrl: 'index.html'
  })
  .state('about', {
    url: '/about',
    templateUrl: 'about.html'
  })
  .state('settings', {
    url: '/settings',
    templateUrl: 'settings.html'
  })
  .state('hashtag-modal', {
    url: '/hashtag-modal',
    templateUrl: 'hashtag-modal',
    controller: 'hashtag-modalCtrl'
  })

  $urlRouterProvider.otherwise("/index"); // if no url found, go back to index
})

// Hashtag Search option
app.controller('hashtagController', ['$scope', function($scope)
                                     {
                                         $scope.hashtagValue = 'Search'; 

                                         $scope.hashtag = function()
                                         {
                                             $scope.hashtagValue = 'blackandwhitephotography'; 
                                         };

                                     }]);

// hashtag search modal
app.controller('hashtag-modalCtrl', function($scope, $ionicModal) {
    $ionicModal.fromTemplateUrl('hashtag-modal.html', {
        scope: $scope,
        animation: 'slide-in-up',
        focusFirstInput: true
    }).then(function(modal) {
        $scope.modal = modal;
    });
    $scope.openModal = function() {
        $scope.modal.show();
    };
    $scope.closeModal = function() {
        $scope.modal.hide();
    };
    $scope.$on('$destroy', function() {
        $scope.modal.remove();
    });
    $scope.$on('modal.hidden', function() {
    });
    $scope.$on('modal.removed', function() {
    });
});

index.html

<!-- SETTINGS -->
<script id="settings.html" type="text/ng-template">
  <ion-view title="Settings" hide-back-button="false">
    <ion-content class="padding">

<!-- Remaining codes have been omitted for brevity -->

<p><strong>Revised app.js</strong></p>

<p>Incorporated <code>$ionicModal into the hashtagController, but encountered the error message Error: $ionicModal is undefined. Any ideas where it might be undefined?

// Hashtag Search option
app.controller('hashtagController', ['$scope', function($scope, $ionicModal)
{
  $scope.hashtagValue = 'Search'; 

  $scope.hashtag = function()
  {
    $scope.hashtagValue = 'blackandwhitephotography'; 
    $ionicModal.fromTemplateUrl('hashtag-modal.html', {
        scope: $scope,
        animation: 'slide-in-up',
        focusFirstInput: true
    }).then(function(modal) {
        $scope.modal = modal;
    });
    $scope.openModal = function() {
        $scope.modal.show();
    };
    $scope.closeModal = function() {
        $scope.modal.hide();
    };
    $scope.$on('$destroy', function() {
        $scope.modal.remove();
    });

                                         }

                                     }]);

Revised label

<label class="item item-radio" id="hashtagRadio" ng-controller="hashtagController" ng-click="hashtag();openModal();">
  <input type="radio" name="settings-group" value="search">
  <div class="item-content">
    <span class="ion-pound"></span>&nbsp;&nbsp;&nbsp;<span id="hashtagInput">{{hashtagValue}}</span>
  </div>
  <i class="radio-icon ion-checkmark"></i>
 </label>

Answer №1

ionic modal functionality is separate from routes.

To implement, you simply load a static html template from the server, which will then be displayed in an ionic modal with all of its bindings intact.

To streamline your code, consider integrating the controller within the same scope :

app.controller('hashtagController', ['$scope', function($scope, $ionicModal) {
    $scope.hashtag = function() {
        $scope.hashtagValue = 'blackandwhitephotography'; // value to be displayed upon selection

        $ionicModal.fromTemplateUrl('hashtag-modal.html', {
            scope: $scope,
            animation: 'slide-in-up',
            focusFirstInput: true
        }).then(function(modal) {
            $scope.modal = modal;
            $scope.modal.show();
        }); 
    };

    $scope.openModal = function() {
        $scope.modal.show();
    };

    $scope.closeModal = function() {
        $scope.modal.hide();
    };


    $scope.$on('$destroy', function() {
        $scope.modal.remove();
    });

    $scope.$on('modal.hidden', function() {
        // Action performed upon modal hide
    });

    $scope.$on('modal.removed', function() {
        // Action performed upon modal removal
    });
}

Incorporate the following HTML snippet to utilize the functionality :

    <label class="item item-radio" id="hashtagRadio" ng-controller="hashtagController" ng-click="hashtag();openModal();">
        <input type="radio" name="settings-group" value="search">
        <div class="item-content">
            <span class="ion-pound"></span>&nbsp;&nbsp;&nbsp;<span id="hashtagInput">{{hashtagValue}}</span>
        </div>
        <i class="radio-icon ion-checkmark"></i>
    </label>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

JavaScript Node only providing numerical values and not returning correct data types

I am currently working on using JavaScript Node.js to retrieve data from a MySQL query and display it on a webpage. Right now, I am only able to view the results of the query in the console. Here is the code snippet: var mysql = require('mysql' ...

tips for accessing the useState value once it has been initialized

When using the state hook in my code, I have: const [features, setFeatures] = useState([]) const [medicalProblem, setMedicalProblem] = useState([]) The medicalProblem variable will be initially populated with a response from an API call: useEf ...

Generating a video from an image with FFMPEG

My project involves developing a video editing application using JavaScript, ffmpeg, and Java. I have managed to extract frames from a video using FFMPEG and replace them with new images through canvas.toDataURL. However, I am facing an issue where these n ...

Adding HTML content to a container in Angular 2 using TypeScript

My goal is to add some HTML content to an element. After researching various solutions online, I came across many confusing and ineffective methods. To achieve this using JavaScript, I can use the following code: var d1 = document.getElementsByClassName(& ...

How can you inform TypeScript about a file that will be included using a script tag?

I am currently utilizing TypeScript for my front-end JavaScript development, and I have a situation where I am loading two scripts from my index.html file as shown below: <script src="replacements.js"></script> <script src="socket.js">&l ...

Embed a nested datatable inside the child row of a parent datatable

I have noticed that several others have posed this same question (such as here: Add child row as nested datatable within existing datatable), however, I have not yet found a satisfactory answer. Within my "master" datatable, I am utilizing the child row f ...

Why isn't my state updating with componentDidMount()?

I am currently exploring React and working on creating a view counter for different divs. To achieve this, I require the height and scroll top height of the divs. However, after obtaining these values, I am facing issues when trying to set state with the ...

Bluebird guarantees that no information will be collected

I'm currently in the process of integrating promises into the API for my application. When I try to access the following route, I get a "No data received" error in Postman, even though the commented-out block of code is working perfectly fine. import ...

Getting Started with Parsing JSON Objects in ReactJS

In my ReactJS project, I am trying to parse through a JSON list using the following model: public class ModelEmployee { public List<Employeelist> Employees { get; set; } public int count { get; set; } public int Pagenumber { get; set; } ...

Angular 4: Retrieving the selected element's object from a collection of elements

In my x.component.html file, I have a list of objects that are being displayed in Bootstrap cards like this: <div *ngFor="let item of items | async"> <div class="row"> <div class="col-lg-6"> <div class="card ...

Include the jquery library and embed a Google Map

Hello, I am using jQuery load to refresh my page every second. The problem arises when I add a Google Map to the page - the map appears and disappears every second. Is there a way to fix this issue? $(document).ready(function(){ <?php if( ...

Issue arises with variable not defined upon submission of ng-change event

Currently, I am attempting to save a variable from the date type input in HTML using AngularJS. In previous instances within this application, I was able to accomplish this with select tags instead of input tags and everything worked perfectly, confirming ...

Pressing the Like Button triggers the transfer of a specific variable from PHP to jQuery

I have a piece of PHP code that I am using to display all users' posts, each with its own unique 'like' button: $sql = "SELECT * FROM posts"; $result = mysqli_query($con,$sql); while($row=mysqli_fetch_assoc($result)){ $post_content = $ro ...

Vue method does not seamlessly handle async/await operations

Currently, I am engrossed in a Vue.js project where my main focus is on executing a series of promises that are interdependent. To simplify this example, I have omitted most of the code and replaced them with console.log statements to display the values I ...

Mongoose reminds us that static is not a method

I encountered an error message stating that "product.try() is not a function." Interestingly, when I immediately invoke the try() function, it works fine and node recognizes the model "product." I'm starting to wonder if there's something funda ...

What could be causing my component to not properly redirect to the Movies Page?

Currently, I am utilizing React-Router v6.4 along with Vite for setting up a React project. I am facing an issue where the routes are not redirecting to the movies component as expected. App.jsx import "./App.css"; import { createBrowserRouter, ...

Unable to access data within the function in Typescript

In my TypeScript code, I've encountered an issue where the `copyColumns` data is not accessible inside a recursive function named `rec`, despite being accessible outside of it. Can someone help me identify what's wrong in my code? When I run con ...

Updating User Metadata Using Ajax

Could someone please assist me in identifying the issue with my ajax function? The function checks two database tables every few seconds and is supposed to update one table to match the other if they do not match. However, it seems like the database table ...

Replace the image source with a list of images

I am looking to create a dynamic image list using either an array or an HTML list. When I hover over an image, it should change one by one with a fade or slide effect, and revert back to the default images when I hover out. Question 1: What type of list s ...

Issue encountered while trying to exhibit jpg image content from server side on html

I am attempting to display an image from server-side data using an Ajax call. The data stored on the server looks something like this: "ÿØÿàJFIFÿÛC4­¶¸UOHlʵcBò)3¹_È'I4~&éüÿ§Ú<ã©ã4>'Øù¿ÇÄmËCÈgÚsZ¥ë" Upo ...