Developers, I am developing a School Management system I put many data in data base and i also able to fetch each data in table
<table class="table table-hover table-bordered">
<thead>
<tr>
<th>Sr.</th>
<th>Pic</th>
<th>Registration Number</th>
<th>Name</th>
<th>Father Name</th>
<th>Class</th>
<th>CNIC</th>
<th>More</th>
</tr>
</thead>
<tbody>
<?php $q=mysqli_query($dbc,"SELECT * FROM students WHERE class='Play Group'");
if ($r=mysqli_num_rows($q)>0 )?>
<?php while ($r=mysqli_fetch_array($q)): ?>
<tr>
<td><?=$r['students_id']?></td>
<td><img width="40" class="img img-circle" src="uploads/<?=$r['students_pic'];?>" alt=""></td>
<td>LSPS-10<?=$r['students_reg']?></td>
<td><?=$r['students_name']?></td>
<td><?=$r['fname']?></td>
<td><?=$r['class']?></td>
<td><?=$r['cnic']?></td>
<td>
<a class="label label-primary" data-toggle="modal" data-target="#modal-id">View</a>
<div class="modal fade" id="modal-id">
<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">Full Record</h4>
</div>
<div class="modal-body">
<h1>Ok</h1>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</td>
</tr>
<?php endwhile ?>
</tbody>
</table>
but i fetech some of columns of that data now i want to fetch the rest of the columns in the modal which created dynamically in other words i fetch half data in table columns and others data in table inside modal my problem is how to fetch the rest of column in modal parallel to the data means when someone trigger modal all the data of clicked id modal is fetched which is fetched already.
Related
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 am working with django templates, there is a part where I have a modal which has various textboxes in the form of a table. I need to send the data from parent web page to next web page in the form of a python list and display the data on parent page in a systematic form like table. Presently i get data to parent page using:
$('#save-button').text()
using text(), the data I get is:
Capacity
23
extra Capacity
34
threshold
44
The modal is as:
<div class="modal fade" id="Firstmodal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add values</h4>
</div>
<div class="modal-body">
<p>
<div id="table" class="table-editable">
<table class="table table-striped" id="tblone">
<thead id="tblHead">
<tr>
<th>Parameters</th>
<th>Add values</th>
</tr>
</thead>
<tbody id="onetbl">
<tr><td>Capacity</td>
<td contenteditable="true"></td></tr>
<tr><td>extra Capacity</td>
<td contenteditable="true"></td></tr>
<tr><td>threshold</td>
<td contenteditable="true"></td> </tr>
</tr>
</tbody>
</table>
<button id="btnSave-one" onClick="reply_click(this)" class="btn btn-primary">Save Changes</button>
<p id="export"></p>
</div>
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
How can i convert the data from modal to list, so that i can pass to next web page and display on parent page as a table as well? Thanks.
Guys i'm generating a set of data in a table after som set of calculation.. as soon as user clicks save button excel file with that data must be generated for downloading..
What is the php code for that ..
guys the data is not retrieved from database...its being displayed after a set of calculation as been performed.
Since i dont have any idea ive not posted any related code...sry for that..
below is how my table looks like
https://ibb.co/mUMOrQ
below is my table code
<div id="myModal" class="modal fade in">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span></a>
<div class="table-title">
<h3>CUF Table</h3>
</div>
<table class="table-fill" id="tabid">
<thead>
</div>
<div class="modal-body">
<tr>
<th class="text-left">TimeStamp</th>
<th class="text-left">CUF</th>
</tr>
</thead>
<tbody class="table-hover">
<!--tr>
<td class="text-left" id="data"></td>
<td class="text-left" id="data1"></td>
</tr-->
</tbody>
</table>
</div>
<div class="modal-footer">
<div class="btn-group">
<button id="change-chart" class="btn btn-primary"><span class="glyphicon glyphicon-check"></span>Save</button>
</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Below is jquery that ive included to download the file
$("#BUTTON").click(function(){
$("#TABLE").table2excel({
// exclude CSS class
exclude: ".noExl",
name: "Data",
filename: "Data" //do not include extension
});
});
You can use one of the following
https://stackoverflow.com/a/38761185/5350773
http://www.jqueryscript.net/table/Export-Html-Table-To-Excel-Spreadsheet-using-jQuery-table2excel.html
I want to create a form that can get data and select it from pop up. currently, I have 2 sample data record on my database
the problem is, when I was click the select button at the first record, the button is succesfully called the jquery and filled the form, but when I selected second data, the button doesn't select the jquery script.
here my html pop up
<div id="search-form" class="modal hide" tabindex="-1" aria-hidden="false" style="display: none;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="blue bigger">Service</h4>
</div>
<div class="modal-body overflow-visible">
<table id="sample-table-1" class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>Service</th>
<th class="hidden-480">Action</th>
</tr>
</thead>
<tbody>
#foreach ($service as $service)
<tr>
<td>{{ $service->service_name }}</td>
<td>
<div class="hidden-phone visible-desktop btn-group">
<form method="get">
<a class="btn btn-mini btn-info" id="selected_search" onclick="" data-dismiss="modal" svc-id="{{$service->id}}">
<i class="icon-check"></i>
</a>
</form>
</div>
</td>
</tr>
#endforeach
</tbody>
</table>
</div>
and here my jquery script
<script type="text/javascript">
$(document).ready(function(){
$('#selected_search').on('click', function(e){
alert("test");
var id = $('#selected_search').attr('svc-id');
$.get("{{ url('customer/service')}}/"+id, function(data){
console.log(id);
console.log(data);
$('#service').empty();
$.each(data, function (index, element){
$('#service').val(element.service_name);
$('#service_id').val(element.id);
});
});
});
});
</script>
and here my laravel controller
public function getservice($id){
$service = Service::find($id);
return response()->json([$service], 200);
}
I was trying to figure out how to pass a variable to a model. For example, I have a table that have lists of student. I want to click one of them and have a modal popup that is matching that student. So I obviously need to pass some how the id in the table to the model. This is all in Asp.net using razor. And then after having that model popup I would like to edit and resubmit which then would refresh the table. Perhaps even have a success message. I am using the bootstrap so I was thinking of using the alert to say Successfully Updated! or something.
here is the code. Please help me to resolve this issue.
<body>
<p>
#Html.ActionLink("Create New", "Create")
</p>
<div class="box-content">
<table class="table table-striped table-bordered bootstrap-datatable datatable">
<thead>
<tr>
<th>Name</th>
<th>DNIS </th>
<th>Created by</th>
<th>Created Date</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td> #Html.DisplayFor(modelItem => item.service_name)</td>
<td class="center"> #Html.DisplayFor(modelItem => item.dnis)</td>
<td class="center"> #Html.DisplayFor(modelItem => item.created_by) </td>
<td class="center"> #Html.DisplayFor(modelItem => item.date_time)</td>
<td class="center">
<a class="btn btn-success" href="~/Service/AssignSkillGroup/#item.service_name">
Add/Del SkillGroup
</a>
<a class="btn btn-info" href="~/Service/Edit/#item.service_name">
<i class="icon-edit icon-white"></i>
Edit
</a>
<a class="btn btn-danger" data-toggle="modal" data-id="#item.service_name" data-target="#myModal" >
<i class="icon-trash icon-white"></i>
Delete
</a>
</td>
</tr>
}
</tbody>
</table>
</div>
<span class="modal" id="myModal" role="dialog" style="height: 175px">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Are you sure to want to delete this service ? </h4>
</div>
<div class="modal-body">
<p>If you delete the service, Wrap-up codes will not appear for this service</p>
</div>
<div class="modal-footer">
<a class="btn btn-default" href="/Service/Delete/">
Delete
<a><button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> </a>
</a>
</div>
</div>
</span>
</body>
You can use bootstrap dialog event to achieve what you want :
//triggered when modal is about to be shown
$('#my_modal').on('show.bs.modal', function(e) {
//get id attribute of the clicked element (delete button)
var id = $(e.relatedTarget).data('id');
// do what you want with the id ..
});
You can make your modal like the following
<span class="modal" id="myModal" role="dialog" style="height: 175px">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" onclick="Close()" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Are you sure to want to delete this service ? </h4>
</div>
<div class="modal-body">
<p>If you delete the service, Wrap-up codes will not appear for this service</p>
</div>
<div class="modal-footer">
<a class="btn btn-default" id="del" >
Yes
</a>
<a class="btn btn-default" onclick="Close()">
No
</a>
</div>
</div>
</span>
The add the following script and call those methods through your delete button and pass the id to the script function.
<script>
function deleteFunction(id) {
$('#myModal').show();
var a = document.getElementById('del');
a.href = "/Service/Delete/" + id;
}
function Close()
{
$('#myModal').hide();
}
</script>