Problem with data-auto-submit after first submit

Need Help
#1

I have a ajaxPartial

{% ajaxPartial "partial_name" lazy body %}
    <p>Loading posts...</p>
{% endpartial %}

Inside partial

{{some}}
    <div
    data-request="onGetSome"
    data-request-update="{ _self: true }"
    data-auto-submit></div>

And method

public function onGetSome()
    {
        $this->page['some'] = 'some_data';
    }

By the documentation data-auto-submit method should only work once

image
image698Ă—354 13.3 KB

but it works infinitely
image

The example is taken entirely from the documentation

1 Like
#2

I think there may be a mistake, you shouldn’t include this in your partial

    <div
    data-request="onGetSome"
    data-request-update="{ _self: true }"
    data-auto-submit></div>

The documentation says the {% ajaxPartial %} tag will output this for you.

Since you have it included twice, it will indeed result in a loop.

#3

This code is in the parial and is repeated only once on the page
image
image
but sending requests happens endlessly, I thought that if you don’t specify a value for the “data-auto-submit”, then sending a request will happen only once, but that’s not true

#4

I got same problem.

I just copy code from Polling - October CMS - 3.x

There sample:

// component
public function onTest() {
    $this->page['result'];
}

// page
{% ajaxPartial 'posts' lazy body %}
    <p>Loading posts...</p>
{% endpartial %}

// partial 
  <div
      data-request="onTest"
      data-request-update="{ _self: true }"
      data-auto-submit>
  </div>

 {{ d(result) }}

and I get an infinite loop request. But in the documentation: " This outputs a partial with initial content that includes a data-auto-submit data attribute, which performs the AJAX request to update itself after the page loads. The attribute is not included in subsequent requests."

Maybe bug? :slight_smile:

UPD:

To fix the infinite queries, I could do a check, but that’s not the right thing to do:

// partial 
{% if not result %}
    <div
        data-request="onTest"
        data-request-update="{ _self: true }"
        data-auto-submit>
    </div>
{% endif %}

 {{ d(result) }}

And another strange thing. When I add sleep(5) to my ajax function, preloading text shows and hides momentarily. But I expect the text to be displayed for all 5 seconds until the partial is updated.

#5

After the initial page load, an onAjax request occurs, which removes the body content from the partial. Only after that, a request from inside the partial is made to load the data. I believe this is the issue.

#6

@Sergey

Sorry if I was unclear:

Do not include the following markup in your partial. It is included automatically for you.

Alternatively, if you want to include this markup, do not use the {% ajaxPartial lazy %} tag. Use the {% ajaxPartial %} tag instead without the lazy part.

I hope this helps.

#7

The docs need improving…

The data-auto-submit will continue to automatically submit the request, which is normal. To make it stop, don’t include the data-auto-submit tag in the subsequent AJAX update. The ajaxPartial lazy twig Tag includes it for the first load only to overcome this.

In this case, the tag is being included twice – once in the partial and once from the ajaxPartial lazy tag call. The documentation describes how the ajaxPartial lazy tag functions; it doesn’t instruct you to include this markup in your partial!

The {% if not result %} is a good solution if you are not using the ajaxPartial lazy call.

I rewrote the documentation on ajaxPartial lazy; hopefully, it improved the clarity.

#9

The issue is that the guys couldn’t figure out how to get lazy tag to send a request to a custom handler. Right now it defaults to “onAjax”, but should go to whatever is specified inside partial, for example “onTest”.

#10 
page:
{% ajaxPartial 'posts' lazy body %}
    <p>Loading posts...</p>
{% endpartial %}

inside ajaxPatial posts:
<div
      data-request="onGetSome"
      data-request-update="{ _self: true }">
  </div>

instead of request “onGetSome” the default request “onAjax” is sent

#11

Rendering a partial does not call an Ajax handler so this not the right approach. Lazy simply calls the generic handler as a way to request the partial.

Anyhow. I’ve updated the documentation with the use case that involves a custom handler.