We Keep Coding

.map returning first value in array

world... again.
I'm stumped by something that should be straightforward, but right now I cant see it. I'm trying to map over a simple array and display values. Each card should have a button that opens a bs modal which should show more information on the particular array object. but instead it returns infomation only on the first object in the array.
I think there's a concept here that I'm not getting and it's a shade embarassing. Thaank's in advance for your help.
import "./styles.css";
export default function App() {
const modalInfo = [
{ name: "james", number: "1" },
{ name: "Jackie", number: "2" },
{ name: "Ariane", number: "3" },
{ name: "Mike", number: "4" }
];
return (
<>
<div className="App">
{modalInfo.map((info) => (
<div className="card">
<h1>{info.name}</h1>
<button
type="button"
class="btn btn-primary"
data-bs-toggle="modal"
data-bs-target="#staticBackdrop"
>
Show more
</button>
<div
class="modal fade"
id="staticBackdrop"
data-bs-backdrop="static"
data-bs-keyboard="false"
tabindex="-1"
aria-labelledby="staticBackdropLabel"
aria-hidden="true"
>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">
#{info.number}
</h5>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body">{info.name}</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">
Understood
</button>
</div>
</div>
</div>
</div>
</div>
))}
</div>
</>
);
}
This is the current error in console , I copied the code from sandbox and plugged it into another project with bootstrap:
Uncaught TypeError: 'querySelector' called on an object that does not
implement interface Element. findOne selector-engine.js:24
_showElement modal.js:217 show modal.js:143 y index.js:251 show backdrop.js:54 y index.js:251 r index.js:273 selector-engine.js:24:43

You must be getting some unique key error in your console.
Give a key to you card that acts a a unique id for your card.
<....
{modalInfo.map((info, index) => (
<div className="card" key={info.index}>
...>
You can give index as well as a unique id but that not correct way just for testing you can. But from what I see is the number property is incrementing by 1 as well so that's why I have kept index as the key.

id attributes must be unique in a document. You are re-using staticBackdrop in each map iteration so they're being duplicated.
When Bootstrap tries to grab the modal target by #staticBackdrop, it only gets the first one because that's what happens with repeated IDs.
Using the info.id properties from your sandbox link, try incorporating that into the id and data-bs-target attributes
{modalInfo.map((info) => (
<div className="card" key={info.id}> {/* keys are important, don't use index */}
<h1>{info.name}</h1>
<button
type="button"
className="btn btn-primary"
data-bs-toggle="modal"
data-bs-target={`#staticBackdrop_${info.id}`}
>
Show more
</button>
<div
className="modal fade"
id={`staticBackdrop_${info.id}`}
data-bs-backdrop="static"
data-bs-keyboard="false"
tabIndex="-1"
aria-labelledby={`staticBackdropLabel_${info.id}`}
aria-hidden="true"
>
{/* the rest of your markup goes here */}
</div>
</div>
))}
You also have a bunch of class attributes that should be className and a repeated id="staticBackdropLabel" that should get a similar treatment to staticBackdrop.

Make sure that this property is reactive, either in the data option, or for class

I am getting the error "Make sure that this property is reactive, either in the data option, or for class" in vuejs.
I created a laravel application and wanted to make the user management work in real-time so I deplyed vuejs with the root template being Users.vue. Additionally I created a separate component called AddUserModal for the modal popup and used it in the root template as The popup displays correctly and rendered well in the browser. The problem started when I tried to do model binding and for that, am using vform for the server side validation. After declaring the data in Users.vue(root) I proceeded to AddUserModal to set up my form with v-model but this throws back an error. The code is below
This is the script from Users.vue
<script>
export default {
data() {
return {
form : new Form({
name : '',
email : '',
role : '',
description : '',
password : ''
})
}
},
mounted() {
console.log('Component mounted.')
}
}
AddUserModal
<div class="container">
<div class="modal fade" id="addUserModal" tabindex="-1" role="dialog" aria-labelledby="addUserModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<form>
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="addUserModalLabel">Add User</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<input v-model="form.name" type="text" name="name"
class="form-control" :class="{ 'is-invalid': form.errors.has('name') }">
<has-error :form="form" field="name"></has-error>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-sm btn-danger" data-dismiss="modal"><i class="fas fa-times-circle"></i></button>
<button type="button" class="btn btn-sm btn-success"><i class="fas fa-save"></i></button>
</div>
</div>
</form>
</div>
</div>
</div>
app.js
require('./bootstrap');
//vue
vue
window.Vue = require('vue');
//imports
import VueRouter from 'vue-router'
import { Form, HasError, AlertError } from 'vform'
//vue Router
vue router
Vue.use(VueRouter)
//Vform
window.Form = Form
Vue.component(HasError.name, HasError)
Vue.component(AlertError.name, AlertError)
let routes = [
{ path: '/users', component: require('./components/Users.vue')}
]
const router = new VueRouter({
mode: 'history',
routes
})
Vue.component('example-component', require('./components/AddUserModal.vue'));
const app = new Vue({
el: '#app',
router
});
When I placed the scripts in AddUserModal, the model binding works fine but throws up an error when placed in the Users.vue
This is the browser console output
app.js:37116 [Vue warn]: Property or method "form" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

How to get the id and name of an object on button click and display them in a modal in asp.net view

I have a strongly typed view in which I am looping over some objects from a database and dispaying them in a jumbobox with two buttons in it. When I click one of the buttons I have a modal popping up. I'd like to have somewhere in this modal the name and the id of the corresponding object, but I do not really know how to do this. I am a bit confused where to use c# and where javascript. I am a novice in this, obviously.
Can someone help?
This is the code I have so far. I don't have anything in relation to my question, except the code for the modal :
#model IEnumerable<eksp.Models.WorkRole>
#{
ViewBag.Title = "DisplayListOfRolesUser";
}
<div class="alert alert-warning alert-dismissable">You have exceeded the number of roles you can be focused on. You can 'de-focus' a role on this link.</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var dataJSON;
$(".alert").hide();
//make the script run cuntinuosuly
$.ajax({
type: "POST",
url: '#Url.Action("checkNumRoles", "WorkRoles")',
dataType: "json",
success: successFunc,
error: errorFunc
});
function successFunc(data, status) {
if (data == false) {
$(".alert").show();
$('.btn').addClass('disabled');
//$(".btn").prop('disabled', true);
}
}
function errorFunc() {
alert('error');
}
});
</script>
#foreach (var item in Model)
{
<div class="jumbotron">
<h1>#Html.DisplayFor(modelItem => item.RoleName)</h1>
<p class="lead">#Html.DisplayFor(modelItem => item.RoleDescription)</p>
<p> #Html.ActionLink("Focus on this one!", "addWorkRoleUser", new { id = item.WorkRoleId }, new { #class = "btn btn-primary btn-lg" })</p>
<p> <button type="button" class="btn btn-default btn-lg" data-toggle="modal" data-target="#myModal">Had role in the past</button> </p>
</div>
}
<!-- Modal -->
<div id="myModal" class="modal fade" 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">#Html.DisplayFor(modelItem => item.RoleName)//doesn't work</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Save</button>
</div>
</div>
</div>
</div>

I think your confusing the server side rendering of Razor and the client side rendering of the Modal. The modal cannot access your Model properties as these are rendered server side before providing the page to the user. This is why in your code <h4 class="modal-title">#Html.DisplayFor(modelItem => item.RoleName)//doesn't work</h4> this does not work.
What you want to do is capture the event client side in the browser. Bootstrap allows you to achieve this by allowing you to hook into events of the Modal. What you want to do is hook into the "show" event and in that event capture the data you want from your page and supply that to the Modal. In the "show" event, you have access to the relatedTarget - which is the button that called the modal.
I would go one step further and make things easier by adding what data you need to the button itself as data-xxxx attributes or to DOM elements that can be easily access via JQuery. I have created a sample for you based on what you have shown to give you an idea of how it can be achieved.
Bootply Sample
And if needed... How to specify data attributes in razor

First of all
you will need to remove the data-toggle="modal" and data-target="#myModal" from the button, as we will call it manually from JS and add a class to reference this button later, your final button will be this:
<button type="button" class="btn btn-default btn-lg modal-opener">Had role in the past</button>
Then
In your jumbotron loop, we need to catch the values you want to show later on your modal, we don't want to show it, so we go with hidden inputs:
<input type="hidden" name="ID_OF_MODEL" value="#item.WorkRoleId" />
<input type="hidden" name="NAME_OF_MODEL" value="#item.RoleName" />
For each information you want to show, you create an input referencing the current loop values.
Now you finally show the modal
Your document.ready function will have this new function:
$('.modal-opener').on('click', function(){
var parent = $(this).closest('.jumbotron');
var name = parent.find('input[name="NAME_OF_MODEL"]').val();
var id = parent.find('input[name="ID_OF_MODEL"]').val();
var titleLocation = $('#myModal').find('.modal-title');
titleLocation.text(name);
// for each information you'll have to do like above...
$('#myModal').modal('show');
});
It simply grab those values we placed in hidden inputs.
Your final code
#model IEnumerable<eksp.Models.WorkRole>
#{
ViewBag.Title = "DisplayListOfRolesUser";
}
<div class="alert alert-warning alert-dismissable">You have exceeded the number of roles you can be focused on. You can 'de-focus' a role on this link.</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var dataJSON;
$(".alert").hide();
//make the script run cuntinuosuly
$.ajax({
type: "POST",
url: '#Url.Action("checkNumRoles", "WorkRoles")',
dataType: "json",
success: successFunc,
error: errorFunc
});
function successFunc(data, status) {
if (data == false) {
$(".alert").show();
$('.btn').addClass('disabled');
//$(".btn").prop('disabled', true);
}
}
function errorFunc() {
alert('error');
}
$('.modal-opener').on('click', function(){
var parent = $(this).closest('.jumbotron');
var name = parent.find('input[name="NAME_OF_MODEL"]').val();
var id = parent.find('input[name="ID_OF_MODEL"]').val();
var titleLocation = $('#myModal').find('.modal-title');
titleLocation.text(name);
// for each information you'll have to do like above...
$('#myModal').modal('show');
});
});
</script>
#foreach (var item in Model)
{
<div class="jumbotron">
<input type="hidden" name="ID_OF_MODEL" value="#item.WorkRoleId" />
<input type="hidden" name="NAME_OF_MODEL" value="#item.RoleName" />
<h1>#Html.DisplayFor(modelItem => item.RoleName)</h1>
<p class="lead">#Html.DisplayFor(modelItem => item.RoleDescription)</p>
<p> #Html.ActionLink("Focus on this one!", "addWorkRoleUser", new { id = item.WorkRoleId }, new { #class = "btn btn-primary btn-lg" })</p>
<p> <button type="button" class="btn btn-default btn-lg" data-toggle="modal" data-target="#myModal">Had role in the past</button> </p>
</div>
}
<!-- Modal -->
<div id="myModal" class="modal fade" 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">#Html.DisplayFor(modelItem => item.RoleName)//doesn't work</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Save</button>
</div>
</div>
</div>

I want to show ModalDialogbox to clients when Clients click on resetlink

I am doing resetpassword system in Meteor,I want to show ModalDialogbox to clients when Clients click on resetlink but couldn't do it.
account.html
this is my ResetPasswordform and Modal
<template name="ResetPassword">
{{#if resetPassword}}
<div class="modal fade" id="myModal-9" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<span class="f-s-20 text-blue">ŞİFRE DEĞİŞTİRME EKRANI </span>
</div>
<div class="modal-body">
<form action="/reset-password" id="resetPasswordForm" method="post">
<div class="form-group">
<input id="resetPasswordPassword" type="password" name="newpassword" class="form-control width-250 m-auto" placeholder="Yeni Şifrenizi Girin">
</div>
<div class="form-group">
<input id="resetPasswordPasswordConfirm" type="password" name="newpasswordconfirm" class="form-control width-250 m-auto" placeholder="Yeni şifre tekrarla">
</div>
<div class="form-group">
<button type="button" id="resetpasswordbtn" class="btn btn-theme width-250" value="Reset">Yenile</button>
</div>
</form>
</div>
</div>
</div>
</div>
{{/if}}
</template>
account.js
if (Accounts._resetPasswordToken) {
Session.set('resetPassword', Accounts._resetPasswordToken);
}
Accounts.onResetPasswordLink(function (token, done) {
Session.set('resetPassword', token); meteo
done(); // Assigning to variable
$t.find('#myModal-9').modal('show');
});
Template.ResetPassword.helpers({
resetPassword: function () {
return Session.get('resetPassword');
}
});

I use bootbox to display bootstrap-style modals in Meteor, using Meteor templates (so that the modals are reactive). If you
meteor add mizzao:bootboxjs
Then the following function will suffice to display a modal:
function displayModal(template, data, options) {
// minimum options to get message to show
options = options || { message: " " };
var dialog = bootbox.dialog(options);
// Take out the default body that bootbox rendered
dialog.find(".bootbox-body").remove();
// Insert a Meteor template
// Since bootbox/bootstrap uses jQuery, this should clean up itself upon removal
Blaze.renderWithData(template, data, dialog.find(".modal-body")[0]);
return dialog;
}
You'll find that the default bootbox modals are also useful for non-reactive messages.

How do I rebind the mvc model for a bootstrap modal dialog?

I have an MVC 4 application containing a grid with a link button to trigger the display of record details. I'm using a bootstrap modal dialog to display record details when the user selects a grid row.
I don't want to load the record details unless they are asked for; there are too many data elements involved (1000+).
The grid page uses a modal div containing the partial page (with a ViewModel reference).
I need the partial page's ViewModel to refresh prior to the display of the dialog. so when the user clicks the link, I get the record id from the grid and use it to create the url to the controller method - which seems to work, but seems to happen AFTER the dialog is shown.
How do I get this to work?
This code is in my Index.cshtml:
×
Account Number: #Html.DisplayFor(model => model.AccountNumber)
#{Html.RenderPartial("_KeyTable");}
#{Html.RenderPartial("_LoanTable");}
Close
$(document).ready(function () {
$("#divDialog").hide();
$("#btnClose").hide();
$("#lblAcceptAll").show();
$("#OnHoldsGrid").focus();
pageGrids.OnHoldsGrid.onRowSelect(function (e) {
accountNumber = e.row.AccountNumber;
});
$(".modal-link").click(function (event) {
event.preventDefault();
$('#detailsModal').removeData("modal");
var url = '#(Url.Action("_DetailsForModal", "Home", null, Request.Url.Scheme))?accountNumber=' + accountNumber;
$('#detailsModal').load(url);
$('#detailsModal').modal('show');
//alert(url);
});
});
// This code is in my Controller:
public ActionResult _DetailsForModal(string accountNumber)
{ // This refreshes the data in the ViewModel:
LOIHoldsViewModel model = new LOIHoldsViewModel();
model.GetLOIHoldExtended(accountNumber);
return PartialView("_DetailsForModal", model);
}
// This code is in my partial page _KeyTable.cshtml:
#model LOIHolds.Models.LOIHoldsViewModel
<div id="divKeyTable">
<br />
<hr />
<div class="KeyTableExpandContent">
<h2>Show/Hide Key Table Information</h2>
</div>
<label>Provider Date:</label>
#Html.DisplayFor(model => model.LOIHoldWithTables.KeyTable.ProviderDate)
<label>PFI Date:</label>
#Html.DisplayFor(model => model.LOIHoldWithTables.KeyTable.PFIDate)
<label>User Accept Date:</label>
#Html.DisplayFor(model => model.LOIHoldWithTables.KeyTable.UserAcceptDate)
<label>User Deny Date:</label>
#Html.DisplayFor(model => model.LOIHoldWithTables.KeyTable.UserDenyDate)
<label>Process Date:</label>
#Html.DisplayFor(model => model.LOIHoldWithTables.KeyTable.ProcessDate)
<label>Fiserv Accept Date:</label>
#Html.DisplayFor(model => model.LOIHoldWithTables.KeyTable.FiservAcceptDate)
</div>
<script>
$('.KeyTableExpandContent').click(function () {
$('.divKeyTable').toggle();
});
</script>
// This is the partial _DetailsForModal.cshtml:
#model LOIHolds.Models.LOIHoldsViewModel
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="detailsModalLabel"><label>Account Number: </label>#Html.DisplayFor(model => model.AccountNumber) </h4>
</div>
<div class="modal-body">
<p>
#{Html.RenderPartial("_KeyTable");}
#{Html.RenderPartial("_LoanTable");}
</p>
</div>
<div class="modal-footer">
<button type="button" id="CancelModal" class="btn btn-default modal-close-btn" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

You will have to use Ajax when you click the .modal-link:
$(".modal-link").click(function (event) {
var mUrl = '#(Url.Action("DetailsForModal", "Home", null, Request.Url.Scheme))?accountNumber=' + accountNumber;
$.ajax({
url: mUrl,
success:function(result){
// result should contain PartialView from Controller
//Assign Modal DIV the PartialView
$('#detailsModal').html(result);
$('#detailsModal').modal('show');
}
});
}
Put your Modal Logic in a Partial View, then Create a function in Home Controller: Something like this:
public ActionResult DetailsForModal(int accountNumber){
var model = new PartialModalDialogViewModel();
// Load Modal Data
return PartialView("PartialViewName", model);
}
EDIT:
Try removing this from the Modal Partial View and put in somewhere in the _Layout.cshtml
<div class="modal fade" id="detailsModal" tabindex="-1" role="dialog" aria-labelledby="detailsModalLabel" aria-hidden="true">
</div>