Jquery dialog error with Datatables not rendering background

Question

I have run across some issues while trying to implement Datatable on a dialog popup. Below is my code: HTML Code

<a href="#" onclick="loadData();"><span class="onlineCounter bigtext">Show Counter</span></a></div>

<div id="loadCounterInfo" style="min-height:400px; height: 450px;">
    <table id="loadCounterTable">
        <thead>
            <tr>
                <th>Vehicle Name</th>
                <th>Time</th>
            </tr>
        </head>
        <tbody>
            <tr>
                
            </tr>
        </tbody>
    </table>
</div>

My Javascript code for dialog below:

$("#loadCounterInfo").dialog({
        autoOpen: false,
        width: "450",
        height: "550",
        minHeight: "500",
        resizable: false,
        close: function(e, ui){
            console.log("Closed LoadCounterInfo");
        },
        open: function(){
          loadDatatableInfo();
            console.log("Opened LoadCounterInfo");
        }
    });

I have two javascript functions:

function loadData(){
    
    $('#loadCounterInfo').dialog('open');
      
}
function loadDatatableInfo(){
    var tabl = $('#loadCounterTable').DataTable({
        paging: true,
        scrollY: 300,
        retrieve: true,
        ajax: {
            url: "func/fn_dashboard.php?cmd=load_online_info"
        },
        columns: [
            {data: 'veh_name'},
            {data: 'status_time'}
        ]
    });
}

When ever I click the Show Counter link, A dialog is created as desired and console.log("Open LoadCounter") shows on the console, likewise when I close it.

If I should close the dialog and open it for the second time, I experience a transparent background and the dialog does not load properly, The Datatable information is still loaded but seems overlayed, I do not understand what is going on here. if I should comment out the loadDatatableInfo, only the dialog works perfectly well even when i close and open it hundreth time..

Answer 1

def findPeak(L):
    results = []
    for i in range(1, len(L) - 1):
        if L[i] > L[i-1] and L[i] > L[i+1]:    # check both sides for each
            results.append(L[i])               # ^ element of list excluding edge cases
    if L[0] > L[1]: results.append(L[0])       # check edge cases
    if L[-1] > L[-2]: results.append(L[-1])
    return results
array = [3,2,4,5,4,3,2,2]
print("Peak points are: ", findPeak(array))

Answer 2

follow this approach in order to find the peak elements

1. check if the 1st element is greater or last index value is greater than 2nd last element
2. traverse the array from L[0] to L[n-2]
3. check if both neighbours element is greater than L[i], then print the element and terminate the loop

Answer 3

I suggest a numpy solution over a looping/traversal approach, as it will be much more efficent. Consider the following:

L - np.roll(L, shift=1) # difference with left values
L - np.roll(L, shift=1) > 0 # indices of numbers bigger than left neighbor
L - np.roll(L, shift=1) # difference with right values
L - np.roll(L, shift=1) > 0 # indices of numbers bigger than right neighbor

Then clearly we have to take from L numbers bigger than both their left and right values: that means a logical AND between the above indices:

L[(L - np.roll(L, shift=1) > 0) & (L - np.roll(L, shift=-1) > 0)]

This still leaves the last element not correctly checked: this is an easy fix with:

result = L[(L - np.roll(L, shift=1) > 0) & (L - np.roll(L, shift=-1) > 0)]
if L[-1] >= L[-2]:
    result = np.append(result, [L[-1]])

Answer 4

Use zip to form tuples of each item in L with the previous and next items (padding with the first and last as needed)

[x for prevX,x,nextX in zip(L[:1]+L,L,L[1:]+L[-1:]) if prevX <= x >= nextX] 

# [3, 5, 2]