Easy way of stopping form submit to reload form?


#1

Hi there,
I noticed the form automatically reloads itself on reload, no matter what is defined in the onSubmit function.
As my Forms usually trigger a reload of a bigger scope (form + some other elements around it), I’d like to stop the form from automatically reloading itself.

Have a look at the screencast: You can see the form first reloads itself on submit, then the other reload defined in the onSubmit function:
http://www.spame.de/formreload.mkv

The submit function:

//onSubmit: Store filters in Session, reload list
$lcf->onSubmit(function($lcf) use ($lcl) {
	//add Filter Values to Session
	$_SESSION[SMN]['filter_by_tour_type']	= $lcf->model['filter_by_tour_type'];
	$_SESSION[SMN]['filter_by_region'] 		= $lcf->model['filter_by_region'];
	$_SESSION[SMN]['filter_by_place'] 		= $lcf->model['filter_by_place'];
	$_SESSION[SMN]['filter_by_year'] 		= $lcf->model['filter_by_year'];
	return (new \atk4\ui\JsReload($lcl));
});

So at the moment, the whole script is requested two times: one time for reloading the form, and one time for reloading the list below. I would like to have this in one request of course, skipping the reload of the form as a bigger scope which can include the form is reloaded anyway.

Is there an at least half-easy way to accomplish this?
Best Regards
Philipp


#2

Hi, the logic here is quite difficult to follow. If you could make a really basic example indicating your problem, it would be easier to help.


#3

Hi,

will try to make it clear:
In the screencast, there is a form on top and a list below. Whenever a form field is changed, the form is submitted.
When the form is submitted, I want to AJAX reload the list (the form are filter options for the list. Of course, I want to do this with a single request to the server:
-> Form data is sent to server
<- Server returns the HTML code to replace the list with.

In my current implementation, there are 2 requests to the server:
-> Form data is sent to server
<- Server returns something, as the typical reload animation is shown on top of the form I suggest its HTML to replace the form
-> JsReload sends another request to server
<- Server returns the HTML code to replace the list with.

You can see it easily in the screencast: Upon finishing form reload, list reload starts.

In almost every place I use a form, I want to reload a bigger scope than only the form.

One solution which is kind of a hack would do the job but would require a significant change in my Templates, HTML etc:

  • create a custom Template for each Form with additional Regions, and place any Content that should be reloaded upon form submit inside these regions.

Is there an easier way to avoid having 2 requests upon form submit?

Best regards
Philipp


#4

OK, I think I understand what you mean.

In your case you can render certain views during submission handler and then substitute HTML with the new ones on return. I haven’t tested it much:

$v = $app->add('LoremIpum'); 

$f->onSubmit(function($f) use ($v) {
   return $v->js()->html($v->getHTML());
});

Let me know if this works. You may also have some trouble with JS if you reload dynamic request, but you can look deeper into how reloading is done and figure it out somehow.


#5

Hi Romans,

only did a quick test, but this seems to work, thanks for that idea!