Provide AJAX capacities

[sescandell]

We some times ago split templates to make AJAX possible.

On some client integration, I used this functionnality to add some AJAX capacities to the application. Usefull on list mainly (filters, object actions, pagination).
Let's see if it is possible to make it generic enough to be integrated into the bundle

[ioleo]

If you could provide some use-case examples, it would be easier for me to imagine, what you are trying to accomplish and maybe help.

[sescandell]

For example here are some use-cases:

• Pagination: do not reload all the page, but just the "results template"
• Filters: same as above
• Object actions such as "toggle isActive" or "simple action on object" (change state, ...): just execute and reload only the "row template"
• Object actions into popin through AJAX (Imagine the following: you have an action "associate categories" to a product, you click on it, it display a popin that load a form from the BE, and handle form submission error and success, ...)

This imply the following improvements:

• Javascript AJAX handler
• Managing CSRF through AJAX too
• Update PHP templates to return JSON Response (handle success and error on object actions)

I'll try to extract you some code of projects I have to a gist so you can imagine what I'm talking about.

But this is not for 2.0.0 roadmap!!

[ioleo]

OK. About

Object actions such as "toggle isActive" or "simple action on object" (change state, ...): just execute and reload only the "row template"

It has to reload the whole "results" template. What if, the filter (or scopes) constraint is "status = 20" and action "Accept" calls setStatus(30) ? We can't reload only one row. We have to reload the whole results page. (this row would disappear from the list, as it does not meet the conditions, and "the first row of next page" would move to the end of current page as a result)

[ioleo]

Object actions into popin through AJAX

I like that idea. It would probably require some changes in controller.

But this is not for 2.0.0 roadmap!!

Agreed. I'll create a milestone "next release" and add this issue.

[sescandell]

It has to reload the whole "results" template. What if, the filter (or scopes) constraint is "status = 20" and action "Accept" calls setStatus(30) ?

This is one of the main issue about "manual AJAX" and filters. In most cases, it's acceptable to not reload all the page, even if you "line" doesn't fit anymore your filters. But this imply many other things (what if you were on the last page, what if someone else change an element from your current list and so on...).

But there is no really way to handle this properly...

[ksn135]

@sescandell may be just leave this to action's developer opinion ?
For example, I as developer of an action know what happened in my code and in my "rows".
So, I can make a decision to update single "row" via AJAX, update whole "table" via AJAX or reload (redirect to another) page in old-fashioned way. By default, all actions do things in new ajax-way, but if developer set some flags or may be execute some magic methods than old-fashioned methods will be used to deliver new updated content to the browser. It can be implemented via special top-level JSON option named "updateMethod" in resulting dataset. If this option is set to "location" then Javascript code on page do page reload (redirection) to value in specified "updateUrl" option. If value of option "updateMethod" is equal to "row", then Javascript updates only current row in table. If value of this option is equal to "table", then script reload all rows and doesn't worried about scopes and other stuff. It's ONLY developer responsibility to check scopes, filters and other things.
PS: May be I'am writing rubbish. Than excuse me for that, I'm working about twelve hours long.

[ioleo]

If it were configurable, then I see no problem.

We could probably create a plugin (or use some existing library?) to control diffrent (pre-defined) parts (blocks) of page, like "results", "filters", "row", "menu", "dialog box / modal box".

This sounds like a very nice enhancement. It could be the next thing we do after v2.0 stable (.. v2.1?).

[ksn135]

Few months ago I saw something similar on web (or news?). This idea is great!

[ksn135]

Hmm. I found it at http://api.jquery.com/load/. Section "Loading Page Fragments".
$( "#result" ).load( "ajax/test.html #container" );
When this method executes, it retrieves the content of ajax/test.html, but then jQuery parses the returned document to find the element with an ID of container. This element, along with its contents, is inserted into the element with an ID of result, and the rest of the retrieved document is discarded.
For AJAX page reload: $("body").load( url , data, onComplete(responseText, textStatus, XMLHttpRequest) )
For DOM-element replace/update: var id="#whole-table"; $(id).load( url + " " + id, data );

[sescandell]

@ksn135 I like your idea about making it configurable. Good point!

About plugin or library and so on, as I said, I already have something working in some of my projects (not configurable as @ksn135 proposed but working "on demand by the developer"). Here is a simple example of a generator:

generator: admingenerator.generator.doctrine
params:
    ...
    object_actions:
        copyTo:
            credentials: 'hasRole("ROLE_WEBMASTER")'
            label: "admin.module.object_actions.copy.label|{ %name%: Module.name }|"
            icon: icon-file
            csrf_protected: false
            class: popin
            options:
                success: admin.module.object_actions.copy.success
                error: admin.module.object_actions.copy.error
        ...
        staging:
            credentials: 'canBeDeployedOnStaging(object)'
            label: admin.module.object_actions.staging.label
            icon: icon-staging
            confirm: admin.module.confirm.staging
            csrf_protected: true
            class: ajax
            options:
                success: "admin.module.object_actions.staging.success|{ %name%: Module.name }|"
                error: "admin.module.object_actions.staging.error|{ %name%: Module.name }|"
        ...

Note the class: ajax attribute. I so have default Javascript handler that transform this action into AJAX call (managing CSRF and confirm if any). There is also the specific class: popin param... but this is another subject.