onclick with same class - javascript

I have Div1 and Div2 inside this divs i have multiple inputs.
The goal is when i click on div 1 btn edit it shows the inputs inside div 1 and the same to div2
My html
My 1º Div
<div class="col-lg-6 col-md-6 xxx">
<div class="row form-group ">
<div class="col-lg-6 col-md-6"><h6 >xxx Nº 1</h6></div>
<div id="edit" class="btn btn-sm"> Edit </div>
</div>
<div class="form-group edit_xxx" id="edit_xxx">
<div class="row form-group" >
<div class="col-lg-5 col-md-5 row">
<div id="minus" class="btn btn-sm-click btn-info fa fa-minus pull-left"></div>
<input id="xxx" name="xxx" class="form-control click select-form" disabled type="text" value="{{ $i }}" >
<div id="plus" class="btn btn-sm-click btn-info fa fa-plus pull-right"></div>
</div>
</div>
</div>
</div>
My 2º div
<div class="row form-group " >
<div class="col-lg-6 col-md-6"><h6 >xxx Nº 2</h6></div>
<div id="edit" class="btn btn-sm"> Edit </div>
</div>
<div class="form-group edit_xxx" id="edit_xxx">
<div class="row form-group" >
<div class="col-lg-5 col-md-5 row">
<div id="minus" class="btn btn-sm-click btn-info fa fa-minus pull-left"></div>
<input id="xxx" name="xxx" class="form-control click select-form" disabled type="text" value="{{ $i }}" >
<div id="plus" class="btn btn-sm-click btn-info fa fa-plus pull-right"></div>
</div>
</div>
</div>
</div>
My jquery code:
$("body").on("click", ".xxx",function(){
$(this).parent().find(".edit_xxx").toggle();
});
The final goal is when click inside .xxx it opens the input id click again closes the input from DIV1 the same if click on div2
Thanks for the help, i realy suck with jquery.

The answer!
$("body").on("click", "#edit",function(){
$(this).parents(".xxx").children("#edit_xxx").toggle();
});

Related

modal show event is not firing

I have one view in asp.net MVC application, in which i have one table. on each row i have one anchor tag which will open modal window. I have written some code on modal show event. but the event is not firing. my view's layout is coming from custom layout page.following is the code for my view.
#Model
#Imports System.Data
#Code
ViewBag.Title = ViewBag.Title
Layout = "~/Views/Shared/_MyLayout.vbhtml"
End Code
#Section js
<script src="#Session("baseurl")/Scripts/bootstrap.min.js"></script>
<script src="#Session("baseurl")/Scripts/jquery-3.3.1.slim.min.js"></script>
<script src="#Session("baseurl")/Scripts/jquery.min.js"></script>
End Section
#section css
End Section
<script src="#Session("baseurl")/Scripts/jquery-1.12.4.js"></script>
<script src="#Session("baseurl")/Scripts/jquery-ui.js"></script>
<link href="#Session("baseurl")/Styles/jquery-ui.css" rel="stylesheet" />
<link href="#Session("baseurl")/Styles/jquery.dataTables.min.css" rel="stylesheet" />
<script src="#Session("baseurl")/Scripts/jquery.dataTables.min.js"></script>
<form action="#Session("baseurl")/ContainerList/List" method="post">
<div class="row pl-md-1 pb-0">
<div class="col-md-12 pl-1">
<p class="lead" id="heading">#ViewBag.Heading</p>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<div class="alert alert-info form-control" id="infomsg">
<label id="lblInfo" class="fa fa-info-circle">#Session("InfoMsg")</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10 border border-primary pt-2 pb-2">
<div class="row pb-3">
<!--<div class="col-md-2 pt-1">
<label Class="col-form-label">#Session("ContainerNo")</label>
</div>
<div class="col-md-3">
<input type="text" name="containerno" id="containerno" class="form-control form-control-sm font-weight-bold text-uppercase" />
</div>
<div class="col-md-2"></div>-->
<div class="col-md-2">
<label Class="col-form-label">#Session("BOLNumber")</label>
</div>
<div class="col-md-5">
<input type="text" name="bolnumber" class="form-control form-control-sm font-weight-bold text-uppercase" />
</div>
</div>
<div class="row">
#If Session("Lang") = "E" Then
#:<div Class="col-md-2 pr-0">
Else
#:<div Class="col-md-2 pl-0">
End If
<Label Class="col-form-label">#Session("FromRecvdDate")</label>
</div>
<div class="col-md-3">
<div class="inputWithIcon inputIconBg">
<i class="fa fa-calendar fa-lg"></i>
<input class="form-control form-control-sm font-weight-bold readonly" type="text" placeholder="dd/mm/yyyy"
name="fromrecvdate" id="fromrecvdate" style="width:100%" maxlength="12" />
</div>
</div>
<div class="col-md-2"></div>
<div class="col-md-2">
<label Class="col-form-label">#Session("UptoRecvdDate")</label>
</div>
<div class="col-md-3">
<div class="inputWithIcon inputIconBg">
<i class="fa fa-calendar fa-lg"></i>
<input type="text" class="form-control form-control-sm font-weight-bold readonly" placeholder="dd/mm/yyyy"
name="uptorecvdate" id="uptorecvdate" style="width:100%" maxlength="12" />
</div>
</div>
</div>
<div class="row pt-3">
#If Session("Lang") = "E" Then
#:<div Class="col-md-12 text-right">
Else
#:<div Class="col-md-12 text-left">
End If
<button type="submit" name="BtnCntList" class="btn btn-info">
<i class="fa fa-search"></i>
#Session("BtnCntList")
</button>
</div>
</div>
</div>
<div class="col-md-1"></div>
</div>
<div class="row pt-3">
<div class="col-md-12">
#If ViewBag.RowCount > 0 Then
#:<table id="cntlist" class="table-responsive table table-bordered table-hover table-lightfont table-condensed">
#:<thead class="thead-light">
#:<th>#Session("tdcontainerno")</th>
#:<th>#Session("tdbolnumber")</th>
#:<th>#Session("tdarrivaldate")</th>
#:<th>#Session("tdrecvddate")</th>
#:<th>#Session("tdsku")</th>
#:<th>#Session("tdagent")</th>
#:<th>#Session("tdlot")</th>
#:<th>#Session("tdstatus")</th>
#:<th></th>
#:</thead>
#:<tbody>
#For Each row As System.Data.DataRow In Model.Rows
#:<tr>
For Each cell In row.ItemArray
#:<td>#cell.ToString</td>
Next
#:<td><i class="fa fa-file-text-o"></i></td>
#:</tr>
Next
#:</tbody>
#:</table>
End If
</div>
</div>
following is the HTML code for modal
<div id="cntdetail" class="modal show fade" data-backdrop="static" role="dialog">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h6>#Session("CntDetails")</h6>
</div>
<div class="modal-body">
<input type="text" name="containerno" />
<input type="text" name="lot" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">
<i class="fa fa-close"></i>
Close
</button>
</div>
</div>
</div>
</div>
following is the JavaScript for event firing for modal show
<script>
$(function () {
$('#cntdetail').on('show.bs.modal', function (e) {
alert("a");
});
});
</script>
Try activating the modal via javascript using class instead of data-target.
$(".yourModalClassHere").click(() => {
$('#cntdetail').modal('show');
})
$('#cntdetail').on('show.bs.modal', function (e) {
alert("a");
});

appended div coming out of the form

Here div is coming out of the form, i want to show the appended div inside the update_new_1 but the div is coming out of the form.Here is my code
var maxAppend = 0;
$(document).on('click', '.update_more', function() {
var u_id = $(this).attr("u_id");
var add_new = $('<div class="form-group" style="margin-bottom: 0px">\n\
<label for="field-1" class="col-sm-4 control-label">Document</label>\n\
<div class="col-sm-5">\n\
<div class="fileinput fileinput-new" data-provides="fileinput">\n\
<span class="btn btn-default btn-file"><span class="fileinput-new" >Select file</span><span class="fileinput-exists" >Change</span><input type="file" name="files[]" ></span> <span class="fileinput-filename"></span>×</div></div>\n\<div class="col-sm-2">\n\<strong>\n\
<i class="fa fa-times"></i> Remove</strong></div>');
maxAppend++;
var resil = $(this).closest("#update_new_" + u_id).append(add_new);
});
<form method="post" class="form_1" action="" enctype="multipart/form-data">
<div id="update_new_1" class="update_new_1 item-row">
<div class="form-group mb0" style="margin-bottom: 0px">
<label for="field-1" class="col-sm-4 control-label">Other Document</label>
<div class="col-sm-5">
<div class="fileinput fileinput-new" data-provides="fileinput">
</div>
<div id="msg_pdf" style="color: #e11221"></div>
</div>
<div class="col-sm-3">
<strong>
<a href="javascript:void(0);" id="update_more" u_id="1" class="addCF item-row-click update_more">
<i class="fa fa-plus">
</i>
Add More</a>
</strong>
</div>
</div>
</div>
<div class="modal-footer">
<img src="<?php echo base_url();?>assets/resources/ajax-loader.gif" id="ajaxIndicator" style="display: none; margin-right: 10px" />
<input type="submit" id="btnSubmit" class="btn btn-primary" style="font-weight: bold" value="Edit Details" />
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<!-- <button type="button" class="btn btn-primary">Save changes</button> -->
</div>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Javascript - How to pass data from table into select options in modal?

Sorry for my bad english before. I have already pass data to a modal bootstrap. and already have successed passing data to an input in modal. but i dont know how to pass into a select option in modal.
how to do that? and displaying in select option with data.
Thanks in advance
here some of my code:
Get data from table:
<a href="javascript:;"
data-id="<?php echo $s1['sub_menuid']?>"
data-mainid="<?php echo $s1['main_menuid']?>"
data-nama="<?php echo $s1['nama_submenu']?>"
data-link="<?php echo $s1['link']?>"
data-icon="<?php echo $s1['icon']?>"
class="green" data-toggle="modal" data-target="#modal-edit" data-rel="tooltip" title="Edit">
<i class="ace-icon fa fa-pencil bigger-130"></i>
</a>
passing into modal via javascript
$('#modal-edit').on('show.bs.modal', function (event) {
var div = $(event.relatedTarget) // Tombol dimana modal di tampilkan
var modal = $(this)
// Isi nilai pada field
modal.find('#sub_menuid').attr("value",div.data('id'));
modal.find('#main_menuid').attr("value",div.data('mainid'));
modal.find('#nama_submenu').attr("value",div.data('nama'));
modal.find('#link').attr("value",div.data('link'));
/*modal.find('#icon').attr("value",div.data('icon'));*/
});
modal-edit:
<div aria-hidden="true" aria-labelledby="ModalLabel" role="dialog" tabindex="-1" id="modal-edit" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
<h4 class="modal-title"><b>Edit Sub Menu Level 1</b></h4>
</div>
<form class="form-horizontal" id="form-edit" action="<?php echo base_url('sub_menu_level_1/edit')?>" method="post" enctype="multipart/form-data" role="form">
<div class="modal-body">
<div class="form-group">
<label class="col-md-3 col-sm-2 control-label">Nama Sub Menu</label>
<div class="col-md-8">
<input type="hidden" id="sub_menuid" name="sub_menuid">
<input type="text" id="nama_submenu" class="form-control" name="nama_submenu" placeholder="Nama menu">
</div>
</div>
<div class="form-group">
<label class="col-md-3 col-sm-2 control-label">Pilih Main Menu</label>
<div class="col-md-8">
<select class="form-control" id="main_menuid" name="main_menuid">
<option value=""></option>
<?php foreach($main_menu as $mm) { ?>
<option value="<?php echo $mm['main_menuid']?>"><?php echo ucwords($mm['nama_mainmenu'])?></option>
<?php } ?>
</select>
</div>
</div>
<div class="form-group">
<label class="col-md-3 col-sm-2 control-label">Link</label>
<div class="col-md-8">
<input type="text" id="link" class="form-control" name="link" placeholder="link">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning" data-dismiss="modal"> Batal</button>
<button id="btn-submit-edit" class="btn btn-info" type="submit"> Simpan </button>
</div>
</form>
</div>
</div>
</div>
<!-- END Modal edit -->
use
modal.find("#main_menuid").val(div.data('mainid'));
here's a sample.
$('#modal-edit').on('show.bs.modal', function (event) {
var div = $(event.relatedTarget) // Tombol dimana modal di tampilkan
var modal = $(this)
// Isi nilai pada field
modal.find('#sub_menuid').attr("value",div.data('id'));
modal.find("#main_menuid").val(div.data('mainid'));
modal.find('#nama_submenu').attr("value",div.data('nama'));
modal.find('#link').attr("value",div.data('link'));
/*modal.find('#icon').attr("value",div.data('icon'));*/
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<a href="javascript:;"
data-id="1"
data-mainid="3"
data-nama="abcd"
data-link="abcd"
data-icon="abcd"
class="green" data-toggle="modal" data-target="#modal-edit" data-rel="tooltip" title="Edit">
<i class="ace-icon fa fa-pencil bigger-130"></i>click me
</a>
<div aria-hidden="true" aria-labelledby="ModalLabel" role="dialog" tabindex="-1" id="modal-edit" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
<h4 class="modal-title"><b>Edit Sub Menu Level 1</b></h4>
</div>
<form class="form-horizontal" id="form-edit" action="<?php echo base_url('sub_menu_level_1/edit')?>" method="post" enctype="multipart/form-data" role="form">
<div class="modal-body">
<div class="form-group">
<label class="col-md-3 col-sm-2 control-label">Nama Sub Menu</label>
<div class="col-md-8">
<input type="hidden" id="sub_menuid" name="sub_menuid">
<input type="text" id="nama_submenu" class="form-control" name="nama_submenu" placeholder="Nama menu">
</div>
</div>
<div class="form-group">
<label class="col-md-3 col-sm-2 control-label">Pilih Main Menu</label>
<div class="col-md-8">
<select class="form-control" id="main_menuid" name="main_menuid">
<option value="1">val1</option>
<option value="2">val2</option>
<option value="3">val3</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-md-3 col-sm-2 control-label">Link</label>
<div class="col-md-8">
<input type="text" id="link" class="form-control" name="link" placeholder="link">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning" data-dismiss="modal"> Batal</button>
<button id="btn-submit-edit" class="btn btn-info" type="submit"> Simpan </button>
</div>
</form>
</div>
</div>
</div>

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>

How to pass a query string to a bootstrap modal popup in php

I want to open a particular record in modal pop up for that i want to use query string to pass id to that modal popup which is on the same page after opening and displaying the data user can edit it and save it.
My code is as follows :
<a class="btn btn-info" data-toggle="modal" data-target="#myModalDetail" href="#myModalDetail"> <i class="fa fa-edit"></i> </a>
<div class="modal fade" id="myModalDetail">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Edit Products Details</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-lg-12">
<form role="form" name="Insertdb" method="post" action="Insert_code/edit-products.php">
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label>Product Name</label>
</div>
</div>
<div class="col-lg-6">
<input class="form-control" name="prodName" value="<?=$prodPrice ?>">
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label>Product Price</label>
</div>
</div>
<div class="col-lg-6">
<input class="form-control" name="prodPrice" placeholder="Enter product price">
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label>Product Type</label>
</div>
</div>
<div class="col-lg-6">
<input class="form-control" name="productType" placeholder="Enter product type">
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<input name="button1" type="submit" class="btn btn-primary">
</form>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
</div>
As far i can understand your question, you are having problem in passing the id to Modal, if yes, then you can do the following:
In your a-href code use data-id:
<a class="btn btn-info open_modal" data-toggle="modal" data-id="<?php echo productid;?>" data-target="#myModalDetail" href="#myModalDetail"> <i class="fa fa-edit"></i> </a>
Javascript:
$(document).on("click", ".open_modal", function () {
var product_id = $(this).data('id');
});

Categories