[FullCalendar 2] Error: tooltipster

Forge Component
(31)
Published on 2019-03-29 by Daniel Filipe
31 votes
Published on 2019-03-29 by Daniel Filipe

Hello,

When i use the FullCalendar with Dublin Theme i have the follow error:

"jQuery.Deferred exception: $(...).tooltipster is not a function @https://ptorres.outsystemscloud.com/Calendar_Test/Home.aspx?_ts=636510319172438994:137:5
j@https://ptorres.outsystemscloud.com/Calendar_Test/Blocks/FullCalendar/Libraries/jquery.js?1423:2:29946
g/</k<@https://ptorres.outsystemscloud.com/Calendar_Test/Blocks/FullCalendar/Libraries/jquery.js?1423:2:30262"


And the balloon of user in top right corner not works.

Someone has a ideia to solved this problem?


Regards, Paulo Torres

Hi Paulo,

It's strange... You seem to be using a different jquery version (3.1.1 instead of 1.8). Can you share your oml so that we can check it?

Cheers,

José

Hi Paolo.

I had the same problem. There is a mismatch between jquery versions and the developer advised me not to use tooltips from WebPatterns in the App to solve it. Could that solve your problem, at least for now?

With best regards,

Íris

Hello,

Thanks for the answers. Maybe i will do a toggle by another way.

I'm using jQuery version 1.8. I share a test oml.


Thanks :)

Íris wrote:

Hi Paolo.

I had the same problem. There is a mismatch between jquery versions and the developer advised me not to use tooltips from WebPatterns in the App to solve it. Could that solve your problem, at least for now?

With best regards,

Íris

Hello Iris,

How to resolved this problem?


Regards


Hi Paulo,

What version of the Full Calendar 2 are you using?

You seem to be using a version that is not stable. Do you really need some feature from there? Or can you use the stable version?

I'm saying this because the stable version uses the version 1.8 of jQuery. And that one should not have any conflict with the Web Patterns' widgets.

Check the versions here:

https://www.outsystems.com/forge/Component_Versions.aspx?ProjectId=966

Cheers,

José

Hi Paulo,

This is a basic problem, i suggest you remove the reference to JQUI from FullCalendar2.
Anyways you are adding JQUI in you parent project - but you need to take care that you do this in every project.
Any other similar references can be removed.


Regards,

Indrajeet

Hi everyone!
I know that some time has passed since this Post was created but I will leave some feedback here on how to solve it because this week I needed to use FullCalendar on an OS9 web app and I had this problem. It may help someone.

The problem happens when we have 2 different versions of jQuery on the same page. By default we have loaded version 1.8+ in the application and the latest stable version of FullCalendar already uses version 3.1.1

Obviously, when we have 2 versions the last one to be loaded on the page will use $. or jQuery. object and we start having problems. That is why we should never have 2 versions of jQuery on the same page.


But in this case where we need the Calendar and don't want to downgrade it, how can we resolve it?

Here's what I did and it worked well:

  1. Clone the FullCalendar component and all its dependencies to another eSpace, we will change a javascript file and if we do it in the original component, as soon as they update you will lose all your changes.
  2. You should have a webblock that loads the fullcalendar.js javascript. Open this webblock, remove the IF that loads the full js or the minified.
  3. For now, we will only have full js, if you want at the end of all steps you can minify the file to put it here again and use it in production. I do not think that will have great advantages because the platform already has processes for optimizing files, so by placing a file.min.js they may even be complicating life on the platform.
  4. Copy all the fullcalendar.js code to your favorite code editor
    1. Let's add a jQuery.noConflict() function to the top of the file before init the full calendar component.
    2. You just need to add "jq162 = jQuery.noConflict( true );" where jq162 will be a global variable with a custom name. Choose for example "jq311" which means Jquery 3.1.1..
      1. Explanation: this will make all the jquery 3.1.1 just loaded be encapsulated within the global variable that we just defined and will not mess with the $ or jQuery variable.
    3. In your code editor, within the fullcalendar.js file, find all "$" and replace with "jq311" (or the name you gave your variable). Make sure you select all of them, there must be more than 200.
    4. Paste the code back on the platform, where it was, inside the webblock that loads fullcalendar.js.


If everything is correct, it should work!


Feel free to ask questions, I apologize for not having screenshots to help explain, but if you are interested I can create an article with all the detailed steps.

This is a solution that should also work for other components that need a different version of jQuery.

It is not the best in terms of performance, the ideal was to have only one version of jQuery on the platform and always use these but it is not always possible.