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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.