I'm using ui.bootstrap accordion in an angular app to show show content to the user that I get with an ajax request from a server. I use long polling to fetch the data so they are refreshed automatically. However when an accordion from the group is open and the user reads the content, upon refresh accordion closes. How can I prevent this from happening? One idea is to be able to tell if any accordion is collapsed and stop the polling but I don't know how. I have read some articles with people taking advantage of is-open setting but I can't figure it out. Here is my code for the current accordion group.
<uib-accordion close-others="true">
<uib-accordion-group ng-repeat="message in newMessages">
<uib-accordion-heading>
<div class="row">
<div class="col-md-5">
title: {{message.attributes.subject}}
</div>
</div>
</uib-accordion-heading>
<div class="col-sm-12">
<div class="row">
<div class="col-sm-12">
{{message.attributes.body}}
</div>
</div>
</div>
</uib-accordion-group>
Related
I have a website that i am trying to personalize and I am trying to use the AnimatedModal.js framework. I have been able to display some content in one modal, but when it comes to make several modal it gets tricky, because there is just one ID. My question i, how can i use the same ID and change the content for other modals(demo03,demo04..etc.), in order to personalize each.
I will put some code in order to understand the problem
I have been reading the documentation but I am still stuck in this problem.
<!-- single work -->
<div class="col-md-4 col-sm-6 ads graphics">
<a id="demo02" href="#animatedModal" class="portfolio_item">
<img src="img/portfolio/03.jpg" alt="image" class="img-responsive" />
<div class="portfolio_item_hover">
<div class="portfolio-border clearfix">
<div class="item_info">
<span>Should open here </span> <em> ads / Graphics </em>
</div>
</div>
</div>
</a>
</div>
<!-- end single work -->
Then I have the demo where it displays the content of the modal, where it has the #animatedmodal ID
<div id="animatedModal" class="popup-modal ">
<!--THIS IS IMPORTANT! to close the modal, the class name has to match the name given on the ID -->
<div id="btn-close-modal" class="close-animatedModal close-popup-modal">
<i class="ion-close-round"></i>
</div>
<div class="clearfix"></div>
<div class="modal-content ">
<div class="container">
<div class="portfolio-padding" >
Hello World
</a>
</div>
</div>
</div>
</div>
this is my Js file where there is just one element assigned to it, to avoid showing the same content into all different classes.
$("#demo02").animatedModal();
I don't think it can be done without hacking the plugin.
As a matter of fact, the script jQuery.animatedModal ALWAYS TARGETS the page element which has id="animatedModal"
You can see the plugin source code here:
https://cdn.jsdelivr.net/npm/animatedmodal#1.0.0/animatedModal.js
...
//Defaults
var settings = $.extend({
modalTarget:'animatedModal',
...
Here is the AnimatedModal reference:
https://joaopereirawd.github.io/animatedModal.js/
At the bottom of the page, I can't see any OPTION regarding how to specify a different target, all options are about styles and animation features.
At this point, I think the only way to allow multiple modals on the same page is to rewrite the plugin, but I'm pretty sure you don't want to choose this way.
In my angular app, I have objects that I'm getting from a REST API that I'm making into columns in a grid, sort of like an image gallery type thing.
Example:
The intent was for the entire grey area to be clickable, which opens a Details View modal. Then when you hit the Delete button, it opens a Delete Item modal. Both modals are opened with angular's ng-click.
However, since they are both in the same container (the grey, clickable one), whenever I click the Delete button, it opens up both modals instead of just the Delete Item one.
Is there any way to fix that, ala forcing the button to be in the 'front', such that clicking it will only open the correct modal?
Thanks!
Edit: The html looks something like this -
<div class="row">
<div ng-repeat="item in items" class="col-lg-3 col-md-6 col-xs-12">
<div class="item-container" ng-click="openDetailModal(item)">
<!--stuff-->
<button class="btn btn-danger pull-right" ng-click="openDeleteItemModal(item) />
</div>
</div>
</div>
I am currently working on a pdf viewer page with angularjs (although the same problem would probably occur with angular or react).
The document itself is embeded with the pdf-box in an iframe. The problem is that when switching from one layout type to another all the documents are getting downloaded again, causing unneccessary requests and bad UX. Using ng-show instead of ng-if causes some documents to be downloaded multiple times.
Here a small piece of how the component is structured:
<div class="doc-container">
<div class="container-fluid" ng-if="model.currentLayout.Label == '1'">
<div class="row">
<div class="col-lg-12 col-md-12">
<pdf-box doc="model.slots[0].doc"></pdf-box>
</div>
</div>
</div>
<div class="container-fluid" ng-if="model.currentLayout.Label == '1x2'">
<div class="row">
<div class="col-lg-6 col-md-6">
<pdf-box doc="model.slots[0].doc"></pdf-box>
</div>
<div class="col-lg-6 col-md-6">
<pdf-box doc="model.slots[1].doc"></pdf-box>
</div>
</div>
</div>
</div>
Some ideas that I have:
Try with ng-include or $templateCache, just for the iframe internally, not sure if it would work though.
Use pdf.js and cache the documents as base64 strings. That would prevent the additional http requests but would still cause the previously opened documents to be "restarted" to page 0, causing again a bad UX.
It seems to me that there might be a much easier solution in front of my eyes.
Is there a way to force the browser to "reuse" an existing iframe src after DOM manipulation?
I've found a number of similar questions but cannot seem to get their solutions to work for me so hopefully posting the specific code will help.
I use Caspio datapages deployed on html pages. On an html page I have a full 12 column div that I need to change to a 9 column div when a link is clicked on. This is because I have a collapsed 3 column div that is opened when the link is clicked.
So what i need:
1) upon page load 3 column div collapsed, 12 column div visible.
2)user clicks link and 3 column div is visible and 12 column div changes
to 9 column div so it is moved to the right of the 3 column div
instead of below it.
The Caspio datapages can get messed up if the css is intense (is random when it happens so I can't describe it in detail) so I need to keep it as simple as possible. If I could change div class="col-md-12" to div class="col-md-9" on the link click that would be great. I've seen other posts with changing column classes but I cannot seem to get them to work.
Here's the main code I'm working with:
<div class="col-md-3" style="overflow-x:hidden;overflow=y:hidden;">
<div id="newcomment" class="collapse">
<caspio deploy code for datapage1>
</div>
</div>
<div class="col-md-12">
<div>
<caspio deploy code for datapage2>
</div>
</div>
<a class="btn page-action" href="#newcomment" style="color:green;" data-toggle="collapse"><i class="fa fa-plus" aria-hidden="true"></i> Add Comment</a>
So if I can change div class="col-md-12" to div class="col-md-9" upon the #newcomment link click that should probably do it. Many thanks in advance-
There are several ways you can do this. Here is one...
$('#btnSwitch').click(function(){
$('.col-md-3').toggleClass('hide');
$('#right').toggleClass('col-md-12 col-md-9');
})
HTML
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
page1
</div>
<div class="col-md-9" id="right">
page2
</div>
</div>
<br>
<button class="btn btn-lg" id="btnSwitch">Switch</button>
</div>
http://www.codeply.com/go/pFNLZqoZUV
I am making an application using AngularJS and want to be able to switch between "tabs" and swap back and forth different "partials" or html templates into a panel/container (using ngInclude).
Here's my template, which is wrapped inside a ngView.
<div class="row">
<div class="col-md-3">
<div class="list-group" data-fixed-sidebar data-nav-control>
<a href="#/analyze/option1" class="list-group-item" data-tab-route="/analyze/option1.*" >Analyze Option 1</a>
Analyze Option 2
Analyze Option 3
Analyze Option 4
</div>
</div>
<div class="col-md-9">
<div class="panel panel-default">
<div class="panel-body">
<div ng-include="child"></div>
</div>
</div>
</div>
</div>
The problem is, when I click on one of the links (for example, the first link which routes to #/analyze/option1) it will reload my controller and lose track of it's current state. I am using $route and $routeProvider and would prefer a solution that keeps using this module.
Controllers are meant to be ephemeral. The correct way (TM), in my opinion, to do it would be to put the necessary state in an service, which is initialized in a singleton fashion and will retain state between route changes.