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
93
|
$(document).ready(function () {
/* init some needed tags and values */
$('table#data').wrap('<div id="fkcontainer" class="fk" />');
$('#fkcontainer').append('<div id="root" />');
jQuery.ppa = {
root: $('#root')
};
$("a.fk").on('click', function (event) {
/* make the cursor being a waiting cursor */
$('body').css('cursor', 'wait');
query = $.ajax({
type: 'GET',
dataType: 'html',
data: {
action: 'dobrowsefk'
},
url: $(this).attr('href'),
cache: false,
context: $(this),
contentType: 'application/x-www-form-urlencoded',
success: function (answer) {
pdiv = this.closest('div.fk');
divclass = this.attr('class').split(' ')[1];
/* if we are clicking on a FK from the original table
(level 0), we are using the #root div as parent-div */
if (pdiv[0].id == 'fkcontainer') {
/* computing top position, which is the topid as well */
var top = this.position().top + 2 + this.height();
/* if the requested top position is different than
the previous topid position of #root, empty and position it */
if (top != jQuery.ppa.root.topid)
jQuery.ppa.root.empty()
.css({
left: (pdiv.position().left) + 'px',
top: top + 'px'
})
/* this "topid" allows to track if we are
opening a FK from the same line in the original table */
.topid = top;
pdiv = jQuery.ppa.root;
/* Remove equal rows in the root div */
jQuery.ppa.root.children('.' + divclass).remove();
} else {
/* Remove equal rows in the pdiv */
pdiv.children('div.' + divclass).remove();
}
/* creating the data div */
newdiv = $('<div class="fk ' + divclass + '">').html(answer);
/* highlight referencing fields */
newdiv.data('ref', this).data('refclass', $(this).attr('class').split(' ')[1])
.mouseenter(function (event) {
$(this).data('ref').closest('tr').find('a.' + $(this).data('refclass')).closest('div').addClass('highlight');
})
.mouseleave(function (event) {
$(this).data('ref').closest('tr').find('a.' + $(this).data('refclass')).closest('div').removeClass('highlight');
});
/* appending it to the level-1 div */
pdiv.append(newdiv);
newdiv.on('click', '.fk_delete', function (event) {
console.log('clicked .fk_delete', jQuery(this));
with($(this).closest('div')) {
data('ref').closest('tr').find('a.' + data('refclass')).closest('div').removeClass('highlight');
remove();
}
});
},
error: function () {
this.closest('div.fk').append('<p class="errmsg">' + Display.errmsg + '</p>');
},
complete: function () {
$('body').css('cursor', 'auto');
}
});
return false; // do not refresh the page
});
});
|
