Fout in javascript
Ik heb een probleem met mijn Jquery er zit waarschijnlijk een fout in o.i.d
Moet er wel bij zeggen dat ik geen PRO in Jquery ben, kan het redelijk lezen maar niet uit de mouw typen, als je me snapt.
Ik gebruik snippets vanaf het internet:
ModelboxModelbox
AJAX delete stukje (van lijn 12 tot 20)AJAX delete stukje (van lijn 12 tot 20)
Wat ik wil doen is een modelbox tonen en als er op "Ja" word geklikt dat er iets word verwijderd in de database en de modelbox wegvaagd en er een slideUp animatie word gedaan op de <tr>.
Hopelijk kunnen jullie me helpen, ben al 3 uur aant kloten..
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
/*********************************************
** Delete functions **
*********************************************/
$('.delete').click(function(){
var parent = $(this).parent().parent();
$.confirm({
'title' : 'Delete Confirmation',
'message' : 'You are about to delete this item. <br />It cannot be restored at a later time! Continue?',
'buttons' : {
'Yes' : {
'class' : 'blue',
'action': function(){
$.ajax({
type: "POST",
url: "company/delete/" + $(this).attr('id'),
data: string,
cache: false,
success: function(){
parent.slideUp(600,function() { //remove the Table row .
parent.remove();
}
});
}
}
},
'No' : {
'class' : 'gray',
'action': function(){} // Nothing to do in this case. You can as well omit the action property.
}
}
});
});
(function($){
$.confirm = function(params){
if($('#confirmOverlay').length){
// A confirm is already shown on the page:
return false;
}
var buttonHTML = '';
$.each(params.buttons,function(name,obj){
// Generating the markup for the buttons:
buttonHTML += '<a href="#" class="button '+obj['class']+'">'+name+'<span></span></a>';
if(!obj.action){
obj.action = function(){};
}
});
var markup = [
'<div id="confirmOverlay">',
'<div id="confirmBox">',
'<h1>',params.title,'</h1>',
'<p>',params.message,'</p>',
'<div id="confirmButtons">',
buttonHTML,
'</div></div></div>'
].join('');
$(markup).hide().appendTo('body').fadeIn();
var buttons = $('#confirmBox .button'),
i = 0;
$.each(params.buttons,function(name,obj){
buttons.eq(i++).click(function(){
// Calling the action attribute when a
// click occurs, and hiding the confirm.
obj.action();
$.confirm.hide();
return false;
});
});
}
$.confirm.hide = function(){
$('#confirmOverlay').fadeOut(function(){
$(this).remove();
});
}
})(jQuery);
** Delete functions **
*********************************************/
$('.delete').click(function(){
var parent = $(this).parent().parent();
$.confirm({
'title' : 'Delete Confirmation',
'message' : 'You are about to delete this item. <br />It cannot be restored at a later time! Continue?',
'buttons' : {
'Yes' : {
'class' : 'blue',
'action': function(){
$.ajax({
type: "POST",
url: "company/delete/" + $(this).attr('id'),
data: string,
cache: false,
success: function(){
parent.slideUp(600,function() { //remove the Table row .
parent.remove();
}
});
}
}
},
'No' : {
'class' : 'gray',
'action': function(){} // Nothing to do in this case. You can as well omit the action property.
}
}
});
});
(function($){
$.confirm = function(params){
if($('#confirmOverlay').length){
// A confirm is already shown on the page:
return false;
}
var buttonHTML = '';
$.each(params.buttons,function(name,obj){
// Generating the markup for the buttons:
buttonHTML += '<a href="#" class="button '+obj['class']+'">'+name+'<span></span></a>';
if(!obj.action){
obj.action = function(){};
}
});
var markup = [
'<div id="confirmOverlay">',
'<div id="confirmBox">',
'<h1>',params.title,'</h1>',
'<p>',params.message,'</p>',
'<div id="confirmButtons">',
buttonHTML,
'</div></div></div>'
].join('');
$(markup).hide().appendTo('body').fadeIn();
var buttons = $('#confirmBox .button'),
i = 0;
$.each(params.buttons,function(name,obj){
buttons.eq(i++).click(function(){
// Calling the action attribute when a
// click occurs, and hiding the confirm.
obj.action();
$.confirm.hide();
return false;
});
});
}
$.confirm.hide = function(){
$('#confirmOverlay').fadeOut(function(){
$(this).remove();
});
}
})(jQuery);
EDIT: Het onderste stuk script is niets aan veranderd, dit is orgineel en niet gewijzigd
Wat krijg je in de console te zien, enige foutmeldingen? En heb je eventueel een online voorbeeld, of kun je er eentje maken op jsfiddle.net ofzo?
Toevoeging op 27/05/2012 14:30:16:
Fout gevonden, op regel 25. Wat doet die } daar? Wat sluit deze? Hij hoort daar namelijk helemaal niet thuis.
$.ajax({
type: "POST",
url: "company/delete/" + $(this).attr('id'),
data: string,
cache: false,
success: function() {
parent.slideUp(600, function() { //remove the Table row .
parent.remove();
}
});
}
Zoals je ziet lopen de kleuren blue en orange door elkaar en mist de kleur rood zijn sluit haakje.
Toevoeging op 27/05/2012 14:50:58:
Ik ben eruit, het werkt...
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
$('.delete').click(function(){
var parent = $(this).parent().parent();
$.confirm({
'title' : 'Delete Confirmation',
'message' : 'You are about to delete this item. <br />It cannot be restored at a later time! Continue?',
buttons : {
'Yes' : {
'class' : 'blue',
'action': function(){
//make the Ajax Request
$.ajax({
type: 'POST',
url: 'company/delete/',
data: '' + $(this).attr('id'),
success: function(response)
{
if(response == true){
parent.slideUp(600,function() { //remove the Table row .
parent.remove();
});
}
else
{
alert('FOUT!');
}
}
});
}
},
'No' : {
'class' : 'gray',
'action': function(){} // Nothing to do in this case. You can as well omit the action property.
}
}
});
return false;
});
var parent = $(this).parent().parent();
$.confirm({
'title' : 'Delete Confirmation',
'message' : 'You are about to delete this item. <br />It cannot be restored at a later time! Continue?',
buttons : {
'Yes' : {
'class' : 'blue',
'action': function(){
//make the Ajax Request
$.ajax({
type: 'POST',
url: 'company/delete/',
data: '' + $(this).attr('id'),
success: function(response)
{
if(response == true){
parent.slideUp(600,function() { //remove the Table row .
parent.remove();
});
}
else
{
alert('FOUT!');
}
}
});
}
},
'No' : {
'class' : 'gray',
'action': function(){} // Nothing to do in this case. You can as well omit the action property.
}
}
});
return false;
});
Hartstikke bedankt Wouter!