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>
Related
I am using bulma and vuejs, i want to have three bulma accordions. Namely, Accordion1 and Accordion2, Accordion3. I am able to make the three accordions simultaneously. But now i would like to display Accordion1 at first and have a Button inside it, which on click accordion1 should close and accordion2 should be displayed automatically, similarly for accordion2 i want to have a button inside , which onClick closes accordion2 and displays accordion3. I do not want to hide the preceding accordion. So that when the user reaches accordion3 , all the accordions are visible. how can i achieve this?
<BulmaAccordion>
<BulmaAccordionItem>
<h1 slot="title">Accordion1</h1>
<div slot="content">
<div class="field">
<button></button>
</div>
</div>
</BulmaAccordionItem>
</BulmaAccordion>
<BulmaAccordion>
<BulmaAccordionItem>
<h1 slot="title">Accordion2</h1>
<div slot="content">
<div class="field">
<button></button>
</div>
</div>
</BulmaAccordionItem>
</BulmaAccordion>
<BulmaAccordion>
<BulmaAccordionItem>
<h1 slot="title">Accordion3</h1>
<div slot="content">
<div class="field">
<button></button>
</div>
</div>
</BulmaAccordionItem>
</BulmaAccordion>
For Bulma + Vue, i would suggest Buefy with its Collapse with Accordion effect (doc link here). Basically you just need to use v-for loop for indexing, and trigger click event per button according index (e.g to open 2nd after click Btn1, make condition open to index 1 (starts from 0 in array), and open 0 and 1 indexes for Btn3 click)
Hope this helps.
i'm using templates for a netbanking app (project at university) and try to implement a delete button for the templates.
Each list element is a button itself and changes the view on clicking one list element. Inside i repeatedly constructed a delete button.
The problem is, that each time i click the delete button, the view changes as well - is there any simple ng-click for instance, that deactivates the ui-sref when the delete button is clicked?
<div ng-model="chosentemplate">
<a class="item item-thumbnail-left" ng-repeat="template in Templatelist" ng-model="choosetemplate" ui-sref="tab.transactions({params:template.iban})">
<img ng-src="img/{{template.image}}">
<h2><b>{{template.name}}</b></h2>
<p ><b>IBAN</b> {{template.iban}}</p>
<button ng-if="deletePress" ng-click="deleteTemplates($index)" ng-model="deletethistemplate" class="button button-small button-assertive">
Löschen
</button>
</a>
</div>
Thanks a lot!!
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
id of 1st modal is "modal1" and 2nd modal id is "modal2"
HTML code ->
1st Modal Call on Same Page
<div class="input-field col s12 m6 left-align">
<button class="btn waves-effect waves-light modal-trigger importButton" style="height:45px !important">Import Data
<i class="material-icons right">import_export</i>
</button>
</div>
2nd Modal Call on Same Page
<div class="modal-trigger" style="cursor: pointer;">
<img src="abc.png" alt="" class="circle">
</div>
JS Code ->
'click .modal-trigger': function(event) {
event.preventDefault();
$('#modal1').openModal();
},
'click .importButton':function(event) {
event.preventDefault();
$('#modal2').openModal();
}
You have to give refrence of another template {{>import}} (my template
name is import) in which my modal2 is defined.
Your question is not very clear. From what I understand, there are 2 modals that can be opened from the same template. The catch here is that bootstrap does not support multiple modals stacking up over each other.
Multiple open modals not supported Be sure not to open a modal while
another is still visible. Showing more than one modal at a time
requires custom code.
So, before the first modal is open, you must first always check if the other modal is in closed state, and similarly, before the second modal is open, you must check if the first modal is closed, if not then close it.
There is one package in meteor that appears to help handle multiple modals. you can check out peppelg:bootstrap-3-modal to get a better implementation of bootstrap modals in meteor. Specifically the part where they mention the use of below:
Modal.allowMultiple = true
First of all apologies for the terrible wording, I'm having trouble describing the issue.
Currently I have a series of buttons in a horizontal row, whereby clicking on a button shows it's associated content underneath, and clicking on a different button collapses the current content and shows the new content (using the 'data-parent' attribute). I want it to function so that for example, if button 3 is clicked and it's content shown, and the user then clicks on button 3 again, instead of the content collapsing I would like it to remain on screen. The way it works currently is that if button 3's content is shown and button 3 is clicked again, the element collapses and we're just left with a row of buttons again. I've experimented with the '.collapse("show")' method but I'm having difficulty implementing it (not even sure if it's possible to work with this method). Here is the associated code:
<div class ="container" id="content">
<button class="btn btn-info" data-toggle="collapse" data-target="#0" data-parent="#content">0</button>
<button class="btn btn-info1" data-toggle="collapse" data-target="#1" data-parent="#content">1</button>
<button class="btn btn-info2" data-toggle="collapse" data-target="#2" data-parent="#content">2</button>
<button class="btn btn-info3" data-toggle="collapse" data-target="#3" data-parent="#content">3</button>
<div class="panel">
<div id="0" class="collapse in">
Button 0's content
</div>
<div id="1" class="collapse">
Button 1's content
</div>
<div id="2" class="collapse">
Button 2's content
</div>
<div id="3" class="collapse">
Button 3's content
</div>
</div>
</div>
Any help would be greatly appreciated.
Dont know if this solution will satisfy you but you can block this like that
for example
$('.btn').click(function(e) {
target = $(this).data('target');
if($(target).is(':visible')){
return false;
}
});
In this situation if you click on "button1" it will collapse the correct div and if you click this again nothing will happen. However clicking another button will collapse another div.