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
94
95
96
97
98
99
100
101
102
103
104
105
106
|
$(function () {
/* init some needed tags and values */
$('table#data').wrap('<div id="fkcontainer" class="fk" />');
$('#fkcontainer').append('<div id="root" />');
jQuery.ppa = jQuery.ppa || {
root: $('#root'),
};
$('a.fk').on('click', function (event) {
/* make the cursor being a waiting cursor */
$('body').css('cursor', 'wait');
let $this = $(this);
$.ajax({
type: 'GET',
dataType: 'html',
data: {
action: 'dobrowsefk',
},
url: String($(this).attr('href')),
cache: false,
context: $(this),
contentType: 'application/x-www-form-urlencoded',
})
.done((answer) => {
let 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) {
/* this "topid" allows to track if we are
opening a FK from the same line in the original table */
jQuery.ppa.root.empty().css({
left: pdiv.position().left + 'px',
top: top + 'px',
}).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 */
let newdiv = $('<div class="fk ' + divclass + '">').html(answer);
/* highlight referencing fields */
newdiv
.data('ref', $this)
.data('refclass', $(this).attr('class').split(' ')[1]);
newdiv
.on('mouseenter', function (event) {
$(this)
.data('ref')
.closest('tr')
.find('a.' + $(this).data('refclass'))
.closest('div')
.addClass('highlight');
})
.on('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));
let closestDiv = $(this).closest('div');
closestDiv
.data('ref')
.closest('tr')
.find('a.' + closestDiv.data('refclass'))
.closest('div')
.removeClass('highlight');
closestDiv.remove();
});
})
.fail((err) => {
$this
.closest('div.fk')
.append('<p class="errmsg">' + Display.errmsg + '</p>');
})
.always(() => {
$('body').css('cursor', 'auto');
});
return false; // do not refresh the page
});
});
|
