Fixed JS and CSS Files included in JSON inside AJAX requets were not loaded

[Hoffi]

Hi there,

I added inside a template via <xen:reqiure a css and a js file.

this template (here: poll_block:result) are now loaded via AJAX. (here: after cast a vote on a poll)

In the JSON Feedback from the webserer are the new files included in the fields js and css.

But they are not loaded.

Tested in Chrome 36 and IE11.

 

[Chris D]

Have you run the data returned via AJAX through the XenForo extLoader?

new XenForo.ExtLoader(ajaxData, function(ajaxData)
{
    // Do stuff now.
});

 

[pegasus]

Note also that any CSS and JS returned in this way are all loaded asynchronously. If the order of the Javascript or CSS matters, they will break in this context. I am not aware of any workaround to this issue, short of moving the requires out to the page that made the AJAX call and not sending them via AJAX at all, or completely overriding XenForo.ExtLoader so that the resources load sequentially.

This is particularly problematic for editor-related scripts, when Redactor callbacks must be registered after Redactor is available but before XenForo initializes the editor instance.

 

[Hoffi]

Have you run the data returned via AJAX through the XenForo extLoader?

Not yet. I thought, this fields are XF standard, so it should loaded. If I am wrong, okay.

I'll give the ExtLoader a try and post it here.

 

[Hoffi]

How should I implement an extloader in an existing AJAX Call.

I just took a look inside the extloader Prototype, and it seems that the js should be loaded. But actually I have no idea, why it's not loading after voting on a poll.

 

[Hoffi]

The PollVote Block inside the XenForo js did not create an ExtLoader. Maybe this can be the problem?

 

[cclaerhout]

As Pegasus said, during an ajax load the required files will be loaded without taking care of the order of the XenForo "require" tags. It shouldn't be a problem for the css, but it does for some JS with dependencies. I've coded a small workaround here (see how it works there; ref:"zLoader").

Now if even your loaded css are not working, the problem is certainly coming from another reason.

 

[Hoffi]

No, thats not the problem.

The CSS and JS injected inside the template are in the value fields from the json included.

But the js function around the cast vote function did not use the extloader function, which loads the files asynchronusly. The files did not load. It can be seen in the network console.

 

[cclaerhout]

Without seeing the code, it hard to tell you more. You might need to check if you need to use "xfActivate()" on the jQuery loaded element.
You might need to check this too:

1. XenForo.ajax(...)
2. new XenForo.ExtLoader(ajaxData, function(){...})
3. $myHtml.xfActivate()

 

[Hoffi]

It's orginal XF JavaScript. The AJAX Handler is not mine. It is the XenForo Poll Handler, and there is no ExtLoader function used.

 

[pegasus]

As Pegasus said, during an ajax load the required files will be loaded without taking care of the order of the XenForo "require" tags. It shouldn't be a problem for the css, but it does for some JS with dependencies.

Do you know if anyone ever reported this design issue to @Kier or @Mike ?
I too have been struggling with it for some time, and I'm not particularly fond of overriding core XenForo JS functions, although that is currently the only decent workaround. The option of preloading all JS on the main page load is not practical because you have to start anticipating every possible context the AJAX might ever be called. If the AJAX is particularly reusable (e.g. it tacks onto the editor or Like features, and perhaps those are even loaded via AJAX in some cases -- quick edit anyone?), anticipating it in this way can be impossible.

 

[cclaerhout]

@pegasus
See this post of Mike. As you will see, I've decided to use the second option and extend the ExtLoader and order the JS according to some suffixes in their names. That's not the sexiest solution but it's working.

 

[pegasus]

Yes, because particularly in the case of JS extensions to the Redactor editor, if Redactor is loaded already via ExtLoader, @Mike 's suggestion of changing the way you load dependencies is not possible.

In this case, the dependency is Redactor, which is under XenForo's control. Many extensions that require subscribing to Redactor's event system must be subscribed before XenForo creates its instance of Redactor for the editor. If the extension is not placed in the middle sequentially, the timing to subscribe some of the events is missed (onInit, for one).

Thus if either Redactor and/or XenForo's editor script that uses it as a dependency is loaded via ExtLoader, we enter a race condition between ExtLoader and Redactor's own event system.

Since the editor can be called by any XenForo script, first- or third-party, for someone only interested in extending the editor in general, there is no way to control whether the editor is loaded via ExtLoader or a safer script, without replacing ExtLoader entirely.

Since extending Redactor would not be a fringe case -- there are probably plenty of coders who would like their editor buttons to call custom scripts, and Redactor itself has a healthy library of scripts -- replacing ExtLoader can quickly become messy business as soon as two or more add-ons try to add an editor button that does this.

I suppose this particular case can be resolved if XenForo doesn't initialize any single Redactor instance until ALL OTHER KNOWN SCRIPTS have finished processing. But I think in the interest of having a responsive editor, changing ExtLoader to load sequentially when Redactor / editor related scripts are detected in the queue would be more ideal.

 

[cclaerhout]

@pegasus, I don't know if it can help but for the XenForo Redactor Editor, if you want to add buttons, all you need to do is to create a listener of the EditorSetup and specify some json elements for the editor options. See the post of @sonnb here.

 

[pegasus]

The problem is that the buttons must also have custom Javascript callbacks, and these can only be attached to the button once it becomes available in the DOM, or at least must be registered through Redactor before the editor initializes. Unless I'm missing something and XenForo provides a capability to set custom callbacks for button clicks.

I didn't realize you could set the buttons in that way. That will help with part of the problem, but the custom callback (to make a popup) will still be a challenge, I think.

 

[Hoffi]

I can't get the way to the redactor editor with this problem?

The Voting JavaScript is not using an overlay, I think that is the reason why not Loader is used in this script.

I will give a try to load the JS on the Main Page, but that's not my preferred solution. I think, this is a bug because the parameters in the JSON File are set, but not used.

 

[cclaerhout]

@Hoffi
Could you share your code ?

 

[Mike]

Please take discussion unrelated to this specific bug report to the appropriate forum.

 

[Hoffi]

@Hoffi
Could you share your code ?

I add two <xen:require> Tags inside the Template poll_block_result.

It's an AddOn to change the Poll Display. I can deploy the actual Beta State as a ressource, it would help.

 

[cclaerhout]

I can deploy the actual Beta State as a ressource, it would help.

Put it on Github, it will give you time to code it properly.