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
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
Hi When I use boostrap modal box ; Than php code takes only the first item of my table..;
$sonuc['proje_ismi'] is working normal in button and change everyline as database:
But when I put it on bootstarp modal box, it only takes the first item. Why is that?
And how can I solve it with a simple way?
Thanks for advices.
<td>
<button type="button" id="view_files" name="view_files" data-name="'.$proje_ismi.'" data-toggle="modal" data-target="#myModal" class="view_files btn btn-default btn-sm"><font size="2" >
<?php echo $sonuc['proje_ismi'] ?></font></button>
<div class="modal fade" id="myModal" >
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Proje Dosyaları</h4>
</div>
<div class="modal-body">
<table class="table table-bordered table-striped">
<tr>
<th>Dosya İsimleri </th>
</tr>
<tr>
<th>
<div class="modal-body" id="file_list">
<?php
$projeler = $sonuc['proje_ismi'] ;
echo $projeler;
$folder = array_filter(glob(''.$projeler.'/*.*'));
print_r($folder);
?>
</th>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</td>
For information:
I couldnt solve the problem with bootsrap but I solved problem with lightbox css...
I download lightbox2-2.11.1 css documant and did the following at the web site below:
https://lokeshdhakar.com/projects/lightbox2/#help
I have a table which contains a single input control for each item in my model. For this example let's assume my model contains 3 items. I am able to see three rows each containing a single input and button control. I am able to click on the edit button which triggers a modal dialog box that contains the value of the input control for the row clicked. I am able to edit this value in the modal dialog but I am not sure HOW to take that updated value and update the input control for the row clicked. I am thinking I will need some unique identifier for each row or input control in each row in order to in turn update that value.
Main form
<form id="myForm">
<table id="myTable">
<thead>
<tr>
<th>Column A</th>
</tr>
</thead>
<tbody>
#if (Model.Items.Count > 0)
{
for(int 1 = 0; i < Model.Items.Count(); i++)
{
<tr>
<td>
<div class="input-group">
<input name="itemName" class="form-control" disabled="disabled" value="#Model.Items[1].Name">
<span class="input-group-btn">
<button name="editItem" type="button" class="open-editItem btn btn-md btn-primary" data-toggle="modal" data-target="#editItem" title="edit item" data-id="#Model.Item[i].Name"><i class="fa fa-pencil"></i></button>
</span>
</div>
</td>
</tr>
}
}
</tbody>
</table>
</form>
Modal popup
<div id="editItem" class="modal fade in" tabindex="-1" role="dialog" style="display: none;">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header bg-primary">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title"><i class="fa fa-pencil"></i> Item Name</h4>
</div>
<div class="modal-body">
<label style="margin-right: 10px;">Item Name</label><input maxlength="100" style="width:100%;" type="text">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="closeEditItem btn btn-primary" data-dismiss="modal" id="btnSaveItem" onclick="updateName();">Save changes</button>
</div>
</div>
</div>
</div>
My JavaScript functions
<script type="text/javascript">
$(document).on("click", ".open-editItem", function () {
var item = $(this).data('id');
$(".modal-body #editItem").val(item);
});
function updateName() {
var updatedItemName = $(".modal-body #editItemName").val();
alert(updatedItemName);
$(".input-group #itemName").val(updatedItemName); // not working, is there a better or different way?
}
</script>
You have to use window object in order to use a global variable.
Global variables are properties of the window object.
Also, I used closest method in order to retain control from which it was called.
That's final code:
$(document).on("click", ".open-editItem", function () {
window.input=$(this).closest('.input-group').find('input');
var item = $(this).data('id');
$(".modal-body #editItem").val(item);
});
function updateName() {
var updatedItemName = $(".modal-body").find('input').val();
alert(updatedItemName);
$(window.input).val(updatedItemName);
}
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?
I am using Twitter Bootstrap Modal as a search box.There are 3-4 divs from where User can call the modal and do the search. Search results are shown in table format on modal itself. When user clicks a row from search result, I have to take the selected row data and populate the parent div fields.How would I determine the respective parent div which called search modal?
Code
//initiates the modal
$('#searchClient').click(function() {
clearTable();
$('#searchModal').modal('toggle');
});
//reads data from clicked row
$("#clientSearchResult").delegate("tr", "click", function(){
alert($(this).html());
//??Find out the parent div and populate selected data
});
HTML
<div class="modal fade" id="clientSearchModal">
<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">Client Search</h4>
</div>
<div class="modal-body">
<div class="form-inline">
<input type="text" id="searchClientName" placeholder="Client Name">
<input type="text" id="searchNumber" placeholder="Number">
<button type="button" class="btn btn-primary" id="doClientSearch">Search</button>
</div>
</div>
<div class="modal-footer">
<table class="table table-hover table-bordered" id="clientSearchResult">
<thead>
<tr>
<th>Name</th>
<th>Tax Id</th>
<th>Status</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
Not entirely sure what you're doing, but it sounds like you are trying to figure the source of the click event. If "searchClient" is the "parent divs" you are talking about, you should change their IDs to classes (e.g. <div class="searchClient">)
You could then do something like:
var parentClicked; //i'm global!
$('.searchClient').click(function(e) {
parentClicked = e.target;
///etc....
});