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);
}
Related
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.
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.
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>
I have a list of messages returned from a server and i'm using angular to template those messages into rows in a table. That all works fine, but i want to have it so when you click the row a modal pops up with that rows information. Unfortunately angular seems to completely ignore hidden elements even though the modal is within the app and controller namespace (not sure if namespace is the proper term). I have googled around and found a BUNCH of fixes for input fields but none for just simple binding. Heres my code.
HTML (Table)
<div class="ui modal">
<div class="header">Message</div>
<div class="content" style="background: none">
<div><strong>Sent: </strong>[[ currentMessage.sent_at ]]</div>
<div><strong>From: </strong>[[ currentMessage.email ]]</div>
<div><strong>Phone: </strong>[[ currentMessage.phone || 'N/A' ]]</div>
<div><strong>Subject: </strong>[[ currentMessage.subject ]]</div>
<div style="margin-top: 10px">
<h1>Message</h1>
[[ currentMessage.body ]]
</div>
</div>
</div>
JavaScript
$('.modal.ui').modal();
var app = angular.module('messages', [], function($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
});
app.controller('MessagesCtrl', function($scope, $http) {
$scope.currentMessage = {};
$http.get('{{ route('message.index') }}').then(function(resp) {
$scope.messages = resp.data.messages;
});
$scope.show = function(message) {
$scope.currentMessage = message;
}
});
HTML (All)
<div style="padding: 10px" data-ng-app="messages" data-ng-controller="MessagesCtrl">
<table class="table ui celled striped">
<thead>
<tr style="text-align: center">
<th class="collapsing">Email</th>
<th class="collapsing">Phone</th>
<th>Subject</th>
<th style="width: 100px">Options</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="message in messages | orderBy:['viewed', 'created_at']" class="message">
<td>[[ message.email ]]</td>
<td>[[ message.phone || 'N/A' ]]</td>
<td>[[ message.subject ]]</td>
<td>
<i class="icon reply"></i>
<i class="icon unhide" data-ng-click="show(message)"></i>
<i class="icon trash" data-ng-click="destroy(message)"></i>
</td>
</tr>
<tr>
<td colspan="4" style="text-align: center">
<strong style="font-size: 1.5em">No messages</strong>
</td>
</tr>
</tbody>
</table>
<div class="ui modal">
<div class="header">Message</div>
<div class="content" style="background: none">
<div><strong>Sent: </strong>[[ currentMessage.sent_at ]]</div>
<div><strong>From: </strong>[[ currentMessage.email ]]</div>
<div><strong>Phone: </strong>[[ currentMessage.phone || 'N/A' ]]</div>
<div><strong>Subject: </strong>[[ currentMessage.subject ]]</div>
<div style="margin-top: 10px">
<h1>Message</h1>
[[ currentMessage.body ]]
</div>
</div>
<div class="actions">
<a class="ui button green icon mini labeled">
<i class="icon reply"></i>
Reply
</a>
<button class="ui button red icon mini labeled">
<i class="icon trash"></i>
Delete
</button>
</div>
</div>
This is full example: i used bootstrap for open modal
<!doctype html>
<html ng-app="messages" ng-controller="MessagesCtrl">
<head>
<link href="/Content/bootstrap.css" rel="stylesheet" />
<script src="/Scripts/jquery-2.1.4.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/angular.js"></script>
</head>
<body>
<div>
<table class="table table-bordered">
<thead>
<tr style="text-align: center">
<th class="collapsing">Email</th>
<th class="collapsing">Phone</th>
<th>Subject</th>
<th style="width: 100px">Options</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="message in messages" class="message">
<td>{{ message.email }}</td>
<td>{{ message.phone || 'N/A' }}</td>
<td>{{ message.subject }}</td>
<td>
<button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal" ng-click="openModal(message)">
show message
</button>
<button type="button" class="btn btn-danger btn-sm" data-toggle="modal" data-target="#myModal">
remove message
</button>
</td>
</tr>
<tr>
<td colspan="4" style="text-align: center">
<strong style="font-size: 1.5em">No messages</strong>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<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>
<h4 class="modal-title" id="myModalLabel">Message</h4>
</div>
<div class="modal-body">
<div><strong>Sent: </strong>{{ currentMessage.sent_at }}</div>
<div><strong>From: </strong>{{ currentMessage.email }}</div>
<div><strong>Phone: </strong>{{ currentMessage.phone || 'N/A' }}</div>
<div><strong>Subject: </strong>{{ currentMessage.subject }}</div>
<div style="margin-top: 10px">
<h1>Message</h1>
{{ currentMessage.body }}
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Delete</button>
<button type="button" class="btn btn-primary">Reply</button>
</div>
</div>
</div>
</div>
<script>
angular.module("messages", []);
angular.module("messages").controller("MessagesCtrl", function($scope) {
$scope.messages = [{
email: "x#x.com",
phone: "092222222",
subject: "test",
sent_at: "2015/15/15",
body: "your message"
}];
$scope.openModal = function(message) {
$scope.currentMessage = message;
}
});
</script>
</body>
</html>
I figured out the problem. For those using semantic ui (and perhaps bootstrap) when the modal is initialized a script will move it from where you placed it (in the app directive) to the the bottom of the body tag. Like #Maher did in his example make the entire body the app and controller to fix this.
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