Skip to content

Commit dad5d1b

Browse files
talha08talha08
committed
modal ajax
1 parent cab8e28 commit dad5d1b

File tree

5 files changed

+236
-59
lines changed

5 files changed

+236
-59
lines changed

‎app/Http/Controllers/LinkController.php

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<?php
2+
3+
namespace App\Http\Controllers;
4+
5+
use Illuminate\Http\Request;
6+
7+
class LinkController extends Controller
8+
{
9+
//
10+
}

‎app/Link.php

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<?php
2+
3+
namespace App;
4+
5+
use Illuminate\Database\Eloquent\Model;
6+
7+
class Link extends Model
8+
{
9+
//
10+
}

‎database/migrations/2017_08_21_143738_create_links_table.php

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<?php
2+
use App\Link;
3+
use Illuminate\Support\Facades\Schema;
4+
use Illuminate\Database\Schema\Blueprint;
5+
use Illuminate\Database\Migrations\Migration;
6+
7+
class CreateLinksTable extends Migration
8+
{
9+
public function up()
10+
{
11+
Schema::create('links', function (Blueprint $table) {
12+
$table->increments('id');
13+
$table->string('url');
14+
$table->string('description');
15+
$table->timestamps();
16+
});
17+
18+
// Link::create([
19+
// 'url' => 'https://laravel.com/',
20+
// 'description' => 'Laravel - The PHP framework for web artisans.',
21+
// ]);
22+
//
23+
// Link::create([
24+
// 'url' => 'https://laracasts.com/',
25+
// 'description' => 'The best PHP and Laravel screencasts on the web.',
26+
// ]);
27+
}
28+
29+
30+
/**
31+
* Reverse the migrations.
32+
*
33+
* @return void
34+
*/
35+
public function down()
36+
{
37+
Schema::dropIfExists('links');
38+
}
39+
}

‎public/js/script.js

+65-40
Original file line numberDiff line numberDiff line change
@@ -4,60 +4,58 @@
44
$(document).ready(function() {
55

66

7+
$(document).on('click', '.new-modal', function() {
8+
$('#footer_action_button_new').text("New");
9+
$('#footer_action_button_new').addClass('glyphicon-check');
10+
$('#footer_action_button_new').removeClass('glyphicon-trash');
11+
$('.actionBtnNew').addClass('btn-success');
12+
$('.actionBtnNew').removeClass('btn-danger');
13+
$('.actionBtnNew').addClass('new');
14+
$('.modal-title-new').text('New');
15+
16+
$('#name').val($(this).data('name'));
17+
18+
$('#myModalNew').modal('show');
19+
});
20+
21+
22+
23+
24+
725
$(document).on('click', '.edit-modal', function() {
8-
$('#footer_action_button').text("Update");
9-
$('#footer_action_button').addClass('glyphicon-check');
10-
$('#footer_action_button').removeClass('glyphicon-trash');
11-
$('.actionBtn').addClass('btn-success');
12-
$('.actionBtn').removeClass('btn-danger');
13-
$('.actionBtn').addClass('edit');
14-
$('.modal-title').text('Edit');
15-
$('.deleteContent').hide();
16-
$('.form-horizontal').show();
26+
$('#footer_action_button_edit').text("Update");
27+
$('#footer_action_button_edit').addClass('glyphicon-check');
28+
$('#footer_action_button_edit').removeClass('glyphicon-trash');
29+
$('.actionBtnEdit').addClass('btn-success');
30+
$('.actionBtnEdit').removeClass('btn-danger');
31+
$('.actionBtnEdit').addClass('edit');
32+
$('.modal-title-edit').text('Edit');
1733
$('#fid').val($(this).data('id'));
1834
$('#n').val($(this).data('name'));
19-
$('#myModal').modal('show');
35+
$('#myModalEdit').modal('show');
2036
});
2137

2238

2339

2440

41+
2542
$(document).on('click', '.delete-modal', function() {
26-
$('#footer_action_button').text(" Delete");
27-
$('#footer_action_button').removeClass('glyphicon-check');
28-
$('#footer_action_button').addClass('glyphicon-trash');
29-
$('.actionBtn').removeClass('btn-success');
30-
$('.actionBtn').addClass('btn-danger');
31-
$('.actionBtn').addClass('delete');
32-
$('.modal-title').text('Delete');
43+
$('#footer_action_button_delete').text(" Delete");
44+
$('#footer_action_button_delete').removeClass('glyphicon-check');
45+
$('#footer_action_button_delete').addClass('glyphicon-trash');
46+
$('.actionBtnDelete').removeClass('btn-success');
47+
$('.actionBtnDelete').addClass('btn-danger');
48+
$('.actionBtnDelete').addClass('delete');
49+
$('.modal-title-delete').text('Delete');
3350
$('.did').text($(this).data('id'));
34-
$('.deleteContent').show();
35-
$('.form-horizontal').hide();
3651
$('.dname').html($(this).data('name'));
37-
$('#myModal').modal('show');
52+
$('#myModalDelete').modal('show');
3853
});
3954

4055

4156

4257

43-
$('.modal-footer').on('click', '.edit', function() {
44-
45-
$.ajax({
46-
type: 'post',
47-
url: '/editItem',
48-
data: {
49-
'_token': $('input[name=_token]').val(),
50-
'id': $("#fid").val(),
51-
'name': $('#n').val()
52-
},
53-
success: function(data) {
54-
$('.item' + data.id).replaceWith("<tr class='item" + data.id + "'><td>" + data.id + "</td><td>" + data.name + "</td><td><button class='edit-modal btn btn-info' data-id='" + data.id + "' data-name='" + data.name + "'><span class='glyphicon glyphicon-edit'></span> Edit</button> <button class='delete-modal btn btn-danger' data-id='" + data.id + "' data-name='" + data.name + "' ><span class='glyphicon glyphicon-trash'></span> Delete</button></td></tr>");
55-
}
56-
});
57-
});
58-
59-
60-
$("#add").click(function() {
58+
$('.modal-footer-new').on('click', '.new', function() {
6159

6260
$.ajax({
6361
type: 'post',
@@ -70,19 +68,41 @@ $(document).ready(function() {
7068
if ((data.errors)){
7169
$('.error').removeClass('hidden');
7270
$('.error').text(data.errors.name);
73-
// console.log('sss')
71+
// console.log('sss')
7472
}
7573
else {
7674
$('.error').addClass('hidden');
7775
$('#table').append("<tr class='item" + data.id + "'><td>" + data.id + "</td><td>" + data.name + "</td><td><button class='edit-modal btn btn-info' data-id='" + data.id + "' data-name='" + data.name + "'><span class='glyphicon glyphicon-edit'></span> Edit</button> <button class='delete-modal btn btn-danger' data-id='" + data.id + "' data-name='" + data.name + "'><span class='glyphicon glyphicon-trash'></span> Delete</button></td></tr>");
7876
}
7977
},
78+
});
79+
80+
});
81+
82+
83+
8084

85+
86+
87+
$('.modal-footer-edit').on('click', '.edit', function() {
88+
$.ajax({
89+
type: 'post',
90+
url: '/editItem',
91+
data: {
92+
'_token': $('input[name=_token]').val(),
93+
'id': $("#fid").val(),
94+
'name': $('#n').val()
95+
},
96+
success: function(data) {
97+
$('.item' + data.id).replaceWith("<tr class='item" + data.id + "'><td>" + data.id + "</td><td>" + data.name + "</td><td><button class='edit-modal btn btn-info' data-id='" + data.id + "' data-name='" + data.name + "'><span class='glyphicon glyphicon-edit'></span> Edit</button> <button class='delete-modal btn btn-danger' data-id='" + data.id + "' data-name='" + data.name + "' ><span class='glyphicon glyphicon-trash'></span> Delete</button></td></tr>");
98+
}
8199
});
82-
$('#name').val('');
83100
});
84101

85102

103+
104+
105+
86106
$('.modal-footer').on('click', '.delete', function() {
87107
$.ajax({
88108
type: 'post',
@@ -99,4 +119,9 @@ $(document).ready(function() {
99119

100120

101121

122+
123+
124+
125+
126+
102127
});

‎resources/views/welcome.blade.php

+112-19
Original file line numberDiff line numberDiff line change
@@ -23,18 +23,26 @@
2323
<div class="container">
2424

2525

26-
<div class="form-group row add">
27-
<div class="col-md-8">
28-
<input type="text" class="form-control" id="name" name="name"
29-
placeholder="Enter some name" required>
30-
<p class="error text-center alert alert-danger hidden"></p>
31-
</div>
32-
<div class="col-md-4">
33-
<button class="btn btn-primary" type="submit" id="add">
34-
<span class="glyphicon glyphicon-plus"></span> ADD
35-
</button>
36-
</div>
37-
</div>
26+
{{--<div class="form-group row add">--}}
27+
{{--<div class="col-md-8">--}}
28+
{{--<input type="text" class="form-control" id="name" name="name"--}}
29+
{{--placeholder="Enter some name" required>--}}
30+
{{--<p class="error text-center alert alert-danger hidden"></p>--}}
31+
{{--</div>--}}
32+
{{--<div class="col-md-4">--}}
33+
{{--<button class="btn btn-primary" type="submit" id="add">--}}
34+
{{--<span class="glyphicon glyphicon-plus"></span> ADD--}}
35+
{{--</button>--}}
36+
{{--</div>--}}
37+
{{--</div>--}}
38+
39+
40+
41+
<button class="new-modal btn btn-danger">
42+
<span class="glyphicon glyphicon-trash"></span> New++
43+
</button>
44+
45+
3846

3947

4048
{{ csrf_field() }}
@@ -70,16 +78,73 @@
7078

7179

7280

73-
<div id="myModal" class="modal fade" role="dialog">
81+
82+
<!-- new -->
83+
<div id="myModalNew" class="modal fade" role="dialog">
7484
<div class="modal-dialog">
7585
<!-- Modal content-->
7686
<div class="modal-content">
7787
<div class="modal-header">
7888
<button type="button" class="close" data-dismiss="modal">&times;</button>
79-
<h4 class="modal-title"></h4>
89+
<h4 class="modal-title modal-title-new"></h4>
8090
</div>
91+
<div class="modal-body">
92+
<form class="form-horizontal" role="form">
93+
<div class="form-group">
94+
<label class="control-label col-sm-2" for="name">Name:</label>
95+
<div class="col-sm-10">
96+
<input type="text" class="form-control" id="name" name="name"
97+
placeholder="Enter some name" required>
98+
<p class="error text-center alert alert-danger hidden"></p>
99+
</div>
100+
</div>
101+
</form>
102+
103+
{{--<div class="form-group row add">--}}
104+
{{--<div class="col-md-8">--}}
105+
{{--<input type="text" class="form-control" id="name" name="name"--}}
106+
{{--placeholder="Enter some name" required>--}}
107+
{{--<p class="error text-center alert alert-danger hidden"></p>--}}
108+
{{--</div>--}}
109+
{{--</div>--}}
110+
111+
112+
113+
</div>
114+
115+
<div class="modal-footer modal-footer-new">
116+
<button type="button" class="btn actionBtnNew" data-dismiss="modal">
117+
<span id="footer_action_button_new" class='glyphicon'> </span>
118+
</button>
119+
<button type="button" class="btn btn-warning" data-dismiss="modal">
120+
<span class='glyphicon glyphicon-remove'></span> Close
121+
</button>
122+
</div>
123+
124+
</div>
125+
</div>
126+
</div>
127+
128+
129+
130+
131+
81132

82133

134+
135+
136+
137+
138+
<!-- edit -->
139+
<div id="myModalEdit" class="modal fade" role="dialog">
140+
<div class="modal-dialog">
141+
<!-- Modal content-->
142+
<div class="modal-content">
143+
<div class="modal-header">
144+
<button type="button" class="close" data-dismiss="modal">&times;</button>
145+
<h4 class="modal-title modal-title-edit"></h4>
146+
</div>
147+
83148
<div class="modal-body">
84149
<form class="form-horizontal" role="form">
85150
<div class="form-group">
@@ -96,16 +161,41 @@
96161
</div>
97162
</form>
98163

164+
<div class="modal-footer modal-footer-edit">
165+
<button type="button" class="btn actionBtnEdit" data-dismiss="modal">
166+
<span id="footer_action_button_edit" class='glyphicon'> </span>
167+
</button>
168+
<button type="button" class="btn btn-warning" data-dismiss="modal">
169+
<span class='glyphicon glyphicon-remove'></span> Close
170+
</button>
171+
</div>
172+
</div>
173+
</div>
174+
</div>
175+
</div>
176+
99177

100178

101179

102-
<div class="deleteContent">
180+
181+
<!-- delete -->
182+
<div id="myModalDelete" class="modal fade" role="dialog">
183+
<div class="modal-dialog">
184+
<!-- Modal content-->
185+
<div class="modal-content">
186+
<div class="modal-header">
187+
<button type="button" class="close" data-dismiss="modal">&times;</button>
188+
<h4 class="modal-title modal-title-delete"></h4>
189+
</div>
190+
191+
<div class="modal-body">
192+
<div>
103193
Are you Sure you want to delete <span class="dname"></span> ? <span
104194
class="hidden did"></span>
105195
</div>
106-
<div class="modal-footer">
107-
<button type="button" class="btn actionBtn" data-dismiss="modal">
108-
<span id="footer_action_button" class='glyphicon'> </span>
196+
<div class="modal-footer modal-footer-delete">
197+
<button type="button" class="btn actionBtnDelete" data-dismiss="modal">
198+
<span id="footer_action_button_delete" class='glyphicon'> </span>
109199
</button>
110200
<button type="button" class="btn btn-warning" data-dismiss="modal">
111201
<span class='glyphicon glyphicon-remove'></span> Close
@@ -121,7 +211,10 @@ class="hidden did"></span>
121211

122212

123213

124-
{{--<script src="{{ asset('js/app.js') }}"></script>--}}
214+
215+
216+
217+
{{--<script src="{{ asset('js/app.js') }}"></script>--}}
125218
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
126219
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
127220
<script src="{{ asset('js/script.js') }}"></script>

0 commit comments

Comments
 (0)