JeasyUI datagrid reload issue

Hi all,

I am using JeasyUI datagrid:
https://www.jeasyui.com/documentation/datagrid.php

I've managed to load and update data without problems.

The issue I have is related to an inputbox where the user can select a date from a calendar.
Once that date is selected I run this code:

$( document ).ready(function() {
    alert('Page reloaded');
    $('#datalav1').val( sessionStorage.getItem("selectedDate") );
    
});

function loadGrid(date_selected) {

        $('#dg').datagrid({
        url:'get_data.php?date='+date_selected,
        method: 'get',
        columns:[[
            {field:'IdentificativoWR',title:'Work request',width:89,align:'Center'},
            {field:'TECNICO1',title:'Tecnico',width:100,align:'Center'},
            {field:'NOTA',title:'Appuntamento',width:1900,align:'left'}
        ]]
    });
    $('#dg').datagrid('reload');
}

$('#datalav1').change(function(){
    var inputDate = new Date(this.value);
    var date_selected = inputDate.format("mm-dd-yyyy");
    sessionStorage.setItem("selectedDate",date_selected);
    loadGrid(date_selected);
});

Open in new window


What seems to happen is that the document is fully reloaded when the user changes #datalav1.
What I see is that the alert with 'Page reloaded' appears correctly but the datalav1 value change happens briefly and then gets deleted.
Imho this happens because the datagrid reload function does something that is not complete yet when the document is declared as ready.

How can I change the value when all the changes in the page are complete?
Is there any other state than document ready?

Thanks for your time and patience.
LVL 1
ltpittAsked:
Who is Participating?
 
Michael VasilevskySolutions ArchitectCommented:
Have you tried:

$('#datalav1').change(function(e){
    var inputDate = new Date(this.value);
    var date_selected = inputDate.format("mm-dd-yyyy");
    e.preventDefault();
    sessionStorage.setItem("selectedDate",date_selected);
    loadGrid(date_selected);
});

Open in new window


If you're able to recreate the issue in a jsfiddle or similar it would be easier for EE experts to troubleshoot.
1
 
leakim971PluritechnicianCommented:
Here the events : https://www.jeasyui.com/documentation/datagrid.php#events
You can see an interesting question here : https://www.jeasyui.com/forum/index.php?topic=3162.0;wap2

Try this :
$( document ).ready(function() {
    // CODE MOVED    
});

function loadGrid(date_selected) {

        $('#dg').datagrid({
            url:'get_data.php?date='+date_selected,
            onLoadSuccess: function() {
                setTimeout(function() { // give it a bit of time to recreate the grid with the brandnew data
                        alert('Page reloaded');
                        $('#datalav1').val( sessionStorage.getItem("selectedDate") );
                }, 200); // 200ms maybe reduce
            },
            method: 'get',
            columns:[[
                {field:'IdentificativoWR',title:'Work request',width:89,align:'Center'},
                {field:'TECNICO1',title:'Tecnico',width:100,align:'Center'},
                {field:'NOTA',title:'Appuntamento',width:1900,align:'left'}
            ]]
        });
        $('#dg').datagrid('reload');
}

$('#datalav1').change(function(){
    var inputDate = new Date(this.value);
    var date_selected = inputDate.format("mm-dd-yyyy");
    sessionStorage.setItem("selectedDate",date_selected);
    loadGrid(date_selected);
});

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.