function add_items()
{
var ingrediants_name = $("input[name='hidden_name[]']").map(function(){return $(this).val();}).get();
mystat++;
var my=mystat;
console.log(my);
$('#ingrdiants_table').append('<tr> <th class="no">'+my+'</th><td ><select class="selectpicker input-xlarge" name="ingredients_name[]" id="ingredients_name[]" style="width:200px;" >\n\
\n\
\n\
</select>\n\
</td> <td><input type="text" name="ingrediant_quant[]" class="form-control"></td></tr>');
//var selecter = $("input[name='ingredients_name[]']").map(function(){return $(this).val();}).get();
var letters = "";
for (i = 0; i < my; i++)
{
for(j=0;j<ingrediants_name.length;j++)
{
//$("#ingredients_name[0]").append('<option>'+ingrediants_name[j]+'</option>');
letters += '<option>'+ingrediants_name[j]+'</option>';
}
document.getElementById("ingredients_name[0]").innerHTML = letters;
}
}
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content" style="width:700px;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<button class="btn btn-primary" type="button" name="add" onclick="add_items()">Add Ingredients</button>
</div>
<div class="modal-body">
<table id="ingrdiants_table" class="table table-bordered table-hover">
<thead>
<th>N</th>
<th>Ingrediant Name</th>
<th>Quantity</th>
</thead>
<tbody>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-default" id="pencat">save</button>
</div>
</div>
</div>
</div>
Please help me to resolve this. I am creating select option dynamically on click with append in java script. I have assigned select option id="name[]",now i want to assign option to all of select option box through append or something better. how can it work?
Related
I'm working on a piece of UI that involves a listing of rows in the database. Each row is editable, and when the edit button is clicked, my intent is to bring up a modal dialogue window with data preloaded in a form via AJAX for editing that specific row as shown in the following picture.
The following code shows a working setup you can play with.
jQuery(document).ready(function() {
// console.log('podcast episode list js loaded');
// jQuery('#editModal').modal('show');
});
function loadEditModal(rowID) {
console.log("Clicked row " + rowID + "\n");
//populate the content of the modal window
//jQuery('#editModal').modal('show');
modal1 = bootstrap.Modal.getOrCreateInstance('#editModal');
modal1.show();
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<div class="container">
<!-- table displaying contents of encoding queue -->
<div class="row">
<div class="table-responsive-xxl">
<table class="table table-hover table-sm">
<thead>
<tr>
<th scope="col">ID#</th>
<!-- episode_id -->
<th scope="col">Podcast</th>
<!-- podcast_code -->
<th scope="col">Title</th>
<th scope="col">Seq.</th>
<th scope="col">Status</th>
<!-- last_action -->
<th scope="col">Date</th>
<!-- last_action_date -->
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr>
<td>8</td>
<td>bw</td>
<td>Build a birdhouse</td>
<td>345</td>
<td>{"error":"none","message":"initial insert","status":"processing"}</td>
<td>2023-03-22</td>
<td class="text-end" style="white-space: nowrap">
<!-- <button disabled type="button" class="btn btn-outline-secondary btn-sm">Edit</button> -->
<button type="button" class="btn btn-outline-secondary btn-sm" data-bs-toggle="modal" onclick="loadEditModal(8)">Edit</button>
<!-- <button disabled type="button" class="btn btn-outline-secondary btn-sm">Republish</button> -->
<button type="button" class="btn btn-outline-secondary btn-sm">Republish</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- class="row" -->
<!-- modal for editing rows -->
<div class="row">
<div class="modal fade" id="editModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="editModalLabel" style="display: none;" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="editModalLabel">Modal title</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body" id="editModalBody">
this is where the body content goes...
</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>
</div>
</div>
However, I'm getting the following error in the js console every time the edit button is clicked to display the modal:
Uncaught TypeError: can't access property "backdrop", this._config is undefined
This appears to be due to the fact that I'm launching the modal via javascript with the onclick event. If I change the html and js slightly as follows, and use the "data-bs-target" property of the button to open the modal instead, it all works without js errors.
jQuery(document).ready(function() {
// console.log('podcast episode list js loaded');
// jQuery('#editModal').modal('show');
});
function loadEditModal(rowID) {
console.log("Clicked row " + rowID + "\n");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<!-- table displaying contents of encoding queue -->
<div class="row">
<div class="table-responsive-xxl">
<table class="table table-hover table-sm">
<thead>
<tr>
<th scope="col">ID#</th>
<!-- episode_id -->
<th scope="col">Podcast</th>
<!-- podcast_code -->
<th scope="col">Title</th>
<th scope="col">Seq.</th>
<th scope="col">Status</th>
<!-- last_action -->
<th scope="col">Date</th>
<!-- last_action_date -->
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr>
<td>8</td>
<td>bw</td>
<td>Build a birdhouse</td>
<td>345</td>
<td>{"error":"none","message":"initial insert","status":"processing"}</td>
<td>2023-03-22</td>
<td class="text-end" style="white-space: nowrap">
<!-- <button disabled type="button" class="btn btn-outline-secondary btn-sm">Edit</button> -->
<button type="button" class="btn btn-outline-secondary btn-sm" data-bs-toggle="modal" data-bs-target="#editModal" onclick="loadEditModal(8)">Edit</button>
<!-- <button disabled type="button" class="btn btn-outline-secondary btn-sm">Republish</button> -->
<button type="button" class="btn btn-outline-secondary btn-sm">Republish</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- class="row" -->
<!-- modal for editing rows -->
<div class="row">
<div class="modal fade" id="editModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="editModalLabel" style="display: none;" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="editModalLabel">Modal title</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body" id="editModalBody">
this is where the body content goes...
</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>
</div>
</div>
But I can't do it this way because I have to fetch the data to edit with AJAX and populate the body of the modal before I display it. Can anyone clue me in to what I need to do to eliminate the error?
This appears to be due to the fact that I'm launching the modal via javascript with the onclick event.
This is not correct.
The problem occurs because you are using the data-bs-toggle="modal" attribute without specifying what the target is.
If you try to remove the onclick attribute from the button the problem still exist.
<button type="button" class="btn btn-outline-secondary btn-sm" data-bs-toggle="modal">Edit</button>
Just remove the data-bs-toggle="modal" attribute from the edit button and use onclick only.
<button type="button" class="btn btn-outline-secondary btn-sm" onclick="loadEditModal(8)">Edit</button>
I hope it helps
I have a modal containing file uploader. I have a Add More button, which on click append a new file upload.
Here is my modal.
<div class="modal fade" id="quotationModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document" style="width: 400px;">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Quotation Upload</h5>
</div>
<form
method='post'
enctype='multipart/form-data'
id="quotationForm"
>
<div class="modal-body">
<table id="quotationModalTable" width="50%">
<tbody id="quotationTbody">
<tr>
<input type="text" value="randomValue" name="randomValue">
</tr>
<tr class="add_row">
<td id="no" width="5%">#</td>
<td width="75%"><input class="file" name='files[]' type='file' multiple/></td>
<td width="20%"></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">
<button class="btn btn-success btn-sm" type="button" id="add" title='Add new file'/>Add new file</button>
</td>
</tr>
</tfoot>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button class="btn btn-primary submit" name="btnQuotationSubmit" type='submit'>Upload</button>
</div>
</form>
</div>
</div>
</div>
Now when I try to submit form, I am not getting those files. This is my code for form submit.
$("#quotationForm").submit(function(e) {
let files = $('.file').val();
let formData = new FormData($("#quotationForm")[0]);
I want to use modal for representing additional data on my table row contennt for this reason i use this code below , but when i press button modal doesn't pops up and i don't see any error in my browser console , what should i add to make my code work?:
<script cam-script type="text/form-script">
$scope.myFunc = function() {
$('#myModal').modal('show');
};
</script>
<h2>My job List</h2>
<div>
<table style="width:100%;" class="table table-hover" >
<thead>
<tr>
<th style="width:80px; height:px;">chose</th>
<th style="width:140px;">id</th>
<th style="width:305px;">organizationNameEN</th>
<th style="width:250px;">cardNumber</th>
<th style="width:250px;"></th>
<th style="width:250px;"></th>
</tr>
</thead>
<tbody ng-repeat="item in arr" >
<tr>
<td><input style="width:25px; height:25px;" type="checkbox" ng-model="chekselct"
cam-variable-name="isItemSelected"
cam-variable-type="Boolean" /></td>
<td><input style="width:140px;" type="text" id="id" ng-model="item.id" readonly /></td>
<td><input style="width:305px;" type="text" id="organizationNameEN" ng-model="item.organizationNameEN" /></td>
<td><input style="width:305px;" type="text" id="organizationNameGE" ng-model="item.organizationNameGE" /></td>
<td><button type="button" class="btn btn-primary" style="height:30px" data-toggle="modal" data-target="#myModal">details</button></td>
<td><button ng-click="myFunc()" role="button" class="btn btn-large btn-primary">Detail</button></td>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content" ng-repeat="item in arr">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Details</h4>
</div>
<div class="modal-body">
<p ><label for="organizationNameEN"> organizationNameEN</label> : <input style="width:305px;" type="text" id="organizationNameEN" ng-model="item.organizationNameEN" /></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</tr>
</tbody>
</table>
</div>
You can open it without using angular. Replace your code ng-click="myFunc()" with data-toggle="modal" data-target="#myModal" ... It should work
try this on your button (the one with the ng-click="myFunc()"), it invokes modal without a need for explicit script.
<button role="button" class="btn btn-large btn-primary" data-toggle="modal" data-target="#myModal">Detail</button>
I am using tableToJson from here
I have the following modal window:
<div class="modal fade" id="myModalShopOrder" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add Batch</h4>
</div>
<div class="modal-body">
<label class="control-label">Designation:</label>
<div id='complaintProgress' style="position: relative;">
<input type="text" class="form-control" name="DesignationShopOrder" id="DesignationShopOrder">
</div><br>
<div class="well">
<table class="table table-hover table-striped table-responsive table-bordered" id="shopOrderTable" >
<thead>
<tr>
<th data-override="ShopOrderDes">Designation</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
<button type="button" onclick="addShopOrder();" class="btn btn-success">Submit</button>
</div>
</form>
</div>
</div>
</div>
And there is the script that I am running to add the item to the table:
<script>
function addShopOrder(){
var designation = document.getElementById('DesignationShopOrder').value;
var table = document.getElementById("shopOrderTable").getElementsByTagName('tbody')[0];
var row = table.insertRow(-1);
row.hidden = false;
var cell1 = row.insertCell(0);
cell1.innerHTML = designation;
var shopOrders = $('#shopOrderTable').tableToJSON();
shopOrders.pop();
var infoRec = new Array();
infoRec = JSON.stringify(shopOrders);
document.getElementById('shopOrderSender').value = infoRec;
}
</script>
I click the button to add, and my tableToJson array is empty!
If I click twice, I get the array with data!
Why I need to click twice? If I have one line in table, I want to convert it too!
There are the images with the firebug details inside the red rectangle!
Thanks in advance
Probally due to "shopOrders.pop();" you are removing the last item, if you only have one you are removing it
I want to edit my data from table(jsp and bootstrap), if i click on a certain edit button, a modal dialog is shown, that already has the values of the row selected. So the bootstrap dialog should contain the values of row that i clicked on.
Table :
<table id="example" class="table table-bordered table-striped">
<thead>
<tr>
<td >Type</td>
<th>Marque</th>
<th>Date fin</th>
<th>Date prochaine</th>
<th>Résoudre
</th>
</tr>
</thead>
<tbody>
<s:iterator value="%{#session['liste']}" status="userStatus">
<tr>
<td class="type" ><s:property value="type" /></td>
<td><s:property value="marque" /></td>
<td><s:date name="dt_fin" format="dd/MM/yyyy"/></td>
<td><s:date name="dt_proch" format="dd/MM/yyyy" /></td>
<td><button class="btn btn-info" onclick="resoudre()" > Résoudre</button>
</td>
</tr>
</s:iterator>
</tbody>
</table>
model :
<!-- COMPOSE MESSAGE MODAL -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-hidden="true" >
<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"><i class="fa fa-envelope-o"></i> Ajouter assurance</h4>
</div>
<s:form enctype="multipart/form-data" theme="bootstrap">
<div class="modal-body">
<div class="form-group" >
<div class="form-group"><div class="row">
<div class="col-lg-offset-3 col-md-5">
<s:textfield name="type" class="type" cssClass="form-control" label="type" id="type"></s:textfield>
</div></div>
</div></div>
<button type="submit" id="submit" class="btn btn-primary pull-left"><i class="fa fa-envelope"></i> Enregistrer</button>
</div>
</s:form>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
I try with this js code :
function resoudre() {
var myModal = $("#myModal");
// now get the values from the table
var type= $(this).closest("tr").find("td.type").html();
alert(type);
// and set them in the modal:
$('.type', myModal).val(type);
// and finally show the modal
myModal.modal({ show: true });
}
My question is how can i pass values from table to model by clicking on etit button ?
You need to pass the element inside the function call:
onclick="resoudre(this)"
And in your function, use the element passed as parameter:
function resoudre(elem) {
var type= $(elem).closest("tr").find("td.type").html();
}
DEMO