Reload element after user input

[AvanIeperen]

Hi Everyone,

I am working on a simple web app that will only be used on a number of in house mobile phones. These phone only work on our internal wifi and  app access is very restricted. Only a few certified apps are allowed. One of these is a simplified browser app.

The wep app consists of a page with a header, phone number list and a footer. Both the header and the footer are locked so only the list in the body scrolls up and down. I am using display: flex in combination with flex grow and shrink to do this. I added an input field to the header to be used as a filter for the list.
In the client side code of this field i added 'updateDiv()' and the following code to the script section:

function updateDiv()
{   
    $( "#belangrijkpagecontainer_div" ).load(window.location.href + " #belangrijkpagecontainer_div" );
}
 
Where "belangrijkpagecontainer_div" is the outer most div of the phone number list.

On to the problem i am having. This only works 50% of the time. Half the time the list is built before the update code of the filter field is called. Which makes the filter used for building the list lag behind. The weird thing it is exactly 50%. First time i enter a filter value it doesn't work, second time it does, then next time it doesn't work again and so on and on.

First time:
1. Build page
2. Build header with filter field
3. Build list
4. Update filter value
5. Build footer

Second time:
1. Build page
2. Build header with filter field
3. Update filter value
4. Build list (this time with the correct filter value)
5. Build footer

What am i doing wrong? How can i make it so reload order is always correct and not just half the time?

I have also tried to use location.reload(); but this didn't work at all. Sometimes the value of the filter field would just not get updated.

Thanks,
Adriaan

[Bruce]

Hi Adriaan,

So, unfortunately, your approach is "completely wrong"
Fortunately it's not hard to put right.

firstly - what's going wrong. Well, when you tab off the search field two things are happening. First the field is going to the server for validation. And this is where you are building the phone list right? Second you are asking the page to do a reload. This arrives in the web server as a second, simultaneous request.

The server gets 2 requests, so starts 2 threads to process them. There's no link between the threads, and nothing to say that one completes before the other. So you'll get "random" results - sometimes the filter will be built in time, sometimes it won't.

So, first things first, remove the UpdateDiv function from the JavaScript, and the call to it from the search field. Neither are required.

second, add the browse to the "reset list" of the Search field. Leave your filter-building as is.

That's all.

If you don't come right, join the webinar tonight and I can walk through it with you. (see clarionlive.com)

Cheers
Bruce

[AvanIeperen]

Hi Bruce,

I tend to overcomplicate things. Thank you for your explenation i get now why it isn't working.

The updateDiv and javascript are gone. I have added my phone number list as a procedure to the fields of the tab the search field is on. I also added this procedure to the reset list of the field (on the client side tab). The result is that the list with phone numbers is now shown twice. Which makes sense because i added it to the tab. The phone number list in the header is reset and filtered when the search field updated. However the old phone number list (on the other tab) is not being reset. Is it not possible to reset a list on another tab if the tabs are not on the same form?

The easy fix would be to move the search field out of the header. But I am not quite ready to give up on the search field in the header just quite yet.

I am not able to join the webinar today, but i am keeping the option open if i can't find a sollution before the next one.

Thanks,
Adriaan

[Bruce]

yeah this is probably a webinar question where I can see what you are doing.