ngDialog fails to display the HTML page in the Template

(function(){
var app = angular.module('sbi', ['ui.grid', 'ngDialog']);

var cmbStati = {};

app.config(['ngDialogProvider', function (ngDialogProvider) {
    ngDialogProvider.setDefaults({
        className: 'ngdialog-theme-default',
        plain: false,
        showClose: true,
        closeByDocument: false,
        closeByEscape: false,
        appendTo: false,
        preCloseCallback: function () {
            console.log('default pre-close callback');
        }
    });
}]);

    app.controller('PanelController',                         ['$scope',  '$compile', 'uiGridConstants', 'ngDialog', function ($scope,  $compile, uiGridConstants, ngDialog){

    var actionTemplate = '<div class="ui-grid-cell-contents"><img class="addNotes" src="images/button/detail.gif" ng-click="grid.appScope.dettaglio(row, false)" /></div>';

    $scope.dettaglio = function(row){

        ngDialog.open({
            template: 'dialog_sbi.html',
            scope: $scope,
            className: 'ngdialog-theme-default', 
            height: 400, 
            plain: true 
        });
     };

    $scope.highlightFilteredHeader = function( row, rowRenderIndex, col, colRenderIndex ) {
            if( col.filters[0].term ){
              return 'header-filtered';
            } else {
              return '';
            }
          };





    $scope.gridOptions =  {
            enableFiltering: true,

            onRegisterApi: function(gridApi){
              $scope.gridApi = gridApi;
            },
            columnDefs: [

              { field: 'azioni', enableFiltering: false, width: 85, enableSorting: false, enableColumnMenu: false, cellTemplate: actionTemplate, displayName: 'Azioni'},
              { field: 'codeSubInstaller', headerCellClass: $scope.highlightFilteredHeader },
              { field: 'nomeSubInstaller', headerCellClass: $scope.highlightFilteredHeader },
              { field: 'cognSubInstaller', headerCellClass: $scope.highlightFilteredHeader },
              { field: 'codeFiscaleSubInstaller', headerCellClass: $scope.highlightFilteredHeader },
              { field: 'descStato' , headerCellClass: $scope.highlightFilteredHeader }
            ]
          };

    //    $scope.listaOptions = cmbStati;
     $scope.toggleFiltering = function(){
            $scope.gridOptions.enableFiltering = !$scope.gridOptions.enableFiltering;
            $scope.gridApi.core.notifyDataChange( uiGridConstants.dataChange.COLUMN );
          };

          $scope.filteredRows=[];

    var data = {};

    console.log("search");
    var loadUrl = "/sky_visp/subinstaller/inserimento/dettaglio.do?methodName=doSearchNg";

    $.ajax({
        async: false,
        url : loadUrl,
        type: "POST",
        data: data, 
        dataType: 'json',
        cache: false,
        complete: function(){
            console.log("Nice search");
        },
        success : function (ritornoSearch, stato) {
            console.log("Made it search");
            console.log("ritornoSearch: "+ritornoSearch);
            $scope.gridOptions.data = ritornoSearch;
        },
        error : function (richiesta, stato, errori) {
            console.log("Nope search");
        }
    });  

       }]); 

    })();

When I attempt to open the HTML template within ngDialog.open, the dialog displays correctly, but instead of showing the content of the HTML page, it prints out the name of the file. How can I ensure that the HTML is opened properly in the dialog? I have tried using the full path, calling it with double quotes, and removing the single quotes.

I'm struggling to understand what I might be missing.

The issue persists despite my attempts at various solutions.

Answer №1

When referencing an HTML file in your code, make sure to utilize the templateUrl attribute rather than template.

Here is an example of how you can implement this:

ngDialog.open({
        templateUrl: 'dialog_sbi.html',
        scope: $scope,
        className: 'ngdialog-theme-default', 
        height: 400, 
        plain: true 
    });
 };

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

Using jQuery to dynamically update the CSS of one table column depending on the attribute of another column

Welcome to my HTML table <!DOCTYPE html> <html> <body> <table> <thead> <th>Title1</th> <th>Title2</th> </thead> <tbody> <tr> <td><input type="checkbox" id=0 /></td> ...

Tips for setting a specific date using angular-bootstrap-datetimepicker

It appears to be requiring you to select a specific time as well. I have gone through the documentation multiple times, but I can't figure out how to only pick a date. Check out this link for more information: ...

Showing the image as a backdrop while scrolling through text

How can I create an effect that continuously displays the image while scrolling text in Internet Explorer without using position: sticky or position: fixed? var sticky = document.querySelector('.sticky-container'); var img = document.querySele ...

Create a function to handle ng-click within an Angular directive

Is there a way to link a function for ng-click in an Angular directive? I have defined my click handler within the link function, but using it with ng-click in the directive does not trigger it. For example: In an Angular directive called "card", I aim ...

Adjusting the value of 'let' based on the outcome

Can you assist me with this issue? I am attempting to assign a value to a let variable based on the following if conditional block. class Main extends React.Component{ render(){ let content = ''; firebase.auth().onAuthStateChanged(func ...

Delete empty value key pairs from JSON data using JavaScript

{ "top": [{ "language": "English", "value": "" }, { "language": "German", "value": "hASTA" }], "bottom": [{ "language" ...

ReactJs Unicode Integration with ID3 JS

I am working on a React Project that involves using an input type = "file" to upload music files. I am able to extract tags using ID3 Js, but the result is displayed in this format: https://i.stack.imgur.com/192co.png Is there a way to convert ...

When the enter key is pressed, scope.$watch() does not trigger, and location.path does not function as expected

I've encountered a peculiar problem with AngularJS that I need help with. Here's the situation: Using scope.watch to monitor text changes in a text field (searchloco). <input class="typeahead" ng-model="searchloco" data="{{varu}}" search-ba ...

When an array object is modified in Vue, it will automatically trigger the get method to validate any

One of the challenges I am facing is related to a button component that has a specific structure: <template> <button class="o-chip border-radius" :class="{ 'background-color-blue': theValue.isSelected, ...

Issue with displaying dates correctly when retrieving data from an external CSV using Highcharts (Highstock)

I have been struggling for several days to integrate Highstock with an external CSV file. Initially, the problem was that the imported data was sorted in "descending" order while Highcharts required it to be sorted in "ascending" order. After discovering a ...

JavaScript functioning properly in Google Chrome and Firefox but not in Internet Explorer 9

Welcome to the Lottery random generator tool! Feel free to use this in Google Chrome or Firefox, but please note that it may not work properly in Internet Explorer 9. If you encounter any issues while using this tool on IE9 and receive an error message st ...

What steps should I take to execute a task during input checkout?

Check out my code below: $(document).on('checkout', 'input', function(){ alert('input is not focused anymore'); }) <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <i ...

Condense categories

Hello there, I'm currently working on a table that contains different groups, and I am trying to figure out how to collapse categories within my table. Check out the Plunker here This is the HTML code snippet I am using: <table border=1> ...

Selenium javascript troubleshooting: encountering problems with splitting strings

Hello, I am new to using selenium and encountering an issue with splitting a string. <tr> <td>storeEval</td> <td>dList = '${StaffAdminEmail}'.split('@'); </td> <td>dsplit1 </td> < ...

Leveraging a variable within the ng-class directive in AngularJS

I am facing an issue with assigning a class "yellow" to 3 divs based on a specific value using the code ng-class="{item.color : item.value}. The class "yellow" is stored in a variable called item.color. My problem arises when I try to insert the class na ...

sending data from an AngularJS application to an MVC controller in JSON format containing multiple arrays

Currently, I am working on a project that involves using AngularJS and MVC. I am transferring data from an AngularJS controller to my MVC controller using $http.post(). At the moment, I am using a single object or JSON array to retrieve data as follows: pu ...

Using the Enter key to submit HTML forms

I created a custom console using HTML, CSS, and JavaScript. The input doesn't show up when I press enter, I have to click the send button. How can I make it send on enter press? Here is the code, please assist me: /* code goes below*/ <!DOCTY ...

I'm noticing that when I refresh the page, my inputs seem to disappear from the page, yet I can see that they are saved in the console's local

If anyone can help me with this issue I'm facing, I would greatly appreciate it. My aim is to retain values in the text box along with local storage even after refreshing the page. Here is an example of the code I am working with: Link to my web appl ...

Change the background color of a webpage by clicking with the help of Javascript

I've been experimenting with a script that changes the CSS background color on click, but I'm having trouble adding a third color option. Can anyone provide guidance on how to make the third color work? Check out my jsfiddle here: https://jsfid ...

What is the best way to retrieve the following database results after clicking a button with Node.js?

Currently, my Node.js setup is successfully connected to my webpage and pulling data from a MySQL database. I have managed to display the first row of data as button values in the HTML code below. However, what I now want is for the user to be able to cl ...