PheryResponse::getScript() not implemented?

[holtkamp]

When trying to load a script URL like

 $response->getScript('test.js');

The HTML response does not contain ANY reference to 'test.js'. How is this supposed to work?

This works:

$response->include_script($files)

But I would like to be able to use a callback function that is called when the script is loaded, which getScript() provides:

 $response->getScript('jqueryMaskLibrary.js', new PheryFunction('console.log("mask library is loaded, please go ahead and use it");');

[pocesar]

getScript is a "static" method from jquery, so you need to call it as $response->jquery->getScript

[holtkamp]

aah ok, I use PHPStorm as IDE and the docblock annotation suggests differently and thereby triggers a different autocompletion suggestion.

Will have a look how that can be improved, leaving this issue open for a bit while I try.

[pocesar]

indeed, many methods in the PHPDoc that are equivalent to $.method() are wrong (since they would need to be $this->jquery->method())

[holtkamp]

Ok, well it seems that introducing a dummy class and using that as a property on PheryResponse works. In this approach getJSON() and getScript() methods can be invoked like:

$response->jquery->getJSON();

Here the idea of the "dummy" class:

namespace Phery;

/**
 * Dummy class JQuery for autocompletion purposes
 * @method PheryResponse getJSON(string $url, PheryFunction $success = null) Load JSON-encoded data from the server using a GET HTTP request.
 * @method PheryResponse getScript(string $url, PheryFunction $success = null) Load a JavaScript file from the server using a GET HTTP request, then execute it.
 *
 */
class JQuery{
    //no content, dummy class, only for annotation purposes
}

/**
 * Standard response for the json parser
 *
 * @package    Phery
 *
 * @method PheryResponse ajax(string $url, array $settings = null) Perform an asynchronous HTTP (Ajax) request.
 * @method PheryResponse ajaxSetup(array $obj) Set default values for future Ajax requests.
 * @method PheryResponse post(string $url, PheryFunction $success = null) Load data from the server using a HTTP POST request.
 * @method PheryResponse get(string $url, PheryFunction $success = null) Load data from the server using a HTTP GET request.
 * @method PheryResponse detach() Detach a DOM element retaining the events attached to it
 * @method PheryResponse prependTo(string $target) Prepend DOM element to target
 * @method PheryResponse appendTo(string $target) Append DOM element to target
 * @method PheryResponse replaceWith(string $newContent) The content to insert. May be an HTML string, DOM element, or jQuery object.
 * @method PheryResponse css(string $propertyName, mixed $value = null) propertyName: A CSS property name. value: A value to set for the property.
 * @method PheryResponse toggle($duration_or_array_of_options, PheryFunction $complete = null)  Display or hide the matched elements.
 * @method PheryResponse is(string $selector) Check the current matched set of elements against a selector, element, or jQuery object and return true if at least one of these elements matches the given arguments.
 * @method PheryResponse hide(string $speed = 0) Hide an object, can be animated with 'fast', 'slow', 'normal'
 * @method PheryResponse show(string $speed = 0) Show an object, can be animated with 'fast', 'slow', 'normal'
 * @method PheryResponse toggleClass(string $className) Add/Remove a class from an element
 * @method PheryResponse data(string $name, mixed $data) Add data to element
 * @method PheryResponse addClass(string $className) Add a class from an element
 * @method PheryResponse removeClass(string $className) Remove a class from an element
 * @method PheryResponse animate(array $prop, int $dur, string $easing = null, PheryFunction $cb = null) Perform a custom animation of a set of CSS properties.
 * @method PheryResponse trigger(string $eventName, array $args = null) Trigger an event
 * @method PheryResponse triggerHandler(string $eventType, array $extraParameters = null) Execute all handlers attached to an element for an event.
 * @method PheryResponse fadeIn(string $speed) Fade in an element
 * @method PheryResponse filter(string $selector) Reduce the set of matched elements to those that match the selector or pass the function's test.
 * @method PheryResponse fadeTo(int $dur, float $opacity) Fade an element to opacity
 * @method PheryResponse fadeOut(string $speed) Fade out an element
 * @method PheryResponse slideUp(int $dur, PheryFunction $cb = null) Hide with slide up animation
 * @method PheryResponse slideDown(int $dur, PheryFunction $cb = null) Show with slide down animation
 * @method PheryResponse slideToggle(int $dur, PheryFunction $cb = null) Toggle show/hide the element, using slide animation
 * @method PheryResponse unbind(string $name) Unbind an event from an element
 * @method PheryResponse undelegate() Remove a handler from the event for all elements which match the current selector, now or in the future, based upon a specific set of root elements.
 * @method PheryResponse stop() Stop animation on elements
 * @method PheryResponse val(string $content) Set the value of an element
 * @method PheryResponse removeData(string $name) Remove element data added with data()
 * @method PheryResponse removeAttr(string $name) Remove an attribute from an element
 * @method PheryResponse scrollTop(int $val) Set the scroll from the top
 * @method PheryResponse scrollLeft(int $val) Set the scroll from the left
 * @method PheryResponse height(int $val = null) Get or set the height from the left
 * @method PheryResponse width(int $val = null) Get or set the width from the left
 * @method PheryResponse slice(int $start, int $end) Reduce the set of matched elements to a subset specified by a range of indices.
 * @method PheryResponse not(string $val) Remove elements from the set of matched elements.
 * @method PheryResponse eq(int $selector) Reduce the set of matched elements to the one at the specified index.
 * @method PheryResponse offset(array $coordinates) Set the current coordinates of every element in the set of matched elements, relative to the document.
 * @method PheryResponse map(PheryFunction $callback) Pass each element in the current matched set through a function, producing a new jQuery object containing the return values.
 * @method PheryResponse children(string $selector) Get the children of each element in the set of matched elements, optionally filtered by a selector.
 * @method PheryResponse closest(string $selector) Get the first ancestor element that matches the selector, beginning at the current element and progressing up through the DOM tree.
 * @method PheryResponse find(string $selector) Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.
 * @method PheryResponse next(string $selector = null) Get the immediately following sibling of each element in the set of matched elements, optionally filtered by a selector.
 * @method PheryResponse nextAll(string $selector) Get all following siblings of each element in the set of matched elements, optionally filtered by a selector.
 * @method PheryResponse nextUntil(string $selector) Get all following siblings of each element up to  but not including the element matched by the selector.
 * @method PheryResponse parentsUntil(string $selector) Get the ancestors of each element in the current set of matched elements, up to but not including the element matched by the selector.
 * @method PheryResponse offsetParent() Get the closest ancestor element that is positioned.
 * @method PheryResponse parent(string $selector = null) Get the parent of each element in the current set of matched elements, optionally filtered by a selector.
 * @method PheryResponse parents(string $selector) Get the ancestors of each element in the current set of matched elements, optionally filtered by a selector.
 * @method PheryResponse prev(string $selector = null) Get the immediately preceding sibling of each element in the set of matched elements, optionally filtered by a selector.
 * @method PheryResponse prevAll(string $selector) Get all preceding siblings of each element in the set of matched elements, optionally filtered by a selector.
 * @method PheryResponse prevUntil(string $selector) Get the ancestors of each element in the current set of matched elements, optionally filtered by a selector.
 * @method PheryResponse siblings(string $selector) Get the siblings of each element in the set of matched elements, optionally filtered by a selector.
 * @method PheryResponse add(PheryResponse $selector) Add elements to the set of matched elements.
 * @method PheryResponse contents() Get the children of each element in the set of matched elements, including text nodes.
 * @method PheryResponse end() End the most recent filtering operation in the current chain and return the set of matched elements to its previous state.
 * @method PheryResponse after(string $content) Insert content, specified by the parameter, after each element in the set of matched elements.
 * @method PheryResponse before(string $content) Insert content, specified by the parameter, before each element in the set of matched elements.
 * @method PheryResponse insertAfter(string $target) Insert every element in the set of matched elements after the target.
 * @method PheryResponse insertBefore(string $target) Insert every element in the set of matched elements before the target.
 * @method PheryResponse unwrap() Remove the parents of the set of matched elements from the DOM, leaving the matched elements in their place.
 * @method PheryResponse wrap(string $wrappingElement) Wrap an HTML structure around each element in the set of matched elements.
 * @method PheryResponse wrapAll(string $wrappingElement) Wrap an HTML structure around all elements in the set of matched elements.
 * @method PheryResponse wrapInner(string $wrappingElement) Wrap an HTML structure around the content of each element in the set of matched elements.
 * @method PheryResponse delegate(string $selector, string $eventType, PheryFunction $handler) Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements.
 * @method PheryResponse one(string $eventType, PheryFunction $handler) Attach a handler to an event for the elements. The handler is executed at most once per element.
 * @method PheryResponse bind(string $eventType, PheryFunction $handler) Attach a handler to an event for the elements.
 * @method PheryResponse each(PheryFunction $function) Iterate over a jQ object, executing a function for each matched element.
 * @method PheryResponse phery(string $function = null, array $args = null) Access the phery() on the select element(s)
 * @method PheryResponse addBack(string $selector = null) Add the previous set of elements on the stack to the current set, optionally filtered by a selector.
 * @method PheryResponse clearQueue(string $queueName = null) Remove from the queue all items that have not yet been run.
 * @method PheryResponse clone(boolean $withDataAndEvents = null, boolean $deepWithDataAndEvents = null) Create a deep copy of the set of matched elements.
 * @method PheryResponse dblclick(array $eventData = null, PheryFunction $handler = null) Bind an event handler to the "dblclick" JavaScript event, or trigger that event on an element.
 * @method PheryResponse always(PheryFunction $callback) Bind an event handler to the "dblclick" JavaScript event, or trigger that event on an element.
 * @method PheryResponse done(PheryFunction $callback) Add handlers to be called when the Deferred object is resolved.
 * @method PheryResponse fail(PheryFunction $callback) Add handlers to be called when the Deferred object is rejected.
 * @method PheryResponse progress(PheryFunction $callback) Add handlers to be called when the Deferred object is either resolved or rejected.
 * @method PheryResponse then(PheryFunction $donecallback, PheryFunction $failcallback = null, PheryFunction $progresscallback = null) Add handlers to be called when the Deferred object is resolved, rejected, or still in progress.
 * @method PheryResponse empty() Remove all child nodes of the set of matched elements from the DOM.
 * @method PheryResponse finish(string $queue) Stop the currently-running animation, remove all queued animations, and complete all animations for the matched elements.
 * @method PheryResponse focus(array $eventData = null, PheryFunction $handler = null)  Bind an event handler to the "focusout" JavaScript event.
 * @method PheryResponse focusin(array $eventData = null, PheryFunction $handler = null)  Bind an event handler to the "focusin" event.
 * @method PheryResponse focusout(array $eventData = null, PheryFunction $handler = null) Bind an event handler to the "focus" JavaScript event, or trigger that event on an element.
 * @method PheryResponse has(string $selector) Reduce the set of matched elements to those that have a descendant that matches the selector or DOM element.
 * @method PheryResponse index(string $selector = null) Search for a given element from among the matched elements.
 * @method PheryResponse on(string $events, string $selector, array $data = null, PheryFunction $handler = null) Attach an event handler function for one or more events to the selected elements.
 * @method PheryResponse off(string $events, string $selector = null, PheryFunction $handler = null) Remove an event handler.
 * @method PheryResponse prop(string $propertyName, $data_or_function = null) Set one or more properties for the set of matched elements.
 * @method PheryResponse promise(string $type = null, array $target = null) Return a Promise object to observe when all actions of a certain type bound to the collection, queued or not, have finished.
 * @method PheryResponse pushStack(array $elements, string $name = null, array $arguments = null) Add a collection of DOM elements onto the jQuery stack.
 * @method PheryResponse removeProp(string $propertyName) Remove a property for the set of matched elements.
 * @method PheryResponse resize($eventData_or_function = null, PheryFunction $handler = null) Bind an event handler to the "resize" JavaScript event, or trigger that event on an element.
 * @method PheryResponse scroll($eventData_or_function = null, PheryFunction $handler = null) Bind an event handler to the "scroll" JavaScript event, or trigger that event on an element.
 * @method PheryResponse select($eventData_or_function = null, PheryFunction $handler = null) Bind an event handler to the "select" JavaScript event, or trigger that event on an element.
 * @method PheryResponse serializeArray() Encode a set of form elements as an array of names and values.
 * @method PheryResponse replaceAll(string $target) Replace each target element with the set of matched elements.
 * @method PheryResponse reset() Reset a form element.
 * @method PheryResponse toArray() Retrieve all the DOM elements contained in the jQuery set, as an array.
 * @property PheryResponse this The DOM element that is making the AJAX call
 * @property JQuery jquery The $ jQuery object, can be used to call $.getJSON, $.getScript, etc
 * @property PheryResponse window Shortcut for jquery('window') / $(window)
 * @property PheryResponse document Shortcut for jquery('document') / $(document)
 */
class PheryResponse extends ArrayObject
{
   //normal code
}

I only don't know for which methods this exactly applies, so no PR just yet 😄

[pocesar]

nice! I was trying to figure a way myself as well haha

[holtkamp]

Additionally, some more information about my use case (might be useful for others?):

• clicking a button triggers a Phery request
• Phery request is processed and should open a dialog/modal, which contains a form
• the form uses soms functionality which depend on external sources, for example:
  • jQuery mask functionality
  • jQuery date picker funcitonality
  • ...

To make it possible that the involved JavaScript and CSS is ONLY loaded when required / the form is used, it would be nice to only load these resources on demand / as part of the Phery cycle.

A problem occurred with:

$response = PheryResponse::factory();
$response->include_script(
    [
        'urlToJavaScriptDependency1',
        'urlToJavaScriptDependencyN',
    ]
);
$response->script('$("#formElement").performSpecificFunctionality();');

would generate a message like "function performSpecificFunctionality is not defined". This seems to be a timing issue. At the time performSpecificFunctionality() is invoked, the sources have probably not loaded yet.

A workaround was to use promises:

$response->script('
    $when(
            $.getScript("urlToJavaScriptDependency1"),
            $.getScript("urlToJavaScriptDependencyN"),
        ).done(function(){
            //do all the other stuff
            $("#formElement").performSpecificFunctionality();
        }
    );'
);

This works properly. Any feedback is welcome, @pocesar seems to be a jQuery guru 😄

[pocesar]

@holtkamp you could use pub/sub in this situation. sometimes it's better to attach listeners on the client-side that are lazy loaded (like the example you posted), since it's more maintainable

<?php echo Phery::form_for('', 'function', ['class' => 'form', 'id' => 'form_id']); >
</form>

function loadFunctionality(load) {
     // you then remove this code from inside the listener, so you can reuse it, either inline, or inside another listener, etc
     return $.when(load.reduce(function(scripts, script){
        return scripts.concat($.getScript(load));
      }, []));
}

$('#form_id').phery('subscribe', {
   init: function(load){
      loadFunctionality(load).then(function(){
        this.performSpecificFunctionality();
      }.bind(this));
  }
}).phery('remote', 'popup_form');

Phery::instance()->set([
   'popup_form' => function(){
        return PheryResponse::factory()->this->show()->publish('init', [['url1','url2']]);
   }
])->process();

this way, you can test your form without even have to execute the AJAX request through phery.remote(), you can just call $('#form_id').phery('publish', [['url1','url2']]);

[holtkamp]

@pocesar would you accept a PR which contains the approach as suggested here #52 (comment) ?

[pocesar]

@holtkamp do you have a PR for this?

[holtkamp]

@pocesar well, not yet, can do it, but just wondering, this only applies for:

• getJSON()
• getScript()

Or do I need to "move" more annotations to the JQuery class? Also see the last sentence of #52 (comment)

[pocesar]

I guess that's all. not many plugins extend jQuery singleton directly. and by decoupling it to a dummy class, it could be later extended if the programmer sees fit

for example, there's jquery.payment that extends jQuery object to have it's own namespace $.payment. in this case, how could the programmer extend the jQuery dummy class to have the payment member?

[holtkamp]

for example, there's jquery.payment that extends jQuery object to have it's own namespace $.payment. in this case, how could the programmer extend the jQuery dummy class to have the payment member?

mm, yeah, good question, some IDE's allow to define such 'metadata' in a separate file.

For now I will go with the two methods.

[holtkamp]

#55

this also includes #53 for 3.0.0-alpha1. Unfortunately one PR can not target two branches, so how will we get this into 3.0.0-alpha2?

[pocesar]

yeah, would have to reset the current upstream of 3.0.0-alpha2, make the changes then PR against that branch (git problems heh)