Setting field focus in a modal

Wappler General
#1

A little while ago I wanted to set up actions to click a button and open a modal, with a particular field selected. Using the Text Input/Focus action works fine usually, but I couldn’t get it to work after showing a modal. It wasn’t critical so I didn’t persevere. I thought perhaps it was a bug that causes this to fail.

I’ve had another go and got it to work. Rather than applying both actions to the button, I attached a single action to the button - to open the modal, and another action to the modal: to assign the field focus.

Should assigning both actions to the button not work, or is this a bug? The event I attached to the modal was triggered by this:

image

… which I only discovered today. It seems to work, so I assume ‘Shown’ means ‘On Show’ or when the modal is displayed. Is this correct? I can see ‘Hide’ would be useful (I assume ‘On Hide’). I’m not sure what the others are for.

Swiper - strange behaviour when filtering query dynamically
#2

Hi Tom,
Shown (on shown) is the right event to use for that. When you apply the event on click, the model is not yet shown(loaded), that’s why it won’t work.

#3

Thanks Teodor. I think I have quite a way to go before I get to the bottom of Wappler.

#4

Well these are the events provided by bootstrap 4 :slight_smile:

#5

That’s helpful - so the informaiton I was wondering about is all here (at the bottom of the page).

2 Likes
#6

Yes, that’s right.

#7

The problem with assigning multiple events to a single button click is that all the events fire at once. If i did an onclick event with open a modal and set a value and focus a field then they do not run in any particular order and the first event does not run then finish and only then run the second event, they all run at the same time.

To control this properly have the onclick open the modal only, then have the modal run the focus event, this way you can ensure the modal is open before the focus is set.

#8

I can certainly appreciate that multiple actions caused an issue with the modal and setting focus, but are you sure about actions firing at once? I assumed they fire in the order in which they’re assigned.

I frequently attach multiple actions to a button - typically setting the value of a variable, cookie or id etc. and relying on that value being set for what follows to work correctly - eg sending values to be used in a server connect file. Do you not use multiple actions in this way - or do you think there could problems with this approach?

It has occurred to me this could be an issue, but so far results seem to have confirmed setting a value in these ways is reliable. The modal/focus is a slightly different matter. I suppose it might be possible to test for variables having values within an action - eg using ternary operator syntax (or even nested ternary operators if necessary) but I hope this wouldn’t actually be necessary.

This could be a rather important issue. It would be good to have some confirmation about this and the point at which variables are ‘committed’ within a series of actions/events.

#9

@psweb is wrong indeed. The actions are fired sequentially. Of course of some of them are asynchronous they will continue running while the next ones run as well. But this is rarely the case and all runs synchronous

1 Like
#11

Thanks George - that’s very good to know.

#12

Just to confirm. When you say they run sequentially, do you mean step1 runs and finishes then step 2 runs. Or step1 runs and then step 2 regardless of if step 1 is complete or not?

The reason I gave the answer I did was because I asked myself.

So I assume I misunderstood the answer.

#13

Yes actions run sequentially in order indeed.

But do note that I warned you about asynchronous actions and a server connect action is one of those.

Server actions gets called and immediately returns and the execution returns for the next action, while the server action continues on its own and when it’s done fires the on success event.

Same is also true for some actions like setValue that you might think are secuential but the dynamic data value is available on the next refresh cycle, so that is when all actions in the sequence are done.

So that is why setting a value in the first action and using it directly in the next is not that good idea.

#14

Ok thanks for confirming, thought I had just made up my own story in my dreams for a moment there. Lol.

#15

When you use ‘setValue’ as an example, are you referring to setting any type of value - eg a cookie or form value (to include in a post submission)? If so, how would you suggest confirming the variable is set, so you can continue with the following actions?

Eg suppose I have two buttons (only one of which will be visible) which submit the same form to a server action. One sets a variable to ‘insert’, the other to ‘update’, and the server action branches according to the post variable submitted. Can I not be certain this will work? If not, is there a recommended/best way of testing the variable is set?

Similarly, I often use cookies to manage client-side data and then send lists of IDs to a server action. Could this fail? If I test series of actions like this and it appears to be reliable, is it likely to be so or is there always the chance that it will occasionally fail?

I would be grateful for any suggestions.

#16

With the two buttons example you don’t need to set Value first. You just have each button calls it’s separate action directly. The insert button calls the insert record action and the update button the update record action.

As for the setting and directly reading the value, it might work. I was more referring to the visual refreshing on the screen where it is data bound.

Maybe @patrick can give more insights of using setValue in subseqential calls

#17

In the example I gave, I’m using a single server connect form - which will behave differently depending on which variable is sent in the post. I haven’t created two server actions or two forms. It seems to work very well with just one form and one server action (and was a suggestion made by you recently in another thread - as far as I understood it).

Another example is a more complicated page I’m working on. A feature is needed to enable selection of duplicates, select the one to keep, and delete the others - and to update records (in a many-many relationship). The user selects the duplicates (IDs stored in a cookie), and selects the record to keep (ID stored in another cookie) - at which point a ‘merge’ button appears. This button creates a third cookie by subtracting the previous two cookies from each other (this will be a list of records to delete in the current table). This button also submits the three cookies to a server connect action file which will do all the processing. It’s not quite finished, but most of it is and seems to work well. If I can’t be sure the cookies are reliably set, the result could be chaos (with wrong records being deleted or not etc.).

This approach seems to work well and quite easily for what would be very difficult (at least for me) to achieve without Wappler. Is this the wrong approach with tasks like this. I’ve tested the cookie values many times and they seem to work 100%, but I haven’t finished the server connect part yet. I realise this is just an example, but I’m considering doing a lot of development like this - for projects I wouldn’t have considered doing in this way before Wappler - so it’s an important issue for me. Am I being unrealistic about what Wappler can do?

I would appreciate some suggestions/reassurance.

(Here’s the example in question: green buttons to select items, name to keep is selected (turns red and merge button appears). Merge button finalises variables and runs server action.)

image

1 Like
#18

Hi Tom,
I think George pretty much explained everything. What more clarification is needed here?
I have the feeling you are just worrying about things that are not even related to the initial question and the examples after that.

To summarize…:

  • When you have a modal and want to focus a field inside it, you need to wait for the modal to load, because you cannot focus something that is not initialized … it’s just logical and not really related to Wappler.
  • When you have multiple events on click(or any other dynamic event) they fire in the sequence they are placed in. They won’t wait the previous event in the queue to finish first.
  • If you want to use a value generated by one server action in another server action running after it - you should run the second server action after the first one finished (on success/on done).

These are just things following simple logic, nothing more nothing less.

#19

Hi Teodor,
Like a number of discussions, things sometimes go off at a bit of a tangent - because many isues overlap and have common issues.

The original issue regarding setting the focus of a form field is relatively trivial. I had solved the problem anyway but it raised some general questions - which is why I started the thread. It lead to the rather more important issue of variables being set (or not) and the possibility of queries failing or returning incorrect results.

@psweb suggested actions run simultaneously rather than sequentially. George then said this was “indeed wrong”, and I was reassured. After more information from @psweb, George was less reassuring and suggested setting a value in the first action and then using it directly is “not that a good idea”. He suggested that @patrick might be able to give more insights into using setValue - which is why I was waiting for more clarification.

George saying:

… is not very encouraging.

Can I assume that setting a value and then using is unreliable generally, or only in certain circumstances? Frequently I’ll set a value with a button and that value will determine what parameters are sent to a query. I don’t want to have two buttons - one to set a value and another to run the server action (even then, would I know the variable was set?). Are there situations where this could be unreliable? Is there any way that I can determine if a value has been set? In PHP, it’s normal practice to test variables before taking further actions relying on those variables being set. I’ve used similar things in other languages. Does Wappler need something like this (or does it already have it)?

I’m sorry to go on about this, but it seems to more a very important issue and the explanations put forward so far don’t seem very clear.

#20

@TomD sometimes you are just overcomplicating simple things.

nobody said that. Nobody says anything about setting value AND running server action won’t work - this will work just perfectly … you don’t need two buttons!!

George is explaining what I also explained in my last reply - setting a value in one server action and using it in another one requires the first server action to run first and then the next one runs! That’s why the server action > onSuccess action is available.

There is nothing hidden/unclear that is not already explained. Use your server actions and set your values like you did until now. No need to panic about simple things.

#21

Thanks Teodor,

Great - that’s good to hear. This has been a confusing thread (and I don’t this I was the only one causing confusion).

Just for a little more clarification, could you explain what you meant about events not finishing. It sounds a little like one of George’s earlier comments:

Not waiting for something to complete - if that something is setting a value which subsequent steps depend on - still sounds serious. But I’m sure you’ll tell me it doesn’t mean that (but what the implications?).