I would like to display the content of my route in a modal. To do this, I call the modal with the button and want to load the data via ajax in the modal. I always get the error message: Undefined variable: tasks
I have included the modal in the index page, because otherwise I can not rouse it with the button. Where is the mistake?
Button
<li><a href="{{route('todolists.show', $list->id)}}" id="show-task-modal" class="btn btn-success btn-xs white hover-hidden">
<i class="fa fa-plus"></i> Erstellen
</a>
</li>
Controller
public function show($id)
{
$todolists = Todolists::find($id);
$tasks = $todolists->tasks()->orderBy('created_at', 'dsc')->get();
return view('elements.addTask', compact('tasks'));
}
route
Route::get('/tasks/{id}', 'Admin\TaskController#show')->name('todolists.show');
function
$(document).ready(function () {
$('body').on('click', '#show-task-modal', function(event) {
event.preventDefault();
var anchor = $(this),
url = anchor.attr('href'),
title = anchor.data('title');
$("#task-modal-subtitle").text(title);
$.ajax({
url: url,
dataType: 'html',
success: function(response) {
$('#task-table-body').html(response);
},
error: function (data){
console.log(data);
}
});
$('#task-modal').modal('show');
});
});
Modal
<div class="modal fade" id="task-modal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg">
<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">Todo List</h4>
<p>of <strong>To do List 1</strong></p>
</div>
<div id="task-table-body" class="modal-body">
<div class="panel panel-default">
<table class="table">
<thread>
<td width="50" style="vertical-align: middle;">
<label class="checkbox">
<input type="checkbox" name="check_all" id="check-all">
<i style="top: -12px;"></i>
</label>
</td>
<td>
<div class="fancy-form">
<i class="fa fa-tasks"></i>
<input type="text" class="form-control" placeholder="Neuer Task">
</div>
</td>
</thread>
<tbody>
#foreach ($tasks as $task)
<tr id="task-{{$task->id}}">
<td>
<label class="checkbox">
<input type="checkbox">
<i style="top: -12px;"></i>
</label>
</td>
<td class="task-item done">
{{$task->title}}
<div class="row-buttons">
<a href="#" class="btn btn-xs btn-danger">
<i class="glyphicon glyphicon-remove"></i>
</a>
</div>
</td>
</tr>
#endforeach
</tbody>
</table>
</div>
</div>
<div class="modal-footer clearfix">
<div class="pull-left">
All
Active
Completed
</div>
<div class="pull-right">
<small>3 items left</small>
</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Your ajax call is returning a view with tasks. $tasks can only be used on that view.
Your ajax call should not return view. It should just return data in json format.
return response()->json(['tasks' => $tasks]);
Then use jquery to loop from tasks array and make html from it and place in modal.
OR
If you still want to return view with tasks from ajax then your modal should not contain foreach loop (remove it). It should contain that view that you are returning from controller (addTask) and that view should have foreach loop to render $tasks
<div> ..#include('addTasks') </div> //modal
Read this also may be it can help.
You need to take all the html and code below the #task-table-body out of your modal that builds the table and put it in your elements.addTask view.
Then use it to build your table and return it as html with the render commands.
$view = view('elements.addTask', compact('tasks'))->render();
return response()->json(['html'=>$view]);
And replace it to the #task-table-body like you're already doing.
success: function(response) {
$('#task-table-body').html(response.html);
},
Put this is in your elements.addTask view (or maybe a different one).
<div class="panel panel-default">
<table class="table">
<thread>
<td width="50" style="vertical-align: middle;">
<label class="checkbox">
<input type="checkbox" name="check_all" id="check-all">
<i style="top: -12px;"></i>
</label>
</td>
<td>
<div class="fancy-form">
<i class="fa fa-tasks"></i>
<input type="text" class="form-control" placeholder="Neuer Task">
</div>
</td>
</thread>
<tbody>
#foreach ($tasks as $task)
<tr id="task-{{$task->id}}">
<td>
<label class="checkbox">
<input type="checkbox">
<i style="top: -12px;"></i>
</label>
</td>
<td class="task-item done">
{{$task->title}}
<div class="row-buttons">
<a href="#" class="btn btn-xs btn-danger">
<i class="glyphicon glyphicon-remove"></i>
</a>
</div>
</td>
</tr>
#endforeach
</tbody>
</table>
</div>
Related
I have a strange issue. Maybe someone has encountered similar case. I have a modal window having a dual select list that pops up by a button click. List items can not be selected (activated by mouse click) on the 1st, 3th, 5th.. times of modal opening but selected only on the 2nd, 4th, 6th.. times of modal opening. I wonder if it is a js conflict issue. Any help will be appreciated. Here is the code:
#model IEnumerable<MajorAdmin.ViewModel.DList>
#{
ViewBag.Title = "List";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="">
<div class="row">
<div class="col-md-12">
<div class="x_panel">
<div class="x_content">
<table id="datatable-buttons" class="table table-striped table-bordered">
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td>
<a>#item.ev</a>
</td>
<td>
<a id="#item.id" name="edit" data-toggle="modal" data-target="#editpartialmodaldiv" class="btn btn-info btn-xs"><i class="fa fa-pencil-square-o"></i> Edit </a>
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
</div>
</div>
<div id="editpartialmodaldiv" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-hidden="true"></div>
</div>
<script src="~/Content/vendors/jquery/dist/jquery.min.js"></script>
<script type="text/javascript">
$("a[name='edit']").click(function () {
var selectedid = this.id;
var data = JSON.stringify({
'selecteditem': selectedid,
});
jQuery.ajax({
type: "POST",
url: "#Url.Action("GetID")",
dataType: "json",
contentType: "application/json; charset=utf-8",
data: data,
success: function (json) {
$("#editpartialmodaldiv").load('#Url.Action("Edit")');
},
failure: function (errMsg) {
alert(data);
}
});
});
</script>
<div class="modal-dialog modal-lg">
<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">Edit</h4>
</div>
<div class="modal-body">
<div role="main">
<div class="">
<div class="clearfix"></div>
<div class="dual-list list-left col-md-5">
<div class="well text-right">
<div class="row">
<div class="col-md-10">
<div class="input-group">
<span class="input-group-addon glyphicon glyphicon-search"></span>
<input type="text" name="SearchDualList" class="form-control" placeholder="search" />
</div>
</div>
<div class="col-md-2">
<div class="btn-group">
<a class="btn btn-default selector" title="select all"><i class="glyphicon glyphicon-unchecked"></i></a>
</div>
</div>
</div>
<ul id="sortable1" class="list-group">
#foreach (var item in Model) { if (item.evl == null) {
<li class="list-group-item"><img src="~/Content/images/img.jpg" class="avatar" style="max-height:30px" alt="Avatar">#item.emp</li>
} }
</ul>
</div>
</div>
<div class="list-arrows col-md-1 text-center">
<button class="btn btn-default btn-sm move-left">
<span class="glyphicon glyphicon-chevron-left"></span>
</button>
<button class="btn btn-default btn-sm move-right">
<span class="glyphicon glyphicon-chevron-right"></span>
</button>
</div>
<div class="dual-list list-right col-md-5">
<div class="well">
<div class="row">
<div class="col-md-2">
<div class="btn-group">
<a class="btn btn-default selector" title="select all"><i class="glyphicon glyphicon-unchecked"></i></a>
</div>
</div>
<div class="col-md-10">
<div class="input-group">
<input type="text" name="SearchDualList" class="form-control" placeholder="search" />
<span class="input-group-addon glyphicon glyphicon-search"></span>
</div>
</div>
</div>
<ul id="sortable2" class="list-group text-right">
#foreach (var item in Model) { if (item.emp == null) {
<li class="list-group-item"><img src="~/Content/images/img.jpg" class="avatar" style="max-height:30px" alt="Avatar">#item.evaluator</li>
} }
</ul>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button id="savebutton" name="formsavebutton" value="Create" type="submit" class="btn btn-success">Save</button>
</div>
</div>
</div>
<!-- jQuery -->
<script src="~/Content/vendors/jquery/dist/jquery.min.js"></script>
<!-- Dual List Scripts -->
<script src="~/Content/js/duallist/duallist.js"></script>
I finally found the answer. Thanks to #Kaddath..
I added toggle function to return success of ajax response ==> $('body').on('click', '.list-group .list-group-item', function () {
$(this).toggleClass('active');
I have a Bootstrap dropdown which worked fine till now.Now i have added two bootstrap modals to my code.My dropdown doesn't work after i add modals to my code.If i remove modals it just works fine.I cant figure out why.
Does this has something to do with data-toggle as i can see its the only common thing between both of them
This is my code.
<div class="my-container" ng-controller="compCategoryCtrl">
<div class="compare-table">
<div class="head-info">
<h3>Select colleges to compare</h3>
</div>
<div class="clearfix"></div>
<div class="find-colleges">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle find" type="button" data-toggle="dropdown" ng-model="selected_value1">{{selected_value1}}
<span class="caret"></span></button>
<ul class="dropdown-menu find-menu">
<li ng-repeat=" clg in college_list" ng-click="set_clg1(clg)">{{clg.college}}</li>
</ul>
</div>
</div>
<div class="col-md-4">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle find" type="button" data-toggle="dropdown" ng-model="selected_value2">{{selected_value2}}
<span class="caret"></span></button>
<ul class="dropdown-menu find-menu">
<li ng-repeat=" clg in college_list" ng-click="set_clg2(clg)">{{clg.college}}</li>
</ul>
</div>
</div>
<div class=" col-md-4 go">
<button class="btn compare_buton trigger open" ng-click="fetch()">Go</button>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="nav-for-table slider close">
<div id="home">
<table class="table table-striped table-hover table-bordered">
<tr ng-repeat="(key, value) in data1[0]">
<td class="col-md-6 head-field active">{{key}}</td>
<td class="col-md-3" ng-repeat="x in data1">
{{x[key]}}
</td>
<td class="col-md-3" ng-repeat="x in data1">
{{data2[$index][key]}}
</td>
</tr>
<tr>
<td class="col-md-6 head-field active">Departments</td>
<td class="col-md-3" data-toggle="modal" data-target="#show1">
Click here to view Departments
</td>
<td class="col-md-3" data-toggle="modal" data-target="#show2">
Click here to view Departments
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="modal fade" id="show1" tabindex="-1" role="dialog" aria-hidden="true" style="display: block;z-index: 9999;margin-top: 100px;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 class="modal-title">Department Information</h3>
</div>
<div class="modal-body">
<table class="table table-striped" id="tblGrid">
<tr>
<th>Branch</th>
<th>Seats</th>
<th>Rating</th>
<th>Placements</th>
</tr>
<tr ng-repeat="x in dept1">
<td>{{x.branch}}</td>
<td>{{x.seats}}</td>
<td>{{x.rating}}</td>
<td>{{x.placement}}</td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default " data-dismiss="modal">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<div class="modal fade" id="show2" tabindex="-1" role="dialog" aria-hidden="true" style="display: block;z-index: 9999;margin-top: 100px;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 class="modal-title">Department Information</h3>
</div>
<div class="modal-body">
<table class="table table-striped" id="tblGrid">
<tr>
<th>Branch</th>
<th>Seats</th>
<th>Rating</th>
<th>Placements</th>
</tr>
<tr ng-repeat="x in dept2">
<td>{{x.branch}}</td>
<td>{{x.seats}}</td>
<td>{{x.rating}}</td>
<td>{{x.placement}}</td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default " data-dismiss="modal">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<script>
$('.trigger.open').on('click', function () {
$('.slider').removeClass('close');
});
$('.trigger.close').on('click', function () {
$('.slider').addClass('close');
});
</script>
Can somebody please help.
Remove the inline styles you have on each Modal:
style="display: block;z-index: 9999;margin-top: 100px;"
Once those are removed the modals fire as expected. I might also recommend removing the .close class from <div class="nav-for-table slider"> as that class is used by Bootstrap and might cause various display conflicts.
See this Bootply for a functional example:
https://www.bootply.com/dFixsdYLpG
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 some list of tasks, each task can be edited into new dialog window. After closing the dialog it shows the edited tasks.
So my question is how table ng-model is connected to the ng-model of dialog window.
Please see the DEMO
Task in table is filling through ng-repeat and and expression. When we click edit it open new dialog. In the dialog ng-model="selectedTask.description" is defined and in angulur ` $scope.selectedTask = task;' is define. Till here every thing is o.k, But how when dialog is closed then How updated info is showed in table.
<body ng-app="myApp" ng-controller="tasksCtrl">
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">ToDo API Client Demo</a>
</div>
</div>
<div>
<table class="table table-striped">
<tbody>
<tr>
<td style="width: 1px;"></td>
<td>
<b>Task</b>
</td>
<td>
<b>Options</b>
</td>
</tr>
<tr ng-repeat="task in tasks">
<td>{{task.title}}</td>
<td>{{task.description}}</td>
<td>
<a class="btn" data-toggle="modal" ng-click="beginEdit(task)">Edit</a>
</td>
</tr>
</tbody>
</table>
<a class="btn" data-toggle="modal" data-target="#add" ng-click="addTask(task)">Add Task</a>
</div>
<!-- Start Edit Modal -->
<div id="edit" class="modal hide fade" tabindex="=1" role="dialog" aria-labelledby="editDialogLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="editDialogLabel">Edit Task</h3>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputTask">Task</label>
<div class="controls">
<input type="text" ng-model="selectedTask.title" id="inputTask" placeholder="Task title" style="width: 150px;">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputDescription">Description</label>
<div class="controls">
<input type="text" ng-model="selectedTask.description" id="inputDescription" placeholder="Description" style="width: 300px;">
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="checkbox">
<input ng-model="selectedTask.done" type="checkbox"> Done
</label>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="editTask()" data-dismiss="modal">Update Task</button>
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
</div>
</div>
<!-- End Edit Modal -->
<script>
var app = angular.module('myApp', []);
app.controller('tasksCtrl', function($scope, $http) {
$http.get("data.json")
.success(function(response) {
$scope.tasks = response.tasks;
});
$scope.beginEdit = function(task) {
//alert(task.title);
$scope.selectedTask = task;
$('#edit').modal('show');
};
$scope.editTask = function() {
$('#edit').modal('hide');
};
});
</script>
</body>
Because you are using ng-model is two-way binding (source to view, and view-> source).
Refer more: http://www.angularjshub.com/examples/basics/twowaydatabinding/
Hope this helps.
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