[jQueryGoodies] How to start using jQuery Goodies

[jQueryGoodies] How to start using jQuery Goodies

  
Forge Component
(13)
Published on 2015-11-12 by Renato Pauleta
13 votes
Published on 2015-11-12 by Renato Pauleta

Step by step:


  • Download and publish the component

  • Open you eSpace that contains your layout (most likelly the main eSpace of your application)

  • Add the jQuery Goodies references. You will need at least the jQuery, jQueryUI and 1 of the 3 available themes. You can also pick also the blocks you want to use do later in your work :)


Note: these next steps can be done in many places. I recommend using the Footer block because it's in almost all pages and already has a "hide on preview" pattern.

  • Open the Footer block of your eSpace and drag the 3 blocks to the false part of the "If" with the AjaxWait webblock. If you don't have that in your footer, just add an "If" with the condtion "false". The objective here is to get this always running at runtime, but not interfere with the pages preview inside Service Studio.




  • After this you can use the other blocks from the component in all your screens.

If anyone has problems using it, just create a discussion and we will help on what we can :)
Also, all are welcome to join the team and help us improve it.
Hi there,

I'm trying to set up this goodie. Unfortunately in the Add/Remove Reference it only shows the jQueryGoodiesSample. Not the jQueryGoodies.
When I publish it, it also mentions that there is no espace 'jQueryGoodies' could be found.

Can you help me out?

Regards,
Arnold Grippeling
Hi Arnorld,

Make sure when you download it you publish the correct one. I also noticed the other day that it gets Forge is naming the documentation oml's incorrectly so it gets confusing if you download both.

I'll submit an issue for it if also gets like that then I submit the next version.


Hi Joao,

Thanks for your reaction.

I have downlodaded and published both the component and the dcoumentations however I don't seem to get the rigth data at Add/Remove Reference.
I tried to paste the picture of the data I see, but I'm not sure it did the trick.

Hope you can help me out.

Regards,
Arnold
  

Humm don't see any picture in your post.

Can you describe what you see different or post a screenshot again?
I use "Jing" for my screenshots/videos. Works pretty nice for saving screenshots as files or just upload/link.
Hi Joao,

I've attached a printscreen in the Word file.
In the front you'll see the Add/Remove Reference screen. On the back you'll see 3 tabs:
- the application
- JQueryGoodies -> is published
- JQueryGoodies Sample -> is published.

I hope this clarifies the issue.

Regards,
Arnold

Hi Arnorld,

On the top of the window where it says "Show In Use", change to "Show All".
That will show the rest of the list.

(And while you are at it, click on the green refresh buttons in the left side)

Regards,
João Rosado
Hi Joao,

That indeed did the trick. And I already have setup the combobox, and it worked perfectly!

Thanks!

Arnold
Hi Joao, 

I'm not sure this question is in the right place, if not please let me know.

It's got to do a little bit with the character count.
In my application I have several large text fields. If I mention multiple lines (i.e. 10), it only shows one line when I publish it. In the Edit screen however it does show the (i.e.) 10 lines.
I tried a connection with the character count, but no succes (except for the count -> that does work)

Can you help me out?

Regards,
Arnold  
Hi Arnold,

There a bug in the latest version of the platform regarding multiple line inputs.
Check this post for a workaround: http://www.outsystems.com/forums/discussion/10497/text-lines-is-not-being-recognized/

Regards,
João Rosado
Thx!

That indeed did the trick.

Regards,
Arnold Grippeling
Hi there,

In a new module, CRM,  I tried to use the jQueryGoodies Combobox_AutoComplete and for some reason it only shows met the first characters I type. I dd this in CRM - Medewerker and then for the combobox School.

In ZAP-Verwijsbrief for the combobox Ouders it works. As far as I can see I have created it exactly the same?
Can anyone give me a hand?

In this reply I've attached the CRM In the next I'll attach ZAP.

Regards,
Arnold

 Edited by André Vieira on request of user to remove attachment.
 
in this one I've attached ZAP where in Verwijsbrief i.e. Ouders the combobox does work.

Regards,
Arnold

Edited by André Vieira on request of user to remove attachment.
Hi Arnold,

The eSpace logic looks good, can you check in your browser if you get any javascript errors?


Regards,
João Rosado
Hi Joao,

Thx. As  I thougth the code/logic seems to be okay. I can't see any errors in the browser. See enclosure.

Regards,
Arnold
Hi there,

I just found another error. For some reason the Save button at Medewerkers doesn't work when I trie to edit the record. Maybe the same cause?

Regards,
Arnold
Hi Arnold,

Click F12 to open the browser debugger. Javascript errors show in the Console tab.

Regards,
João Rosado
https://cvkt.outsystemscloud.com/CRM/Medewerker_Edit.aspx?MedewerkerId=1&(Not.Licensed.For.Production)=
Above is the link of the page in question.

On the left side of the screen (Chrome) Is see a pictogram called Console:
DOM7011: Zowel terug als vooruit in cache opslaan is door de code op deze pagina uitgeschakeld. Zie http://go.microsoft.com/fwlink/?LinkID=291337 voor meer informatie
Bestand: Medewerker_Edit.aspx

Is this helpful? 

Regards
Arnold Grippeling
Hi Arnorld,

The link to the application helped.

It looks like the problem is related to where the Footer block is used in the London Layout, causing the order of the javascript files to be wrong.

So to solve your problem instead of doing it on the Footer block, place it on the beginning of the Header block. Like this:

Make sure it looks like my picture, you can use the widget tree for that. The If around the blocks is so the preview in your screens don't get messed up by them.

Regards,
João Rosado



That indeed did the trick. Thx!

A question, In one of the other modules I've place th JQuery in the footer. Why do I now have to put it into the footer? Due to the London layout?

Regards,
Arnold
Hi Arnorld,

Yes, it's because of where placeholders are used on the London layout and the previous themes.

Before the layouts were on the eSpace, and the Footer was used directly on the layout block.

Now the layouts are on RichWidgets and the Footer is used on a placeholder on the bottom of the block.
That causes the javascripts from the footer be loaded after the scripts from the MainContent placeholder.

Truthfully, the ideal would the jquery blocks to be inside the combobox block, to never have problems like that.
This component actually goes a bit againt the recomendations I did on this topic a long time ago.
...but to try squeezing a bit of performance on blocks that will be reused many times, it gets subjected to the possibility of ordering problems.

Bottomline: If you have a Header block use if there. If not, try on footer and see if everything works correctly.

:)

Regards,
João Rosado