twinstone / tdi Goto Github PK

When link is clicked with a ctrl key pressed, the user indicates that he wants to open the result into a new window. I think that TDI should in this case just ignore the TDI condition and progress with the default behavior, which is sending normal request and opening the result to a new window.

Maybe this behavior may be preventable (indicated by class, or data attribute), if the author of the link knows that opening to a new window has no sense and TDI in the current window should take place anyway.

Such as like this:

function _onBeforeLinkClick( evt ) {
            if (evt.ctrlKey) {
                // do not intercept ctrl+key
                return;
            }
            evt.preventDefault();
            ...
}

They contain mostly the same data and it can be confusing, that there are two of them. There should be only one of them, containing all the data.

Consider implementing of multipart form submit using regular ajax, which should be supported by modern browsers, instead of hacky fake ajax simulated by iframe.

It would provide more consistent bevarior, such as the possibility to send custom http headers which may be sent by other ajax calls.

The implementation of _error, triggers tdi:ajax:error on involved elements, or on document by default. However, there may be multiple involved elements, in which case the event is fired multiple times for each element.

Typical usage of the event is

$(document).on("tdi:ajax:error", errorHandler);

The errorHandler is usually not interested in the element which triggered the event (involved element or the document), and calling the handler multiple times is not desired.

The functions is now deprecated:

http://jquery.com/upgrade-guide/3.0/#deprecated-bind-and-delegate

Sometimes, the ID attribute (used as target) contains characters which have special meaning in CSS selectors (dot, colon). Using $(id) method causes troubles in these cases.

As the target attribute must contain only ID anyway, TDI should use something like this to find the target element: $(document.getElementById(target))

Fails with error in Sizzle.setDocument in the following code:

    // Support: IE>8
    // If iframe document is assigned to "document" variable and if iframe has been reloaded,
    // IE will throw "permission denied" error when accessing "document" variable, see jQuery #13936
    if ( parent && parent.frameElement ) {
        parent.attachEvent( "onbeforeunload", function() {
            setDocument();
        });
    }

parent.attachEvent being undefined in IE11.

Events (such as ajax:tdi:start, ajax:tdi:end etc.) are being triggered N-times when a form is being submitted; where N corresponds with a length of the array data.options.involvedElms of the data param of a callback function bound to events mentioned above (see the example below). As you have noticed, it's probably caused by TDI that is trying to notify each participated element.

Example:

In the following example, both mentioned events are triggered two times; for the first time with a form as an event target and for the second time with a button.

<a href="[url]" class="tdi">link</a>

<form class="tdi" method="post" data-ajax-url="[url]">
    <input type="submit">
</form>

require(['jquery', 'tdi'], function($, TDI) {
    $(function() {
        $(document).on('tdi:ajax:start', tdiStartCallback);
        $(document).on('tdi:ajax:end', tdiEndCallback);

        function tdiStartCallback(evt, data) {
            console.info('EVENT: tdi:ajax:start');
        }

        function tdiEndCallback(evt, data) {
            console.info('EVENT: tdi:ajax:end');
            
            // contains the participating elements:
            // - link click –> the <a> only
            // - form submit –> <form> and <input type="submit">
            // data.options.involvedElms

        }
    });
});

(To be sure, I included the require.js statements too.)

Move documentation and relevant pages from twinstone.org to Github pages.

Shouldn't we rename the "_infuse" parameter to "_tdi"?

My suggestion is to remove it with a possibility to force the old behavior by some JS parameter/configuration.

_infuse does no longer mean just infusion. And this may lead to confusion.

What coding style does TDI use?

Could it be reformatted using any well known one so eslint or another tool can be used to check the source?

The function $(window).unload has been removed in JQuery 3, see: http://jquery.com/upgrade-guide/3.0/#breaking-change-load-unload-and-error-removed

Fix: $(window).on('unload', func)

When replace="true" is used on a <update> instruction, the event tdi:ajax:update is not triggered, because the element on which it is triggered is no longer a part of the DOM.

The event should be triggered on the new element.

Environment

• jQuery 2.1.4
• TDI 1.9.1

Steps to reproduce
Submit a form with text inputs only (TDI class included ;)).

Observed behaviour
The POST is sent with "multipart/form-data" header. Although it should contain a "application/x-www-form-urlencoded" header.

Related to the #11 probably..

Builds on Travis are failing since v1.9.2

When a TDI response carries two script instructions, one with src and the other one inlined, the first one is not completely loaded before the second one starts. If the second instruction depends on definitions made by the first one, it may fail unexpectedly.

Example:

<status>OK</status>
<script id="demo-hiding-support" src="some-file.js"></script>
<script>
    someFunctionX();
</script>

If the someFunctionX is defined in the some-file.js, the very first call fails saying it is not defined yet. Repeated invocation do work.

The selector attribute for update/insert instruction is not documented:

https://wiki.twinstone.org/display/TDI/update

The target attribute is documented as required but the implementation allows selector attribute to be present and it takes precedence before the target. (see: https://github.com/twinstone/tdi/blob/master/src/js/tdi-ajax.js#L961)

Current tests are starting to be a hinderance in the development process. They are really slow.

Tests should be divided into 2 groups:

1. Fast unit tests for testing the API: these could (and should) be run as often as possible.
2. Some sort of integration tests in a real browser(s): run during a build process (travis)

The project wiki contains link to Jira Tracker:

https://wiki.twinstone.org/display/TDI/TDI+-+Turbocharged+DOM+Infusion

which contains issues which are not available here.

Return jqXHR object from $.ajax calls so it can be programatically cancelled.

When using TDI API calls, allow to pass any of the jQuery.ajax() settings. See: http://api.jquery.com/jQuery.ajax/

Our use case:

<update target="#target" custom-attribute="value" />

Js hook:

$(document).on('tdi:ajax:beforeUpdate', function (e, eventData) {
  var $target = eventData.target;
  // there no access to the original tag attributes
});

As per docs there are several properties of the event playload available, but there is no access to the original tag attributes (like in _onBeforeUnknown).

I patched the TDI function which triggers the event and includes the additional tag attributes. I can now access the tag attribute:

$(document).on('tdi:ajax:beforeUpdate', function (e, eventData) {
  var $target = eventData.target;
  var $tag = eventData.tag;
  var customAttribute = eventData.attributes['custom-attribute'];
  // do something cool :-)
});

We use the attribute to decide if the UI should highlight another element. We used script instructions before, but it was problematic.

Could TDI include the additional/original tag attributes for update and insert instructions?

Uncaught TypeError: e.target.find(...).andSelf is not a function

http://api.jquery.com/andSelf/

Please release new version.

Thanks :)

Lighthouse penalizes for "unload" event. Possible replacement is the "pagehide" event:

const terminationEvent = 'onpagehide' in self ? 'pagehide' : 'unload';
addEventListener(terminationEvent, (event) => {
  // Note: if the browser is able to cache the page, `event.persisted`
  // is `true`, and the state is frozen rather than terminated.
}, {capture: true});

Since some version the tdi:ajax:updatesDone event is fired preferably on "involved elements", which may be the DOM element that triggered the TDI request, such as link. TDI relies on the event bubbling from the related element to the document.

However, if the result of the TDI request is the involved element removed from DOM, the event does not bubble, and the event handlers on document do not get called.

Sometimes it is required to send data in POST reques using TDI.Ajax.Request.send, which may be potentially large, and would exceed server limit (POST requests are sent url-encoded by default).

multipart/form-request encoding should be also supported. If FormData object is passed to the send method, the call fails. Send method internally uses jquery ajax call, which requires to pass processData = false and contentType = false parameters to successfully process FormData parameters.

FormData should not be used when sending a form using a GET method. We should serialise the form contents instead.

When TDI intercepts a link click, it stops propagation of the click event. Which prevents other components from intercepting the event and doing something useful (e.g. closing menu, dropdown, dialog etc).

No additional info needed.

If you submit the following form:

<form method="POST" enctype="multipart/form-data" class="tdi">
...
</form>

and the form body does not contain file input, it fails. Presumably because the form is set encoded application/x-www-form-urlencoded, but without proper content type.