Show Data From Page-body to Modal-body - javascript

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>

Related

Multiple Bootstrap modal issue with Contact From 7 event

I have a bootstrap5 modal in which contact form 7 is added through shortcode. On successfully submission of form, it should display another modal having thank you message which is working fine.
But I want to hide the first modal (the contact form) when the second modal is displayed.
Here is the live link: https://onlinedemoserver.com/Techmatix/contact-us/ (You will find the form when you go to footer and click on Lets talk).
Here is the javascript code:
var footer_section = document.querySelector('.contact-footer .wpcf7');
if(footer_section){
footer_section.addEventListener( 'wpcf7mailsent', function( event )
{
$("#contactfooterform").modal("hide");
$("#contactfooterthankyou").modal("show");
}, false);
$("#contactfooterthankyou .send-btn").on("click", function()
{
$("#contactfooterthankyou").modal("hide");
});
}
Here is the HTML code:
<div class="container-fluid footer-bg-color">
<br>
<div class="pt-4">
<div class="row pl-4 footer-first-row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<img src="<?php echo get_template_directory_uri(); ?>/includes/images/footer/logo.png">
</div>
<?php if ( ! is_active_sidebar( 'footer-1' ) ) {
return;
}
?>
<?php dynamic_sidebar( 'footer-1' ); ?>
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 center-btn m-auto">
<div class=" footer-talk" data-toggle="modal" data-target="#contactfooterform" data-whatever="#mdo">
<div class="inner-circle">
<p class="footer-talk-text">
Lets talk!
</p>
</div>
</div>
</div>
<!-- Modal Popup for Lets Talk Start -->
<div class="modal fade" id="contactfooterform" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="container pop-up-wrap-body p-0 m-0">
<div class="container lets-talk-modal modal-content p-0 p-lg-5">
<div class="modal-header">
<h1 class="modal-title lets-modal-header" id="exampleModalLabel">Let’s <span class="sub-heading-lets">talk!</span></h1>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true"><img src="<?php echo get_template_directory_uri(); ?>/includes/images/footer/close.png" class="img-fluid"></span>
</button>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<h5 class="lets-modal-sub-header">Start a conversation around new business<br> opportunities</h5>
</div>
</div>
</div>
<div class="container pop-up-wrap p-0 m-0">
<div class="modal-body">
<?php echo do_shortcode('[contact-form-7 id="22" title="Contact Form"]');?>
</div>
</div>
</div>
<div class="container-fluid pop-up-footer">
<div class="row thank-you">
<div class="col-lg-4 col-md-4 col-sm-6 pop-up-footer-text">
<p>1-888-251-1622<br> info#techmatix.nl</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 pop-up-footer-text">
<p>Transistorstraat 31, 1322 CK<br> Almere, Netherlands</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal popup for Lets Talk End -->
<!-- Thank You Pop up Start -->
<div class="modal fade" id="contactfooterthankyou" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="container pop-up-wrap-body">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title lets-modal-header" id="exampleModalLabel">Thank <span class="sub-heading-lets">You!</span></h1>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true"><img src="<?php echo get_template_directory_uri(); ?>/includes/images/footer/close.png" class="img-fluid"></span>
</button>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<h5 class="lets-modal-sub-header">Your message has been sent</h5>
</div>
</div>
</div>
<div class="container pop-up-wrap">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="modal-footer thank-you-pop-up" class="close" data-dismiss="modal" aria-label="Close" aria-hidden="true">
<button type="button" class="btn btn-primary send-btn">Close</button>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid pop-up-footer">
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-12 col-xs-12"></div>
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 pop-up-footer-text">
<p>1-888-251-1622<br> info#techmatix.nl</p>
</div>
<div class="col-lg-5 col-md-5 col-sm-12 col-xs-12 pop-up-footer-text">
<p>Transistorstraat 31, 1322 CK<br> Almere, Netherlands</p>
</div>
<div class="col-lg-1 col-md-1 col-sm-12 col-xs-12"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Thank You Pop up End -->
Note: The error I am getting on console when second modal appears is: Uncaught RangeError: Maximum call stack size exceeded.
I have fixed this issue on my own by removing show class from both modals when the second modal is closed and adding display none to backdrop div which was being created by modal at the end of body.

Search filter on div with hidden elements

I have a accordion placed inside a div and I have added a search box to the div which is intended to function as a search filter. Inside the div some accordion elements are visible and some are hidden. I need the filter to work only on visible elements.
In the current code I have used it's searching for all elements inside the div and when the search box is cleared the page is getting hanged and not responsive unless I refresh the page.
Any solution pointing to the right direction would be highly appreciated.
$(document).ready(function() {
$("#searchTC").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#testcases div").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-6">
<div class="panel">
<div class="panel-heading">
<h4 class="panel-title">Test<i class="fa fa-thumbs-o-down"></i> <small style="color:#117DEF">CASES</small></h4>
<div class="panel-actions">
<!--Search TestCases-->
<div id="filterTC" class="form-group">
<div class="input-search">
<i class="input-search-icon ti-search" aria-hidden="true" style="color: #1179EF"></i>
<input type="search" class="form-control" placeholder="Search..." id="searchTC">
</div>
</div>
<!--Select All/Deselect All Toggle-->
<div class="toggle-wrap w-checkbox float-right">
<input class="toggle-ticker w-checkbox-input" data-ix="toggle-switch" data-name="Toggle Switch" id="Toggle-Switch" name="Toggle-Switch" type="checkbox" onclick="toggle(this)" style="transition: transform 0.3s cubic-bezier(0.2, 0.3, 0, 1) 0s, box-shadow 0.3s cubic-bezier(0.2, 0.3, 0, 1) 0s, border-color 0s linear 0.17s, -webkit-transform 0.3s cubic-bezier(0.2, 0.3, 0, 1) 0s;">
<label class="toggle-label w-form-label" for="Toggle-Switch"></label>
<div class="toggle">
<div class="toggle-active">
<div class="active-overlay"></div>
<div class="top-line"></div>
<div class="bottom-line"></div>
</div>
</div>
</div>
</div>
</div>
<div class="panel-body container-fluid">
<div id="testcases" class="accordion js-accordion" style="max-height: 240px;overflow: auto;">
<div class="accordion__item js-accordion-item" id="0001" style="display: block" name="com.onlineshopping.TS_Ebay">
<div class="accordion-header js-accordion-header"><input type="checkbox" class="to-labelauty-icon labelauty" name="inputLableautyNoLabeledCheckbox" data-plugin="labelauty" data-label="false" id="labelauty-0001" value="tc_SearchProducts" aria-hidden="true" style="display: none;"><label for="labelauty-0001"><span class="labelauty-unchecked-image"></span><span class="labelauty-checked-image"></span></label> tc_SearchProducts</div>
<div class="accordion-body js-accordion-body">
<div class="accordion-body__contents">
<div class="dt" id="dt-0001"><button class="btn btn-success waves-effect waves-classic" data-target="#dtFillIn-00010" data-toggle="modal" type="button"><i class="icon md-apps" aria-hidden="true"></i>dt_Ebay</button>
<div class="modal fade modal-fill-in" id="dtFillIn-00010" aria-hidden="false" aria-labelledby="dtFillIn-00010" role="dialog" tabindex="-1">
<div class="modal-dialog modal-simple">
<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></div>
<div class="modal-body table-responsive">
<div class="panel">
<header class="panel-heading">
<div class="panel-actions"> <button class="btn waves-effect waves-classic" id="saveDT" name="saveDT"> Save </button> </div>
<h3 class="panel-title" id="dtName">dt_Ebay</h3>
</header>
<div class="panel-body">
<div class="col-sm-12" id="tableBodydt_Ebay"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="accordion__item js-accordion-item active"></div>
<div class="accordion__item js-accordion-item" id="00011" style="display: block" name="com.onlineshopping.TS_Ebay">
<div class="accordion-header js-accordion-header"><input type="checkbox" class="to-labelauty-icon labelauty" name="inputLableautyNoLabeledCheckbox" data-plugin="labelauty" data-label="false" id="labelauty-00011" value="tc_LoginToApplication" aria-hidden="true" style="display: none;">
<label for="labelauty-00011"><span class="labelauty-unchecked-image"></span><span class="labelauty-checked-image"></span></label> tc_LoginToApplication</div>
<div class="accordion-body js-accordion-body">
<div class="accordion-body__contents">
<div class="dt" id="dt-00011"><button class="btn btn-success waves-effect waves-classic" data-target="#dtFillIn-000110" data-toggle="modal" type="button"><i class="icon md-apps" aria-hidden="true"></i>dt_EbayLogin</button>
<div class="modal fade modal-fill-in" id="dtFillIn-000110" aria-hidden="false" aria-labelledby="dtFillIn-000110" role="dialog" tabindex="-1">
<div class="modal-dialog modal-simple">
<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></div>
<div class="modal-body table-responsive">
<div class="panel">
<header class="panel-heading">
<div class="panel-actions"> <button class="btn waves-effect waves-classic" id="saveDT" name="saveDT"> Save </button> </div>
<h3 class="panel-title" id="dtName">dt_EbayLogin</h3>
</header>
<div class="panel-body">
<div class="col-sm-12" id="tableBodydt_EbayLogin"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="accordion__item js-accordion-item"></div>
<div class="accordion__item js-accordion-item" id="1001" style="display: none" name="com.onlineshopping.TS_Amazon">
<div class="accordion-header js-accordion-header"><input type="checkbox" class="to-labelauty-icon labelauty" name="inputLableautyNoLabeledCheckbox" data-plugin="labelauty" data-label="false" id="labelauty-1001" value="tc_ExploreAmazon" aria-hidden="true" style="display: none;"><label for="labelauty-1001"><span class="labelauty-unchecked-image"></span><span class="labelauty-checked-image"></span></label> tc_ExploreAmazon</div>
<div class="accordion-body js-accordion-body">
<div class="accordion-body__contents">
<div class="dt" id="dt-1001"><button class="btn btn-success waves-effect waves-classic" data-target="#dtFillIn-10010" data-toggle="modal" type="button"><i class="icon md-apps" aria-hidden="true"></i>dt_Amazon</button>
<div class="modal fade modal-fill-in" id="dtFillIn-10010" aria-hidden="false" aria-labelledby="dtFillIn-10010" role="dialog" tabindex="-1">
<div class="modal-dialog modal-simple">
<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></div>
<div class="modal-body table-responsive">
<div class="panel">
<header class="panel-heading">
<div class="panel-actions"> <button class="btn waves-effect waves-classic" id="saveDT" name="saveDT"> Save </button> </div>
<h3 class="panel-title" id="dtName">dt_Amazon</h3>
</header>
<div class="panel-body">
<div class="col-sm-12" id="tableBodydt_Amazon"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="accordion__item js-accordion-item"></div>
</div>
<br>
<button type="button" class="btn btn-info float-right waves-effect waves-classic" onclick="loadplan()">Add to Plan</button>
</div>
</div>
</div>
Use jquery hidden attribute to check if element is hidden
if ($('#testElement').is(':visible')) {
// Code
}

Bootstrap's modal content from another page not working, instead renders as new page

Trying to open Bootstrap's modal-content from another page, however it opens as new page instead of modal. Not sure why it is behaving like this.
Here is my code from page1:
<div class="text-center list-details" >
<h4>Time Frame: {{offer.delivery_duration? offer.delivery_duration : 'N/A'}}</h4>
<p> </p>
<a data-toggle="modal" href="brands/{{request.variant.model.brand.id}}/models/{{request.variant.model.id}}/variants/{{request.variant.id}}/requests/{{request.id}}/offers/{{offer.id}}/modal" data-target="#myModal" class="btn btn-success" role="button">View Full Offer</a>
</div>
<div id="myModal" class="modal fade" >
<div class="modal-dialog">
<div class="modal-content" style="border-radius: 0px;">
</div>
</div>
</div>
Here is the page2 which contains modal-content:
<div class="modal-header" style="background-color: #213a4c; color:white;">
<button type="button" class="close" data-dismiss="modal" style="color: #fff;">×</button>
<h4 class="modal-title" style="color: #fff;"><strong>{{brand.name}} {{model.name}} {{variant.name}}</strong></h4>
</div>
<div class="modal-body" style="padding: 0px;">
<div class="col-md-12">
<div class="col-md-12 text-center noside-padding">
<h2>{{brand.name}} {{model.name}} {{variant.name}}</h2>
</div>
<div class="col-md-6 n cardeal-detail">
<!-- first row -->
<div class="col-md-6 noside-padding">
<h5>Ex Showroom Price</h5>
</div>
<div class="col-md-6 noside-padding text-right ng-binding">
{{offer.ex_showroom_price | currency:"₹ "}}
</div>
</div>
</div>
</div>
<div class="modal-footer text-center" >
<button type="button" class="btn btn-default" data-dismiss="modal" style="margin-top: 20px;">Close</button>
</div>
Could you please anyone help me on this regard?? how do i get page2 as modal in page1.

jQuery-ui selectable div and open modal

I have divs, for select div I used jquery-ui selectable, I want to click on the div(clicked div drawing) and the modal is opened.
HTML
<div class="content">
<div id="selectable" class="right-content">
<div id="selectable" class="clickable row">
<div class="col-lg-1 table-bordered">1</div>
<br/><br/>
<div class="col-lg-2 table-bordered">2</div>
<br/><br/>
<div class="col-lg-2 table-bordered">3</div>
<br/><br/>
<div class="col-lg-2 table-bordered">4</div>
<br/><br/>
<div class="col-lg-2 table-bordered">5</div>
<br/><br/>
<div class="col-lg-1 table-bordered">6</div>
</div>
<div id="orderModal" class="modal hide fade" role="dialog" aria-labelledby="orderModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h3>Order</h3>
</div>
<div id="orderDetails" class="modal-body"></div>
<div id="orderItems" class="modal-body"></div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
</div>
</div>
JavaScript
$( function() {
$("#selectable").selectable();
});

how to get values from field which is out of form

I have a form
<form:form commandName="cnd" class="form">
<div class="form-group form-group-label">
<div class="row">
<div class="col-md-10 col-md-push-1">
<label class="floating-label">Title</label>
<form:input path="title" cssClass="form-control"/>
</div>
</div>
</div>
<div class="form-group form-group-label">
<div class="row">
<div class="col-md-10 col-md-push-1">
<label class="floating-label">Company</label>
<form:input path="company" cssClass="form-control"/>
</div>
</div>
</div>
<div class="form-group form-group-label">
<div class="row">
<div class="col-md-10 col-md-push-1">
<label class="floating-label" >Location</label>
<form:input path="location" cssClass="form-control"/>
</div>
</div>
</div>
<a class="btn btn-block waves-button waves-effect" data-toggle="modal" href="#modal">Toggle Modal</a>
<div class="form-group">
<div class="row">
<div class="col-md-10 col-md-push-1">
<button class="btn btn-block btn-blue waves-button waves-effect waves-light">Sign In</button>
</div>
</div>
</div>
</form:form>
when I click on the link in form which is
<a class="btn btn-block waves-button waves-effect" data-toggle="cat" href="#modal">Show cat</a>
I want to show the following
<div aria-hidden="true" class="modal fade" id="cat" role="dialog" tabindex="-1">
<div class="modal-dialog modal-xs">
<div class="modal-content">
<div class="modal-heading">
<a class="modal-close" data-dismiss="modal">×</a>
<h2 class="modal-title">Seclect Categories</h2>
</div>
<div class="modal-inner">
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
<div class="modal-footer">
<p class="text-right"><button class="btn btn-flat btn-alt" data-dismiss="modal" type="button">Close</button><button class="btn btn-flat btn-alt" data-dismiss="modal" type="button">OK</button></p>
</div>
</div>
</div>
</div>
I want to get values selected from select and submit them when I submit the form using Javascript, I'm unable to place the select field in form for some reason.
You will need to use a javascript function. You can either have the cat div loaded from the beginning and hidden using javascript to show/hide it or you can call it via Ajax.
I included the div in your form and set the style to hidden with javascript either revealing it or hiding it on click. You can remove the if and just set to to display block when clicked if you don't want to hide it again. It's worth noting that this will not clear the values. If you want to clear values when closing it then you should call it with AJax and clear the div when closing.
<form:form commandName="cnd" class="form">
<div class="form-group form-group-label">
<div class="row">
<div class="col-md-10 col-md-push-1">
<label class="floating-label">Title</label>
<form:input path="title" cssClass="form-control"/>
</div>
</div>
</div>
<div class="form-group form-group-label">
<div class="row">
<div class="col-md-10 col-md-push-1">
<label class="floating-label">Company</label>
<form:input path="company" cssClass="form-control"/>
</div>
</div>
</div>
<div class="form-group form-group-label">
<div class="row">
<div class="col-md-10 col-md-push-1">
<label class="floating-label" >Location</label>
<form:input path="location" cssClass="form-control"/>
</div>
</div>
</div>
<a class="btn btn-block waves-button waves-effect" data-toggle="modal" href="#modal" onClick="swap(); return false">Toggle</a>
<div aria-hidden="true" class="modal fade" id="cat" role="dialog" tabindex="-1" style="display: none;" >
<div class="modal-dialog modal-xs">
<div class="modal-content">
<div class="modal-heading">
<a class="modal-close" data-dismiss="modal">×</a>
<h2 class="modal-title">Seclect Categories</h2>
</div>
<div class="modal-inner">
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
<div class="modal-footer">
<p class="text-right"><button class="btn btn-flat btn-alt" data-dismiss="modal" type="button">Close</button><button class="btn btn-flat btn-alt" data-dismiss="modal" type="button">OK</button></p>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-10 col-md-push-1">
<button class="btn btn-block btn-blue waves-button waves-effect waves-light">Sign In</button>
</div>
</div>
</div>
<script type="text/javascript">
var counter = 1
function swap() {
if (counter%2 == 0) {
document.getElementById('cat').style.display = 'none';
}
if (counter%2 != 0) {
document.getElementById('cat').style.display = 'block';
}
counter += 1;
}
</script>
</form:form>

Categories