Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ui.bootstrap modal loading html but not showing anything

Its loading opening modal and also loading template specified. But not showing anything.

Check out the demo here : http://demo.hupp.in/food-admin

Go to [Products] and Search EnegiKcal >= 3500. Then click on manage. It will open pop up but template content is not loaded.

Also one other thing I noticed is that it returns HTTP 304 for template sometimes.

This is how I open modal :

/** Open Modal For add edit tags */
$scope.open = function (productId) {

    var modalInstance = $modal.open({
        templateUrl: 'views/some.html',
        controller: tagsModalInstanceCtrl,
        size: 'lg'
    });

    modalInstance.result.then(function (msg) {

    }, function () {
        // $log.info('Modal dismissed at: ' + new Date());
    });

};  

var tagsModalInstanceCtrl = function ($scope, $modalInstance) {

    $scope.ok = function () {
        $modalInstance.close("hi");
    };

    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
    };
};

Here is template code :

<div class="modal-header">
   <h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
   <h3>Well, Hello there!</h3>
</div>
<div class="modal-footer">
    <button class="btn btn-primary" ng-click="ok()">OK</button>
    <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>

enter image description here

enter image description here

like image 380
Shreejibawa Avatar asked Sep 20 '14 19:09

Shreejibawa


People also ask

How do I make Bootstrap modal visible?

Answer: Use the modal('show') Method You can simply use the modal('show') method to show or open the modal window in Bootstrap using jQuery. Other related Bootstrap's modal methods are modal('hide') and modal('toggle') .

How do I show modal pop on page load?

Answer: Use the Bootstrap . modal('show') method modal('show') method for launching the modal window automatically when page load without clicking anything. A common example of this technique is loading the modal when user landed on the home page and requesting them to subscribe the website newsletter.

Can I use modal without Bootstrap?

You can implement it by using any other library for example Bulma , by using another framework that uses jquery, for example jqueryui, by using any other javascript library that could implement a modal, or by implementing it using javascript, or even with only css and html.


1 Answers

Ok, it is pretty strange but it seems that your template is based on the master branch of https://github.com/angular-ui/bootstrap/blob/master/template/modal/window.html

and your sources on the tag 0.11.

https://github.com/angular-ui/bootstrap/blob/0.11.0/src/modal/modal.js

It is visible when you type $('.modal-content') in the console, you will see that it needs a modal-transclude directive, but in the sources there is no trace of this directive. Because, on 0.11 it directly uses the ng-transclude directive which is part of angular.

So, your code is correct, but the lib is not, try retrieving a correct version of it (maybe the last build of their repo is broken)

like image 71
IxDay Avatar answered Sep 21 '22 07:09

IxDay