Re: [Wonder-disc] ERJQuery
Re: [Wonder-disc] ERJQuery
- Subject: Re: [Wonder-disc] ERJQuery
- From: Johnny Miller <email@hidden>
- Date: Fri, 10 May 2013 16:54:16 -1000
Hi David,
Question about $caller - do you mean the xhr?
And the same for target do you mean the element that is being updated?
Thanks
On May 10, 2013, at 12:18 PM, David LeBer <email@hidden> wrote:
> Some suggestions:
>
> Use something like:
>
> $j = JQuery.noConflict();
>
> So there is absolutely no problem with mixing JQ and other libs.
>
> You can also replace $(window).load(function(){... etc with $j(function(){...
>
> I'd suggest namespacing your stuff:
>
> var WOjax = WOjax || {};
> WOjax.AUC = {...
>
> Don't use eval (it's eval), use: WOjax[type].initialize(element); instead.
>
> Instead of appending inline js to initialize after an update, consider using the success handler on the jQuery ajax update.
>
> Ultimately you could do something like (sorry this is not complete, do not try to copy and paste it won't work, for example purposes only, yada yada yada):
>
> WOjax.AUC.delegates = {}
>
> $j.ajax({
> url: url,
> //type: type,
> async: isAsync,
> //data: data,
> //beforeSend: function (jqXHR, settings){}, //TODO
> success: function(responseData, textStatus, jqXH) {
> if (isUpdate) {
> $target.html(responseData);
> } else {
> $target.replaceWith(responseData);
> }
> if (WOjax.AUC.delegates [options.delegate] !== WOjax.AUC.delegates && Delegates[options.delegate].success !== undefined) {
> WOjax.AUC.delegates [options.delegate].success($caller, $target, self.handleFinish);
> } else {
> self.handleFinish($caller, $target);
> }
> },
> error: function(jqXHR, textStatus, errorThrown) {
> options.errorThrown = errorThrown;
> options.textStatus = textStatus;
> if (WOjax.AUC.delegates[options.delegate] !== undefined && WOjax.AUC.delegates[options.delegate].error !== undefined) {
> WOjax.AUC.delegates[options.delegate].error($caller, $target, self.handleFinish);
> } else {
> self.handleFinish($caller, $target);
> }
> }
> });
> },
> handleFinish: function(caller, target) {
> var self = WOjax.AUC;
> $caller = $j(caller),
> $target = $j(target),
> options = $caller.data('wo');
>
> if (WOjax.AUC.delegates[options.delegate] !== undefined && WOjax.AUC.delegates[options.delegate].finished !== undefined) {
> WOjax.AUC.delegates[options.delegate].finished($caller, $target, self.handleCompletion);
> } else {
> self.handleCompletion($caller, $target);
> }
> },
> handleCompletion: function(_item, _uc) {
> console.log("WOjax update complete");
> // handle container init here?
> }
>
> So when something updates, users can specify the name of a delegate in their options, and then create the delegate in WOjax.AUC.delegates that implements 'success' or 'finished' or 'before'.
>
> The delegate gets called with the caller, the target element and a call back to finish the process.
>
> // Demo Delegate
> WOjax.AUC.delegates.testDelegate = {
> before: function (caller, container, callback) {
> container.slideUp('slow', function () { callback(caller, container) });
> },
> success: function (caller, container, callback) {
> container.slideDown('slow', function () {
> container.effect("highlight", {}, 1000);
> callback(caller, container);
> });
> },
> finish: function (caller, container, callback) {
> callback(caller, container);
> }
> };
>
> Sorry if this is sloppy or makes little sense. Typed into email. It's been a while since I looked at it. It's great someone is looking at implementing this, I'm just hoping this feedback helps so the foundation is solid and primed for growth ;)
>
> D
>
> --
> David LeBer
> Codeferous Software
>
> On 2013-05-10, at 4:47 PM, Johnny Miller <email@hidden> wrote:
>
>> Cool. Thanks Ken.
>>
>> I tried out some stuff last night.
>>
>> Basically I formatted the HTML for the AjaxUpdateContainer to be something like this:
>>
>> <div data-wonder-id="AUC" data-wonder-options = "{'someKey': 'someValue'}">...</div>
>>
>> Then I create an on load statement:
>>
>> $(window).load(function() {
>>
>> $('[data-wonder-id]').each(function(index, element) {
>>
>> element = $(element);
>> var type = element.attr('data-wonder-id');
>> eval(type).initialize(element);
>>
>> });
>>
>> });
>>
>> Then in the AjaxUpdateContainer javascript object I added a method called initialize:
>>
>> initialize: function(element) {
>> var options = jQuery.parseJSON(element.attr('data-wonder-options'));
>> if(options.hasOwnProperty('minTimeout')) {
>> AUC.registerPeriodic(
>> element,
>> options.hasOwnProperty('canStop') ? options.canStop : null,
>> options.hasOwnProperty('stopped') ? options.stopped : null,
>> options
>> );
>> } else {
>> AUC.register(element.attr('id'), options);
>> }
>> },
>>
>> In the event that the AUC is created as part of an Ajax Request I add a little javascript during appendToResponse:
>>
>> <script>AUC.initialize($("#e_0_15_3_3_1"));</script>
>>
>> So my thinking is that all the components that need to be initialized when the page gets loaded just need to implement initialize. I guess I should create two options objects one for initialization options and one for ajax options?
>>
>> Anyway for anyone is interested, I updated my example here: http://www.kahalawai.com/JQuery
>>
>> best,
>>
>> Johnny
>>
>>
>>
>> On May 9, 2013, at 4:36 PM, Ken Anderson <email@hidden> wrote:
>>
>>> I think this is awesome! I'm definitely planning on using JQuery within the next few months, and will happily contribute once I get to that point.
>>>
>>> Ken
>>>
>>> On May 9, 2013, at 6:19 PM, Johnny Miller <email@hidden> wrote:
>>>
>>>> Hi Pascal,
>>>>
>>>> I started working on a JQuery framework and I'm up to one component!
>>>>
>>>> You can see it here: http://www.kahalawai.com/JQuery
>>>>
>>>> I'm pretty busy but I think I could make one component a day. I was wondering what people thought about a couple of questions I have:
>>>>
>>>> 1. Should I use data attributes? One thing I would like to do is not pollute the HTML with JavaScript code. Now with my first example (the periodical updater) I'm not sure if that's possible i.e. When the page loads I can find the ajax update containers but what about an ajax update container that is returned from an ajax request? But for a lot of the other components like ajax update link I could just register a trigger using the data attributes.
>>>>
>>>> 2. Should I tie the framework to a look like JQueryUI or Bootstrap? Some of the components like date pickers and modal containers need a default styling.
>>>>
>>>> Do you think I should keep on keeping on or has somebody already developed a framework they are about to release or is there a new better idea?
>>>>
>>>> Aloha,
>>>> Mr. Johnny Miller
>>>> Web Development Manager
>>>> Kahalawai Media Company
>>>> Lahaina, HI 96761
>>>> tel: (808) 661-7962 | mobile: (808) 283-0791
>>>> website | e-mail
>>>>
>>>> On Apr 6, 2013, at 1:41 PM, Larry Mills-Gahl <email@hidden> wrote:
>>>>
>>>>> There was some talk about directing some new development effort toward jQuery in Wonder.
>>>>> I've been working on some bits in this framework and am coming to realize that there are some organizational issues that could go a couple of different directions and I was wondering if there are any forks out there that are working on this that I might pull from and contribute to.
>>>>>
>>>>> Among the questions that might benefit from some planning are about multiple frameworks and dependencies. Specifically, the ERJQueryMobile framework has jQuery javascript resources and so does the ERJQuery framework (and potentially ERJQueryUI if we decide to separate jQuery from jQuery-UI … which is probably a good idea. Since mobile and UI both depend on jQuery, would it make sense to load those from ERJQuery and update the version handling so that one could load whatever version of jQuery you need.
>>>>> Essentially, making some loader classes in ERJQuery able to load the right version from local resources or a CDN depending on the need.
>>>>>
>>>>> Anyway… there are a few design decisions that will affect how the framework(s) interact and I wanted to know who else out there had done work on this that I might contribute to.
>>>>>
>>>>> Thanks.
>>>>>
>>>>>
>>>>> Larry Mills-Gahl
>>>>> email@hidden
>>>>>
>>>>>
>>>>>
>>>>>
>>>>>
>>>>>
>>>>> ------------------------------------------------------------------------------
>>>>> Minimize network downtime and maximize team effectiveness.
>>>>> Reduce network management and security costs.Learn how to hire
>>>>> the most talented Cisco Certified professionals. Visit the
>>>>> Employer Resources Portal
>>>>> http://www.cisco.com/web/learning/employer_resources/index.html_______________________________________________
>>>>> Wonder-disc mailing list
>>>>> email@hidden
>>>>> https://lists.sourceforge.net/lists/listinfo/wonder-disc
>>>>
>>>> _______________________________________________
>>>> Do not post admin requests to the list. They will be ignored.
>>>> Webobjects-dev mailing list (email@hidden)
>>>> Help/Unsubscribe/Update your Subscription:
>>>>
>>>> This email sent to email@hidden
>>>
>>
>> _______________________________________________
>> Do not post admin requests to the list. They will be ignored.
>> Webobjects-dev mailing list (email@hidden)
>> Help/Unsubscribe/Update your Subscription:
>>
>> This email sent to email@hidden
>
_______________________________________________
Do not post admin requests to the list. They will be ignored.
Webobjects-dev mailing list (email@hidden)
Help/Unsubscribe/Update your Subscription:
This email sent to email@hidden