XF 2.0 Load template by ajax

[gotski]

Hello, if I load a template by ajax

return $this->view('XF:Member\Listing', 'my_template_name', $viewParams);

this loads the full page structure, how do I load only the contents of the template?

Thank you!

 

[Mike]

If you're doing this through XF's ajax systems/existing JS frameworks, this should generally happen automatically. You'll need to give more details about how you're calling this code.

 

[Scandal]

Hello all!
I have the same question with this thread's starter and to extend it a bit.

Basically, I need some help about two issues:
1. Could anyone provide an example of XF.ajax which has as response an HTML template which its result goes to an #id element?

I have already achieve what I need via jQuery.get(), but:
-> when I put the response data to the div via jQuery('#myId').html(data.html.content);
... the result is a raw HTML appearing. Example: I will see <span style="color:blue;">blahblah</span> instead of "blahblah" test in blue color.

2. I had the same problem with thread starter: after the AJAX call, I'm receiving a full page structure, but I just need only the one template.
I solved it by adding: $this->setResponseType('json');
... before the view reply on the controller, so I'm getting the HTML then via "data.html.content", but I have the issue with the raw html described on #1.

The stuff on the internet and on xenforo.com about XF2 integrated javascript framework is very limited so I think the above are some interesting questions for now and next developers.

Thanks in advance for any information.

 

[asprin]

Add me to the list. An example would be nice.

 

[robdog]

Here you go:

    XF.SomeEventHandlerName = XF.Click.newHandler({
        eventNameSpace: 'XFSomeEventHandlerName',

        init: function() { },

        click: function(e) {
            var el = this.$target,
                config = {
                    method: 'GET',
                    action: [YOUR_URL_ENDPOINT],
                    successCallback: XF.proxy(this, 'processResponse'),
                    ajaxOptions: { skipDefault: true }
                };

            XF.ajax(
                config.method,
                config.action,
                {},
                config.successCallback,
                config.ajaxOptions
            );
        },

        processResponse: function(data) {
            XF.setupHtmlInsert(data.html, function($html) {
                $('.output-container').html($html);
            });
        }
    });

    XF.Click.register('xf-some-event-handler-name', 'XF.SomeEventHandlerName');

<div class="output-container"></div>
<a href="#" data-xf-click="xf-some-event-handler-name">Load HTML</a>

Hope this helps.

 

[asprin]

Wonderful. Let me try it out.