upgrademodalPlan(el){
let data = {
subscription_plan_id: el.subscription_plan_id,
recurrence_time: el.payment_frequency,
}
}
Here I can able to access the el but in model button how to access this el
{ el.is_subscribed ? <button element={el} className="btn btn-success waves-effect waves-light m-t-20" data-toggle="modal" data-target="#upgradePlan" onClick=
{this.upgrademodalPlan.bind(this, el)}>Upgrade Plan</button> : null }
makePayment(el){
the same data what i was accessing in upgrademodalPlan should be accessed here, but i cannot able to access
}
<div id="upgradePlan" className="modal fade emp-add-list" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style={{display: "none"}}>
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<h6 className="modal-title">Upgrade Plan</h6>
<button type="button" className="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div className="modal-body">
<div className="form-group row m-b-0">
<div className="col-md-12 col-sm-6 col-xs-6">
<div className="">
<div className="row">
<div className="col-md-12">
<form>
<div className="form-group">
</div>
<div className="form-group">
<div className="checkbox">
<button type="button" className="btn btn-danger" onClick={this.makePayment.bind(this, this.props)}>Make Payment</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I am not sure to understand your question, but if you want pass el in model button you can use props maybe
{ el.is_subscribed ? <button element={el} className="btn btn-success waves-effect waves-light m-t-20" data-toggle="modal" data-target="#upgradePlan" onClick=
{this.upgrademodalPlan.bind(this, el)}>Upgrade Plan</button> : null }
Related
I wanted to toggle modal after a promise is resolved, which is triggered on button click. As per official doc modal.toggle() should do the magic but it is not working. I am using bootstrap's version 5.2.2. I can't use react-bootstrap.
import React from "react";
import { Modal } from "bootstrap";
const ExampleModal = () => {
const toggleModal = () => {
const myModalEl = document.getElementById('exampleModalToggle')
const modal = new Modal(myModalEl);
modal.toggle();
};
return (
<>
<div
className="modal fade"
id="exampleModalToggle"
aria-hidden="true"
aria-labelledby="exampleModalToggleLabel"
tabindex="-1"
>
<div className="modal-dialog modal-dialog-centered">
<div className="modal-content">
<div className="modal-header">
<h1 className="modal-title fs-5" id="exampleModalToggleLabel">
Modal 1
</h1>
<button
type="button"
className="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div className="modal-body">
Show a second modal and hide this one with the button below.
</div>
<div className="modal-footer">
<button
onClick={toggleModal}
className="btn btn-primary"
data-bs-target="#exampleModalToggle2"
// data-bs-toggle="modal" // wanted to toggle after a promise is resolved
>
Open second modal
</button>
</div>
</div>
</div>
</div>
<div
className="modal fade"
id="exampleModalToggle2"
aria-hidden="true"
aria-labelledby="exampleModalToggleLabel2"
tabindex="-1"
>
<div className="modal-dialog modal-dialog-centered">
<div className="modal-content">
<div className="modal-header">
<h1 className="modal-title fs-5" id="exampleModalToggleLabel2">
Modal 2
</h1>
<button
type="button"
className="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div className="modal-body">
Hide this modal and show the first with the button below.
</div>
<div className="modal-footer">
<button
className="btn btn-primary"
data-bs-target="#exampleModalToggle"
data-bs-toggle="modal"
>
Back to first
</button>
</div>
</div>
</div>
</div>
<a
className="btn btn-primary"
data-bs-toggle="modal"
href="#exampleModalToggle"
role="button"
>
Open first modal
</a>
</>
);
};
export default ExampleModal;
I have prepared above sample code and ran this code on sandbox. This is also unable to toggle the modal. Also the background shadow is getting darker after each button click. This is same behaviour i am experiencing in my project.
Here is the updated code which worked for me.
import React, { useRef } from "react";
import { Modal } from "bootstrap";
const ExampleModal = () => {
const myModalEl1 = useRef(null);
const myModalEl2 = useRef(null);
const toggleModal = () => {
// const myModalEl1 = document.getElementById("exampleModalToggle");
const modal = Modal.getInstance(myModalEl1.current, {});
modal.toggle();
// const myModalEl2 = document.getElementById("exampleModalToggle2");
const modal2 = Modal.getOrCreateInstance(myModalEl2.current, {});
modal2.toggle();
};
return (
<>
<div
className="modal fade"
id="exampleModalToggle"
ref={myModalEl1}
aria-hidden="true"
aria-labelledby="exampleModalToggleLabel"
tabindex="-1"
>
<div className="modal-dialog modal-dialog-centered">
<div className="modal-content">
<div className="modal-header">
<h1 className="modal-title fs-5" id="exampleModalToggleLabel">
Modal 1
</h1>
<button
type="button"
className="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div className="modal-body">
Show a second modal and hide this one with the button below.
</div>
<div className="modal-footer">
<button
onClick={toggleModal}
className="btn btn-primary"
data-bs-target="#exampleModalToggle2"
// data-bs-toggle="modal" // wanted to toggle after a promise is resolved
>
Open second modal
</button>
</div>
</div>
</div>
</div>
<div
className="modal fade"
id="exampleModalToggle2"
aria-hidden="true"
ref={myModalEl2}
aria-labelledby="exampleModalToggleLabel2"
tabindex="-1"
>
<div className="modal-dialog modal-dialog-centered">
<div className="modal-content">
<div className="modal-header">
<h1 className="modal-title fs-5" id="exampleModalToggleLabel2">
Modal 2
</h1>
<button
type="button"
className="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div className="modal-body">
Hide this modal and show the first with the button below.
</div>
<div className="modal-footer">
<button
className="btn btn-primary"
data-bs-target="#exampleModalToggle"
data-bs-toggle="modal"
>
Back to first
</button>
</div>
</div>
</div>
</div>
<a
className="btn btn-primary"
data-bs-toggle="modal"
href="#exampleModalToggle"
role="button"
>
Open first modal
</a>
</>
);
};
export default ExampleModal;
I try to send an html input text value to a controller. I can't use a form post because my modal dialog is already in a form.
Here's the code :
#foreach (var annonce in Model.AnnoncesRecherchees)
{
<!-- Modal -->
<div class="modal fade" id="#("AjouterVisiteVirtuelleModal" + #annonce.Reference)" 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">Ajouter visite virtuelle annonce #annonce.Reference</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="form-floating">
<input id="visitevirtuelle" class="form-control" autocomplete="" aria-required="false" />
<label class="form-label"></label>
<span asp-validation-for="Ville" class="text-danger"></span>
</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">Understood</button>*#
<a class="btn btn-primary" asp-controller="Acheteur" asp-action="AjouterVisiteVirtuelle" asp-route-annonceId="#annonce.ID" asp-route-visiteVirtuelle="document.getElementById("visitevirtuelle").value">Ajouter une visite virtuelle</a>
</div>
</div>
</div>
</div>
I want the parameter "asp-route-visiteVirtuelle" to have the value of the input text "visite virtuelle".
But it doesn't work
PLease help me.
Tag helper in anchor link render the url in href when the page load, so you cannot use js to add the value to asp-route-visiteVirtuelle.
Here is a whole working demo:
#foreach (var annonce in Model.AnnoncesRecherchees)
{
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="##("AjouterVisiteVirtuelleModal" + #annonce.Reference)">
Launch demo modal
</button> <!-- Modal -->
<div class="modal fade" id="#("AjouterVisiteVirtuelleModal" + #annonce.Reference)" 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">Ajouter visite virtuelle annonce #annonce.Reference</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="form-floating">
//add event here......................
<input onchange="ChangeUrl(this)" id="visitevirtuelle" class="form-control" autocomplete="" aria-required="false" />
<label class="form-label"></label>
<span asp-validation-for="Ville" class="text-danger"></span>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<a class="btn btn-primary" asp-controller="Acheteur" asp-action="AjouterVisiteVirtuelle" asp-route-annonceId="#annonce.ID" >Ajouter une visite virtuelle</a>
</div>
</div>
</div>
</div>
}
#section Scripts
{
<script>
function ChangeUrl(event)
{
var visiteVirtuelleVal = $(event).val();
var anchor = $(event).closest('.modal-body').siblings('.modal-footer').find('a').attr('href');
$(event).closest('.modal-body').siblings('.modal-footer').find('a').attr('href',anchor+"&visiteVirtuelle="+visiteVirtuelleVal);
}
</script>
}
I want to show data from Body Their id(name + type) to Model Body. also i want data in page body as label but in model as input.
I want when edit click on Edit Button and open model have data in card to edit it.
https://codepen.io/fadynabilofficial/pen/PobJvER
<div class="container px-4 py-5 mx-auto">
<div class="row justify-content-center">
<div class="col-lg-12">
<div class="card">
<div class="row">
<div class="col-lg-6">
<div class="row px-1">
<div class="form-group col-md-8">
<label class="form-control-label" id="name">Cheesecake With Flavor</label>
<label class="form-control-label" id="type">Chocola</label>
</div>
</div>
</div>
<div class="col-lg-3 mt-2">
<div class="row d-flex justify-content-between px-4">
</div>
<button class="btn-block btn-edit" type="button" data-toggle="modal" data-target="#exampleModal" id="submit">
Edit
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 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-body">
<input id="name">
<br>
<button type="button" class="btn btn-success btn-sm" id="submit">
Submit
</button>
</div>
</div>
</div>
</div>
I want this to close a modal named confirmationModal and another named showModal. I was thinking of doing this from the on click event, or maybe writing a simple if/else method but nothing seems to work
<div v-if="showModal">
<transition name="modal">
<div class="modal-mask">
<div class="modal-wrapper">
<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" #click="showModal = false">×</span>
</button>
</div>
<div class="modal-body">
<div class="modal_header_text">Are you Sure?</div>
<img class="redeem_image" src="https://www.fillmurray.com/g/460/420" alt="people"/>
<div class="modal_redeem_text">Redeem for Flyaway?</div>
</div>
<div class="modal-footer">
<button type="button" id="reclamation_btn" class="btn btn-primary" #click="confirmationModal = true">Redeem</button>
<button type="button" id="close_btn" class="btn btn-secondary" #click="showModal = false">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</transition>
</div>
<div v-if="confirmationModal">
<transition name="modal">
<div class="modal-mask">
<div class="modal-wrapper">
<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" #click="confirmationModal = false">×</span>
</button>
</div>
<div class="modal-body">
<img class="redeem_image" src="https://www.fillmurray.com/g/460/420" alt="people"/>
</div>
<div class="modal-footer">
<button type="button" id="final_reclamation_btn" class="btn btn-primary" #click="confirmationModal = false">Redeem</button>
</div>
</div>
</div>
</div>
</div>
</transition>
</div>
</div>
You can achieve it in the following way:
#click="confirmationModal=false;showModal=true"
i have a little problem when im trying to clear bootstrap modal data..
there is my modal.
<div id="modal-creacion-alias" class="modal fade" tabindex="-1" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
<form id="form-alias-dominio" method="POST" class="form">
<div class="modal-content">
<div class="form-body">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h2 class="modal-title">Alias de dominios</h2>
</div>
<div class="modal-body">
<div class="form-group">
<label class="col-md-4 control-label">Nombre del Alias<span class="required">*</span></label>
<div class="col-md-8">
<div class="input-icon right">
<i class="fa fa-info-circle tooltips" data-original-title="Contraseña" data-container="body"></i>
<input type="text" class="form-control" name="nombre-alias-dominio" id="nombre-alias-dominio">
<br>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="modal-footer ">
<button type="button" data-dismiss="modal" class="btn default">Cancelar <i class="fa fa-sign-out"></i></button>
<button type="submit" id="crear-alias-domino" class="btn gtd-blue-hard crear-alias-domino">Crear <i class="fa fa-plus"></i></button>
</div>
</div>
</div>
</form>
</div>
</div>
and this is the js function:
$('body').on('hide.bs.modal', '.modal', function () {
&(this).removeData('bs.modal');
});
but when i close and re open modal the data still there.
how can i solve it?
thanks.
You can reset all input data by using $(form).trigger('reset')
$('body').on('hide.bs.modal', '.modal', function () {
$('#form-alias-dominio').trigger("reset"); //here your form_id
});
I was able to clear data doing this
$('body').on('hide.bs.modal', '.modal', function (e) {
$(this).find('form').trigger("reset");
});
thanks #Sadikhasan