Developing (v7+)

 

Remo replied on Jul 31, 2012 at 7:15 am Permalink Reply

I don't think you can! Either use a "tool" or a "single page" (controller)..

Steff replied on Jul 31, 2012 at 7:37 am Permalink Reply

Thank you Remo

So I'll do it with a single page and some in page css to hide the header and footer.

Remo replied on Jul 31, 2012 at 7:39 am Permalink Reply

Well, you can also create a new controller method

class YourController {
   function hello() {
      echo 'output from element';
      die();
   }
}

and then call your_controller/hello

The controller method gets called first and if you "die", you shouldn't get any elements from view.php (out of your theme)

Steff replied on Aug 2, 2012 at 2:26 am Permalink Reply

Ok. Just to be sure.
I am going to pack the whole form, 150 lines of code, into a function in the single page controller.

Right?

Remo replied on Aug 2, 2012 at 3:43 am Permalink Reply

No, you can keep your element, but you could put all the code in the controller. Just look at the code Scott posted, that's pretty much all you need!

ScottC replied on Jul 31, 2012 at 8:54 am Permalink Best Answer Reply

This is pretty straightforward:
Remo is right (as always)

DashboardTimeTrackerController extends Controller{
function loadElement($element){
Loader::packageElement($element,'time_tracker',$_GET); ?>
die();
}
}

What is really nice about this vs say loading from a tools request is you don't have to duplicate the functionality or permissions handling that is around the single page in the dashboard. If they can see that page (and its controller) then they should be able to do any action shown there. Compare this to about 10 lines of boilerplate on every tool or 10 lines somewhere you call from your tools request and I'll take my way every time :).

Steff replied on Aug 2, 2012 at 7:08 am Permalink Reply

Thank you Scott and Remo.

Works great.

JohntheFish replied on Aug 2, 2012 at 4:23 am Permalink Reply

In addition to all the above, you could also pop up the form in a dialog rather than in a separate window (separate windows can run fowl of popup blockers in browsers).

The C5 jQuery dialog is now essentially a layer on top of a jQuery.UI dialog with a capability to load the dialog content from a url (such as an action in your controller or a tool). Beware that some of the dialog parameters behave a little differently and events have different names.

Steff replied on Aug 2, 2012 at 11:14 am Permalink Reply 1 Attachment

Thank you John

As long as you're using a desktop browser, overlays are great. But as soon as you work with a mobile browser, it's a pain in the b....

For example. It is very tricks, or better nearly impossible, to fill a form nested in an overlay. See Scrennshot.

I am now trying to fix this. If i do not find a solution, i'll have to switch back to popup windows.

Do you have an idea how to fix this?

Kind regards,
Steff

JohntheFish replied on Aug 2, 2012 at 11:46 am Permalink Reply

I see what the screenshot has done.

When creating a dialog you can control the size, placement and movement(dragable) of the dialog. So perhaps make it just about fill the window above the keyboard with no drag, then use a scrollable div to wrap the dialog content.

I have customers using 'Front End File Uploader' from iphone and android, which pops a jQuery dialog and does ajax uploads, so the overall method works.

There is also a jQuery plugin 'drag to scroll' (or something like that) so the content of a larger dialog can be dragged about within a container. Though dragging would need to be resolved against form entry within the same area.

Steff replied on Aug 3, 2012 at 2:03 am Permalink Reply

Hello John

Thank you. After a couple of tests, I found the problem.

I was loading the overlay with something like this

function custWOpnOrd(uID){
   $.fn.dialog.open({
      title: 'Customers with open tasks',
      width: '500px',
      height: '320px',
      href: '<?php echo BASE_URL?>/ts-reporting/loadForm/custWOpnOrd'
   });         
}

instead of this

loadForm = function(formName, uID){
   jQuery.fn.dialog.open({
      title: 'This is my title',
      href: '<?php echo BASE_URL?>/ts-reporting/loadForm/' + formName,
      width: 550,
      modal: false,
      height: 380,
   });   
}

It now works with the mobile browser.

JohntheFish replied on Aug 3, 2012 at 5:19 am Permalink Reply

There is a C5 url helper to create the path to the form tool/action that would be more flexible than assembling it from BASE_URL.

The 'modal' parameter used to catch me as it is back to front. '$' should still work.

You can also build the C5 validation token into the dialog and action to make sure it is a genuine ajax call and you are not being spoofed.

Steff replied on Aug 6, 2012 at 4:40 am Permalink Reply

Hello John

"You can also build the C5 validation token into the dialog and action to make sure it is a genuine ajax call and you are not being spoofed."

Do you have a sample for me?

Thanks

JohntheFish replied on Aug 6, 2012 at 5:28 am Permalink Reply

Basic outline by Jordanlev at:

http://www.concrete5.org/community/forums/customizing_c5/token-vali...

C5 docs at:
http://www.concrete5.org/documentation/developers/forms/basic-valid...

You would want to get the token as a string and add it to the url or post data for the ajax call as the parameter ccm_token.

Steff replied on Aug 6, 2012 at 5:39 am Permalink Reply

Thank you John.

That helped.