Hi @admin & fellow cooks,

Just wondering what the best way to utilise jQuery's ajax capabilities inside a cook (or in fact, any Joomla component) is? Just to clarify, I don't require any assistance on how to use the jQuery method.

Why???
In the interests of creating a fluid, responsive and app-like frontend (and possibly backend) component, I really want to leverage the power of jQuery's ajax method.

Musts

• Leverage all of the inbuilt and custom queries/functions of the models/tables
• Maintain all of the auto-generated security/checks from the models/controllers as default - i.e. I don't want to have to rewrite validation/user feedback for the ajax calls and results.
• Work within the confines of ACL/Viewing settings - i.e. only data, views, tasks and layouts that a user would normally have access to should be available asynchronously

Questions & Considerations

Could anyone suggest;

1. A method of implementing this dynamically that would allow this type of interaction with any model, view or controller in a COOK generated component
...OR...

2. If making it dynamic is not possible, realistic or even just a bad idea, what would be the best way to handle/call the functionalities of a given model, table or view?

Many thanks in advance for any input!!!

Gez

Also, this might help to answer the query by @edwardcox RE: multi-table-input-using-breadcrumb-nav-or-step-by-step

Gez

Well, Joomla has not been created for this, but it is possible.
If you use a classic way, it is difficult to have multiple forms in the same page.
So the solution is ajax, as you said.

I tell you it is possible, because Cook Builder is 100% full ajax. It load one template file at the beginning, and then, always deal with ajax.

a. One solution is to turn up in a full JS application.
b. Another solution is to mix both, and have sometimes ajax calls, wich is possible as well.

Something you have to choose is how you get your result :
In the (a) case, you might recieve your datas in JSON (unlimited structure), and the JS is rendering them dynamicly, it is the best, but not the easiest.

In the (b) case (few ajax calls), you can decide to return rendered HTML. So in your JS, you only need to show the result.

I prefer the (a) case for few reasons.
- You cannot return unapropriate HTML, if the url is wrong
- You can handle errors
- You can deal and reuse easily the results.
- You write all the JS and rendering in one place (not a mess)
- More flexible

A last but not least advice :
Always use the TOKENS when you deal with AJAX.

Thanks admin!!!

Please could you provide an example of how I might go about option a? I am familiar with the json_encode/decode, AJAX, jQuery and JS but am unsure how to leverage this in one place as you describe.

I mean, how/what kind of function needs to be placed in the default landing page of the component to begin working with my component in this way?

---

ADD

---

Also;

1. Would I continue to build all of my views & layouts in the traditional way then call them via ajax
AND, if so....

2. Would this allow me access to pull all of the queries/custom queries from tables/models
AND

3. How would saving/Editing work? Would I simply add a click event handler to the button that calls the relevant url with the task?

---

END

---

I can see that this would almost certainly be best for most of my application as it is ultimately a project/task management pretty much reliant throughout on user interaction via forms.

I will however need to have a few conventional pages that display in the traditional format - pages that are for public, not project users. I would therefore need those 'public' pages to be well indexed by search engines which is the reason that those pages only, would need to be served via regular http requests.

Any help/advice/examples would be most welcome...

Many thanks,

Gez

P.S. It goes without saying that I will gladly share my results with the COOK community to reciprocate your kind help on this and as soon as I'm done I intend to make some step by step video tuts for you too!

In the a case, all you need is to have models and controllers availables and working.
The controllers, receive the post of the ajax call (exactly the same)
The models, prepare and modify the datas (same as well)

All you need is to get the right SQL queries when you call objects, so if you didn't have created layouts for that, the predefined SQL queries will not be created.

So, to my opinion, the simpliest is to create all your fictive layouts, then delete them after download.
You must remove the template files (behind tmpl/ ), and the functions in the view.html.php refferring to that layouts.

IMPORTANT : As convention for the future of cook, when you deal with ajax, please setin the GET or POST query.

So you will arrive in the displayAjax() function of view.html.php, and inside, you can switch the result, using the 'render' var :
Of course, this displayAjax() is automaticaly created for this view, when you decided to use Ajax for this context.
You can copy this function, but don't forget to add 'ajax' in the accepted layouts aliases in the display() function :
Ex :
Then what to do ?
When layout=ajax&render=myExample :

displayAjax() :
in the switch, add a case : 'myExample', and write everything here (a. or b. cases)

Call a model and setup the context query (a context query has been already defined, or create a new one)
Note : Use the state vars to define the context :Populate $myObject with this model (I don't explain in details what you already know)

in the b. case, you can use JDom to facilitate the rendering (see Ajax features, based on b. case)
and finish with :

in the a. case, finish with :
That's all for PHP.
JS in another post... to be continued

Now in JS...

Handle properly the Ajax call with jQuery, or another framework.


You can handle the results of the query : success, failure, timeout
Failure and Timeout, are only able to manage the traffic issues. So, if you have any Joomla restriction (Checked out, ACLs, Accesses, unpublished, ...), It will not have any effect, because the connection will have been OK, and the result have been sent.

The succes callback function will be called.
So the problems starts.

Handling a Joomla issue will not be explained here for the moment.

Case a.
Just output the result in a div ready for it (handler)

Case b.
Decode your JSON string back in an object. Use the JS framework for that.
You can eventually check the coherency of the object and handle the error here.

Let's say your object is perfectly decoded...
Play with it !!!

My advice for that :
Recreate a rendering class, wich will be able to treat and create HTML from an object.
Some of your calls will always be the same, some will have differencies, so all the good work is to create a good architecture to reuse common functionalities for all your ajax calls.
You are creating a little framework for recieving always the same data formats.

Hum there is no ending for that, you can spend a lot of time building a framework...
I would like to implement a such framework to build JS applications, but I do not seen any good Open Source Framework that can do such job. Maybe bootstrap ? I have to check closer. Sooo late...

And to finally finish about the errors :
The best is not to output the JSON object only.
Create a standard object structure wich will always be the same for all your calls (case a.)
In this object, you have 2 properties :
-> data
-> transaction

data contain your object, (or array for lists)
transaction contain the result of the call.

transaction can describe
- the messages stack
- errors after trying an operation
- 404, 403, 500, ACLs, Accesses, etc...

How to implement this ? Good question !
All contributions are welcome.

To finish, I would like to say it is difficult to recreate something that is not existing in Joomla!, because it can become obselete if the core decide to implement such functionalities in Joomla!

I would not want to decide alone of the standards that will be applied to all of us. I want an application that has been build in collaboration in order to fit the needs of everybody, and to take advantage of the most experimentated users.
So implementing such AJAX application in Cook native is possible, but It will take time for these reasons.
I am waiting for these features. It will be an amazing cream on the cake !

Thanks admin!

I appreciate it so much! I'm gonna get all over this in my basic component to implement/test it and will report back the results...

Something that might be of interest to you (OR NOT) is;

A while back, I came across a small but very handy widget/script for generating editable jQuery/Ajax grids called OpenJSGrid... Examples here (Free/Opensource download)

Essentially, it is a php class file (about 80 lines or so) and a collection of methods for creating a JS grid to display tabular data ideal for list views - although this is not a joomla thing as such. It only requires that you have jquery & jquery ui libs loaded + the grid.js ... Then, to implement it, one just has to have a 'view' file for the ajax data (the sql query) say, 'myview.ajax.php' and in the html output something as simple as;

1. AJAX
   
   
2. JS
   
   
3. HTML
   
   
4. RESULT
   
   

The beauty of it comes when you can specify editable cells that obey various different formats such as date (cal picker), I even got a progress bar on each row pretty simply. Example of editable grid with maxlength from db

1. I was using it in a very raw way as described on the site, i.e. outside of the joomla framework but wonder, how easy would it be to transform the class file for inclusion in a COOK component to go get a model list view dynamically? Presumably a new JDom class would be the way to go here???
2. Would it be of any interest to you to integrate this into the core cook functionality?

Anyway, thanks so much for your assistance on this!!!

One last thing.... RE: Handling the errors - is there a way to leverage the Joomla errors inside of the transaction part of the JSON obj?

Gez

Before to exit your object result, just ask to the JFactory its list of JExceptions.
I do not remember how for the moment. Must search.
You can fill transaction more clever :
-> isError
-> message
-> exeptions (the list of Joomla exeptions)
-> ...

Join the 2 objects in one stdClass : {data,transaction}
Output it.

And of course, the preparation of this returned object can be done through a helperajaxResponse is asking by himself the exceptions stack and populating the transaction object as it wants.

This is really the best, and a good start.
Then, wich convention to decide for these vars in transaction object ?

...to be continued... please contribute to this documentation and this new standard we try to create.


-- EDIT ---Can also output with jexit().
BUT, I think it is not a good Joomla standard.
It is only one line : jexit(json_encode($result));, but soo important for the MVC standard.
Because all the outputs must be done in the VIEW.HTML.PHP, not in a helper.

The helper is preparing, the view is outputing.

Hope it helps.

Thanks for this!

Clearly, I have a lot of work ahead and this is more than a brilliant start!!!

Also, great tips on how I might go about handling/reporting J errors... Again something I need to look into to further my understanding!

What do you think of the idea of the JS Grid?

Many thanks, YOU ROCK!

Gez

Well I have two comments on all of this :
First : i read it all out : now i need to take a nap
Second : looks like admin enjoyed his hollidays, never saw him write so much

Hi VeCrea,
VeCrea wrote: +1 - Phew, tell me about it!VeCrea wrote: +100 for taking holidays! I need to remember that myself sometimes. Clearly its good for the soul and regenerating us!!!

Forgot to say WELCOME BACK @admin and thanks again for all the help!

Gez

Unfortunatly, I do not have time to check JS grid for the moment.

If you want to go on, with or without JS Grid, the best is really to abstract at maximum your functions.
Try to create a bridge JS class, wich is calling JS Grid.

Only something that is able to convert a standard we can decide here, to a language understood by JS Grid.

What does it means ?
- Is is abstracted, so more clean
- It can be replaced by another

If somebody wants to use JS grid, he uses your bridge class.
If somebody else want to use something else, he can use another bridge class.

The idea is to uniformize the format and use of the bridge.
This is ABSTRACTION

It seems complex and you do not need to write all that for your project, but if you want to share, or if I decide to integrate, then it is a fundamental until Joomla! core given the instructions for a standard.

Another great idea : Writing in the core !!

Well, because I love to help you.
Now I have to debug all the Tickets and this is not the same. lol.

In these few days I will not be present a lot. But always ok for some discussions and help.

That's why we all love COOK!!! Not just the awesome application but the awesome support and willingness to discuss it's development so openly!

Glad you had a nice holiday and good luck with the tickets... Us junior chefs and pot-washers have tried to help as much as possible in your absence but I'm sure a lot of people (as well as us) will be glad of your return!

Best of luck and thanks again,

Gez

Yes thank you so much for your help.
When I checked out the new topics, lots of them was solved by you.

I am thinking opening candidatures for moderators because it could be nice to filter the topics that really need a developper or an admin.

If you are interressed in moderator candidature, please open a new post for that.