Use angular js to dynamically load a template via an ajax request

I am trying to send an AJAX request in order to retrieve a JSP/HTML page for the templateUrl of a modal. Here is the code I have written:

 var modalInstance = $uibModal.open({
                    animation: $scope.animationsEnabled,
                    templateUrl: 'pages/recordingDetailPopup.jsp',
                    controller: 'FileDetailCtrl',
                    size: 'lg',
                    resolve: {
                        activeRecords: function () {
                            return inbnoxList;
                        }
                    }
                });

However, I would like to achieve something similar to the following:

 var modalInstance = $uibModal.open({
                animation: $scope.animationsEnabled,
                templateUrl: function(){
                $http.get('fileDetailJsp');
                },
                controller: 'FileDetailCtrl',
                size: 'lg',
                resolve: {
                    activeRecords: function () {
                        return inbnoxList;
                    }
                }
            });

If anyone has suggestions on how to implement this functionality, please let me know.

javascriptangularjsajax

Answer №1

templateUrl within the second code snippet will yield a promise rather than directly providing the response of the jsp file.

In the situation described above, it is necessary to first obtain the response from the jsp file and then proceed to invoke the .open method on the modal as shown below - 

$http.get('fileDetailJsp').then(function(url){
      var modalInstance = $uibModal.open({
            animation: $scope.animationsEnabled,
            templateUrl: url,
            controller: 'FileDetailCtrl',
            size: 'lg',
            resolve: {
                activeRecords: function () {
                    return inbnoxList;
                }
            }
        });
}, function(){
  // handle error here
 });

I hope this explanation is useful...

Answer №2

When you invoke the $http.get('fileDetailJsp'); method, it will result in a returning instance of a Promise. However, at the point when you execute $uibModal.open, the Promise has not yet been resolved. This is why you are currently receiving no output. As suggested by @pdenes, you should utilize something similar to:

$http.get('fileDetailJsp').then(function(response) {
   $uibModal.open(...retrieve information from the response...); 
});

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

How can I use jQuery to add styling to my menu options?

Looking to customize my menu items: <ul> <li class="static"> <a class="static menu-item" href="/mySites/AboutUs">About Us</a> </li> <li class="static"> <a class="static-menu-item" href="/m ...

javascriptjqueryhtmlcsssharepoint-2010

Mongoose fails to save due to an error stating "undefined id"

Having some trouble with the Mongoose save function... In my user model file: const mongoose = require('mongoose'); const Schema = mongoose.Schema; const User = mongoose.model('User', { name: Schema.Types.Mixed, gender: String, ...

javascriptnode.jsmongodbmongoose

Updating div content dynamically with Jquery and PHP variable

How can I continuously update a div with the current date and time using PHP variable and Jquery? Here is my PHP file containing the variable date: <?php $date = date('d/m/Y H:i:s'); ?> And here's the code in my HTML file: <!DOCT ...

javascriptphpjqueryjsonajax

Understanding JavaScript Regular Expressions

To ensure that no HTML tags are entered into a textarea, I am utilizing the following regex for validation. If any HTML tags are detected in the textarea, I need to display a validation message. The regex being used is: /<(\w+)((?:\s+\w ...

javascripthtml

Issue encountered when attempting to delete object using DELETE request

I've recently started working with node.js and I'm attempting to remove an object from a JSON file when making a DELETE request. Despite my efforts, the object isn't being deleted as expected. Here is the code I have written: const express = ...

javascriptnode.jsjsonexpressserver

Utilizing Javascript to Generate a Comma-Separated List from Multiple Select Elements

I have a set of dynamic single-option select elements that I need to work with. My goal is to generate a list containing the indexes of all selected options, separated by commas. Currently, I am using elements = document.getElementsByClassName("my-class ...

javascript

What steps should be taken to set up the datatable to sort records in descending order based on the creation date?

In my Rails application, I am utilizing the Datatable plugin to display data on the User index page. The first column in the index page is the created_at field, which displays dates like Mon, 17-Oct-16. I want to sort this column in descending order base ...

javascriptruby-on-railssortingdatedatatable

Storing data in a table created through a belongsToMany relationship in Sequelize and retrieving it. (Solution provided below)

My backend setup includes Node.js, Express.js, and Sequelize for database connections. I have established a many-to-many relationship between Tasks and Keys. I defined the connection between Tasks and Keys using Sequelize as follows: Backend // Task ...

angularjssql-servernode.jsexpresssequelize.js

Observing changes in a parent component variable with Angular

One feature of my form is that it consists of a parent component and a child component. To disable a button within the form, I utilize a function called isDatasetFilesValid() which checks a specific variable (datasetList[i].fileValid). This variable is mo ...

javascriptangulartypescriptcallback

The code functions properly within the emulator, however, it fails to execute on an actual device

Yesterday, I posted a question about the background related to this topic: on click event inside pageinit only works after page refresh. I received an answer for my question and tested it in Chrome devtools where it worked perfectly. However, today when ...

javascriptjquery

transmit data via Javascript to interact with a Python web application

I'm having issues sending a json object from JavaScript to a Python webservice. The service keeps treating it as a string. Here are the codes for both client and server sides: CLIENT SIDE: $("#button").click(function () { $.ajax({ ...

javascriptpythonjsonweb-servicesjquery

option for uploading various data to the database using (php, ajax)

I am using a foreach loop to display data from the database on the screen. However, when I click the button, I do not see any results. Can someone please help me identify where I may be making mistakes? <table class="table"> <thead class="the ...

phpjqueryajax

jQuery does not seem to be able to recognize the plus sign (+)

I am currently developing a calculator program and facing some challenges with the addition function. While the other functions ("/", "-", "*") are working fine, the plus ("+") operation seems to be malfunctioning. Here's the snippet of HTML and JavaS ...

javascriptjqueryhtml

"Exploring the capabilities of Node WebKit in conjunction with Serial

Currently, I am in the process of building an application using Node WebKit and require access to the SerialPort on my Windows 8 PC. To install third-party modules with C/C++ addons, I followed the instructions outlined in this guide: https://github.com/n ...

javascriptnode.jsserial-portwebkitnode-webkit

Trying out an ajax request in React by clicking a button

I have been working on testing a simple Login component that involves filling out an email and password, then clicking a button to log in. When the login button is clicked, it triggers an ajax post request using axios. I am interested in testing both happy ...

javascriptreactjsreact-nativetestingaxios

Utilizing Ajax in CodeIgniter

When I click on a button, nothing happens and I can't find any error in the console. Could there be an error in the data field? Here is my AJAX code: $(document).ready(function() { $('#brisanje').click(function() { $.ajax({ ...

ajaxcodeigniter

Complete hyperlinks sourced from Google's AJAX API search outcomes

When you search on Google, the results show full URLs. However, when using the Google AJAX API, only the domain name is returned. For instance, if you search for "contact softkube", Google Search displays as the link, whereas the Google AJAX API only sho ...

ajaxsearch

The error message "trying to access markers property of undefined in the render function" occurred

I encountered this error while running my react-native component and need assistance. An error stating "undefined is not an object (evaluating 'this.state.markers.map')" occurred. This error appears in the following locations: c:\proje ...

javascriptgoogle-mapsreact-native

Methods to retrieve an array's value list dynamically using the 'id' in Vuejs

**User.vue** <template> <div> <div v-for="list in lists" :key="list.id">{{ list.val }} {{ list.kk }}</div> </div> </template> <script> import { datalist } from "./datalist"; export default { name: "User ...

javascriptvue.js

`In HTML, trigger blocks based on the number chosen by the user`

I am working on creating a web page where users can select the number of friends they have, and based on that input, a corresponding number of invisible boxes will be triggered. For example, if a user selects 3 friends, 3 boxes will appear for them to ente ...

javascripthtml