I have a simple meteor app that displays batches and when I click on the batch, it will list the individual documents. There are individual log button assigned to these batches listing that is supposed to pull a modal which displays the technical log listing of documents belonging to corresponding batches. However, the helper function loads all the log helper while navigating to batch listing page on page load and not on click, and all log buttons brings information of first batch only.
Here are my helpers:
Template.log.helpers
batchTransactions: (_id) ->
transactions = C.Transactions.find {batchId:_id}, sort: createdAt: -1
transactions
My log template:
<template name="log">
<!-- Button trigger modal -->
<a data-toggle="modal" data-target="#log" class="pointer font-small">
View Log
</a>
<!-- Modal -->
<div class="modal fade" id="log" tabindex="-1" role="dialog" aria-labelledby="Log">
<div id="batch-summary" class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title text-center" id="myModalLabel">Batch Summary</h4>
</div>
<div class="modal-body">
{{#each batchTransactions _id}}
<li> {{log}} </li>
{{/each}}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</template>
This log template is nested inside batchlisting template:
<template name="home">
<div class="container">
<div class="row">
{{#each batchList}}
{{> log}}
{{/each}}
</div>
</div>
</template>
Helper for batchlist:
Template.home.helpers
batchList: ->
batches = C.Batches.find {}, sort: createdAt: -1
batches
Can you help me out here?
Related
I am new to using Vue3 (composition API) with bootstrap 5 and came across a problem:
When I render a list, and pass each element as a prop as so:
<div :key="item.id" v-for="item in items">
<EditItem :item="item"/>
</div>
I can modify the props values just fine inside of EditItem.vue (the props are JSON objects), but when I am inside a modal I can only modify the values for the 1st index. My code looks something like this:
<script setup>
defineProps({
item: {
type: Object,
required: true
},
})
</script>
<template>
<!-- Let's me edit all items in list just fine -->
<input type='text' v-model="item.name">
<div> {{item.name}} </div>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Edit Item
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="mb-3">
<!-- Will only let me edit the first indexed list item -->
<label for="name" class="form-label">Item name</label>
<input type='text' class="form-control" id="name" placeholder="John Doe" v-model="item.name">
<div> {{ item.name }} </div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</template>
I think this happens due to the modal being treated as a different document/context so vue3 re-renders everything, so the indexing restarts from 1. I am not sure how to fix this issue, any help is appreciated. Thanks
Edit:
My problem is similar to the issue described in this question: How to show fresh bootstrap modal data when using Vue.js
However, it hasn't been answered properly and is from 2018
Edit 2:
Solved:
It was a simple fix, simply take the modal out of the v-for loop. Only have the button inside the loop. And yes, I realize you cannot edit the values of a prop inside of a child component. I simplified the code, as the code with the form I have is quite long due to the many fields in my JSON objects.
Props are readonly. To be able to edit array, you need to emit delete function where you have this array. Your "Lets me edit all items" not working too. It just edits a local variable, not an array.
This is how you make reusable form:
form.vue
<template>
<form #submit.prevent="$emit('onSubmit', data)">
<input type="text" v-model="data.name" />
<button type="submit">Save</button>
</form>
</template>
<script setup>
const props = defineProps({ item: { type: Object, required: true }})
const data = reactive(props.item)
defineEmits(['onSubmit'])
</script>
parent.vue
<template>
<form :item="item" #on-submit="editItem"></form>
</template>
<script setup>
function editItem(data) {
// Edit array here.
}
</stript>
I have a problem: I pass a collection to a view. Then I iterate through it and display some data. In normal markup, it works, but in modal it doesn't. Please tell me why modal code does not show the data.
Here is the view:
#model IEnumerable<Models.ToDO>
#foreach (var item in Model)
{
#if (item.isDone == true)
{
<div class="done-element element">
<p>
Title: #Html.DisplayFor(modelItem => item.Title)
</p>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>
Description: #Html.DisplayFor(modelItem => item.Desc)
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
}
}
EDIT: I found some strange things: all modals display this value, but all take it from the first element
EDIT2: I found the solution. Target data is ID and take first found element. Changing ID to variable fix problem.
I am trying to show a chart inside of a modal.
I am using Meteor with the maazalik:highcharts package. Initially, when the modal appears the chart is outside of the modal. As soon as I resize the window, the chart appears correctly inside the modal.
A button click event triggers:
$('#accountsDetailsModal').modal('show');
My modal sits in a template:
<template name="AccountsGraph">
<div id="accountsDetailsModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close on-close" data-dismiss="modal">×</button>
<h4 class="modal-title">Accounts Details</h4>
</div>
<div class="modal-body">
<div id="container" style="width:100%;margin: 0 auto">
{{> highchartsHelper chartId="accountsDetails" chartWidth="100%" charHeight="100%" chartObject=accountsGraph}}
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-default on-close" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</template>
EDIT: I replaced my click event handler and it worked.
$('#accountsDetailsModal').modal('show');
setTimeout(function(){
console.log("reflow");
$("#accountsDetails").highcharts().reflow();
},200);
add to your config object:
func: function(chart) {
setTimeout(function() {
chart.reflow();
}, 0);
}
My knowledge in ASP.NET is very limited, yet, I am building a UI/UX design for an application that will be built in ASP MVC and I've heard rumors of the following problem:
When a Boostrap modal fires a button event (onClick), it creates a postback which in turn, it refreshes the page, thus making it impossible for multiple bootstrap modals to work. Unless the modals do not require to interact with the back end, which means they would simply serve a client-side purpose.
I need to know how much of this is true and if there is a way to create a search or populate a bootstrap modal with information being entered in a second modal.
Unfortunately, I can't produce a working ASP code but I will produce the HTML portion of it so you have an idea.
Again, my question is, can I populate modal 1 with information entered in modal 2? Modal 2 is invoked from Modal 1. See the code and Demo for details
<div class="container">
<h1>Working with Multiple Modals</h1>
<div class="margin-lg">
<button type="button" class="btn-first-modal btn btn-primary btn-lg" data-toggle="modal" data-target="#first-modal">
Launch Modal
</button>
</div>
<div class="modal" id="first-modal" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">First Modal</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-12 col-sm-4">
<label class="label-control">My ID</label>
<input type="text" class="form-control" disabled/>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn-second-modal within-first-modal btn btn-primary">
Add ID
</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal" id="second-modal" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn-second-modal-close close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">ID Generator</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-12 col-sm-4">
<label class="label-control">Choose ID</label>
<input type="text" class="form-control" />
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn-second-modal-close btn btn-primary">Add</button>
</div>
</div>
</div>
</div>
JS
var within_first_modal = false;
$('.btn-second-modal').on('click', function() {
if ($(this).hasClass('within-first-modal')) {
within_first_modal = true;
$('#first-modal').modal('hide');
}
$('#second-modal').modal('show');
});
$('.btn-second-modal-close').on('click', function() {
$('#second-modal').modal('hide');
if (within_first_modal) {
$('#first-modal').modal('show');
within_first_modal = false;
}
});
$('.btn-toggle-fade').on('click', function() {
if ($('.modal').hasClass('fade')) {
$('.modal').removeClass('fade');
$(this).removeClass('btn-success');
} else {
$('.modal').addClass('fade');
$(this).addClass('btn-success');
}
});
DEMO
This would let you make a request to the server and do something with the information that you get back.
$(".btn-second-modal").on("click", function () {
$.ajax({
url: "/urltoserver/action/",
cache: false
}).done(function (data) {
// SET YOUR FIRST MODAL PROPERTIES
// HIDE YOUR SECOND MODAL
// SHOW YOUR FIRST MODAL
});
});
I'm having trouble with displaying the modal for the specific image clicked on to view.
If i use a link with a class it will show all of the images in that album in seperate modals (have to close them all down). I want to show the appropriate modal for the image that I click "view" on so that it is corresponding.
If i set this to id and create an id in the top div it will display the first image in the album only, no matter what image i click on.
How could I solve this?
<a class="btn btn-link" href=".modal" data-toggle="modal"><i class="icon-fullscreen"></i> View</a>
<!--POP OVER OF IMAGE-->
<div class="modal hide fade" tabindex="-1">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 id="myModalLabel">Pansnap</h3>
</div>
<div class="modal-body">
<!--This is for the 360 viewer-->
<?php echo '<img src="uploads/', $image["album"], '/', $image["id"], '.', $image["ext"],'"/>'?>
<!--360 viewer end-->
</div>
<div class="modal-footer">
<?php echo '<a class="btn btn-link" href="uploads/', $image["album"], '/', $image["id"], '.', $image["ext"],'">Download</a>'?>
</div>
</div>
One way to approach this is to store the various unique data components on each of the links and then have a generic handler which will load that data into the relevant elements of a single modal.
For instance, something along the lines of:
HTML
<a class="btn btn-link" href="#imageModal" data-toggle="modal" data-image="uploads/album/01.jpg" data-download="uploads/album/01.jpg"><i class="icon-fullscreen"></i> View</a>
<a class="btn btn-link" href="#imageModal" data-toggle="modal" data-image="uploads/album/02.jpg" data-download="uploads/album/02.jpg"><i class="icon-fullscreen"></i> View</a>
<!--POP OVER OF IMAGE-->
<div id="imageModal" class="modal hide fade" tabindex="-1">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 id="myModalLabel">Pansnap</h3>
</div>
<div class="modal-body">
<img id="snap"/>
</div>
<div class="modal-footer">
<a id="download" class="btn btn-link">Download</a>
</div>
</div>
Where you could load each image's data into the data attributes via PHP.
JS
$(document).on('click.modal.image-data', '[href=#imageModal]', function () {
$('#snap').attr('src',$(this).data('image'))
$('#download').attr('href', $(this).data('download'))
})
This will load the appropriate data in the modal elements.
JSFiddle