ui.bootstrap modal loading html but not showing anything

Question

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

2 things: 1. show us more context (how you open the modal etc.) 2. try to reproduce it in a plnkr or similar. — artur grzesiak
– artur grzesiak, Commented Sep 23, 2014 at 19:33

IxDay · Accepted Answer · 2014-09-25 15:09:45Z

5

+50

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)

edited Sep 25, 2014 at 15:09

answered Sep 25, 2014 at 14:46

IxDay

3,7072 gold badges25 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

zszep Over a year ago

Exactly what I had as a problem and what I stated in the comment of my answer. Upgrading to to bootstrap css v3.1.1 and ui-bootstrap-tpls-0.11.0.js solved the problem, but Shreejibawa says it did not help him.

Shreejibawa Over a year ago

I already had tried upgrading..what IxDay said might seems to be correct. Let me try that also. Letting you know as soon as possible.

m.e.conroy Over a year ago

I've had this experience with multiple version of Angular-UI-Bootstrap all the way back to version 0.5. The only sure way I found so that it doesn't appear again is to hack it in CSS.

zszep · Accepted Answer · 2014-09-23 18:50:24Z

4

As a matter of fact, I did have a similar problem when switching to angularjs v1.2. The formerly working dialog didn't show, just like yours. Had to change the structure to look something like this to make it visible again:

<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <div class="row">
                <div class="col-lg-9">
                    <h3>{{header}}</h3>
                </div>
            </div>
        </div>
        <div class="modal-body">
            <form name = "kontoForm" szp-focus="sifra">
                <!-- Šifra -->
                <szp-input id="sifra" text="Šifra" place-holder="šifra" value="konto.sifra" required="!konto.sifra"></szp-input>
                <!-- Naziv -->
                <szp-input id="naziv" text="Naziv" place-holder="naziv" value="konto.naziv" required="!konto.naziv"></szp-input>
            </form>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" ng-hide="!kontoForm.$valid || (mode == 'edit')" ng-click="okContinue()">OK i nastavi</button>
            <button class="btn btn-primary" ng-hide="!kontoForm.$valid" ng-click="ok()">OK i zatvori</button>
            <button class="btn btn-warning" ng-click="cancel()">Odustani</button>
        </div>
    </div>
</div>

I had to wrap everythin in a div with a modal-content class to make it work.

answered Sep 23, 2014 at 18:50

zszep

4,4835 gold badges41 silver badges58 bronze badges

4 Comments

zszep Over a year ago

Another thing I had to do was to change to bootstrap css v3.1.1 and ui-bootstrap-tpls-0.11.0.js. Try this. It resolved my problem.

zszep Over a year ago

If your are getting http 304 (not changed) then your html is being loaded from cache (always getting the html file from cache and the changes are not reflected). Try to add some background to your html to see if the change is reflected. To force a reload in chrome open chrome developer (F12 function key) and press shift refresh the page.

DeadCalimero Over a year ago

Try to empty your browser cache.

Scott Carlson Over a year ago

This fixed my issue. Thanks

RootHacker · Accepted Answer · 2014-09-25 13:24:06Z

-1

enter image description here include .map files for jquery and angular in your /js folder .may be that will help

answered Sep 25, 2014 at 13:24

RootHacker

1,1078 silver badges12 bronze badges

Comments

m.e.conroy · Accepted Answer · 2014-09-25 14:18:02Z

-1

I have experienced this off and on for some reason as well.

I solved it by adding a CSS statement, after doing an inspection via Chrome's tools I found that for some reason the modal display was still set to hidden.

.modal {
    display: block;
}

answered Sep 25, 2014 at 14:18

m.e.conroy

3,53828 silver badges28 bronze badges

Comments

julioVG · Accepted Answer · 2015-03-11 15:39:36Z

-1

Take a look this link.

vm_main.showModal = {
        mostrarErrores : false,
        showModal : function(jsonError) {
            var options={
                tituloModal: jsonError.titleModal,
                textoPrincipal: jsonError.mainMessage,
                textoBtnAceptar: "Aceptar",
                accionBtnAceptar: "vm_popup.cerrarPopup()",
            };
            commonPopUpService.getDisclaimerGeneric($scope, 'commonPopUpController', options);
        }
    };

http://plnkr.co/edit/EYDEG5WSmNwxQflsB21T?p=preview

I think will help you on how load a simple dinamic html as a modal.

Regards

answered Mar 11, 2015 at 15:39

julioVG

911 silver badge12 bronze badges

Collectives™ on Stack Overflow

ui.bootstrap modal loading html but not showing anything

5 Answers 5

3 Comments

4 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related