Select to view content in your preferred language

How to load jQuery plugins on Web AppBuilder?

4050
3
10-18-2016 12:09 AM
MadalinCiciu
Deactivated User

So I am trying to build a widget which uses some jQuery  plugins(jquery ui, jquery mobile and so on). The problem is that I can't figure out how to load this plugins. If i put the plugins in the dependencies array it doesn't work because jQuery isn't loaded first.

define(['dojo/_base/declare', 'jimu/BaseWidget',
  'jimu/loaderplugins/jquery-loader!https://code.jquery.com/jquery-git1.min.js',
'./lib/jquery.mobile.min', './lib/jquery.ui.min'],
function(declare, BaseWidget, $){
  return declare(BaseWidget, {
    startup: function(){
      var map = this.map;
      $('.jimu-widget-use-jquery .map-id').click(function(){
        alert(map.id);
      });
      $('.jimu-widget-use-jquery .my-title').text('title added by jquery.');
    }
  });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Any tips on how can I achieve this? Thanks

Tags (2)
0 Kudos
3 Replies
RobertScheitlin__GISP
MVP Emeritus

Madalin,

I am not a jQuery user but have you tried to set the define like this?

define(['dojo/_base/declare', 'jimu/BaseWidget',
  'jimu/loaderplugins/jquery-loader!https://code.jquery.com/jquery-git1.min.js',
'jimu/loaderplugins/jquery-loader!./lib/jquery.mobile.min', 'jimu/loaderplugins/jquery-loader!./lib/jquery.ui.min'],
function(declare, BaseWidget, $){
  return declare(BaseWidget, {
    startup: function(){
      var map = this.map;
      $('.jimu-widget-use-jquery .map-id').click(function(){
        alert(map.id);
      });
      $('.jimu-widget-use-jquery .my-title').text('title added by jquery.');
    }
  });
0 Kudos
GregRieck
Frequent Contributor

Madalin,

I just did this. In server\apps\YOURAPPID open the index.html and near the bottom add a reference to jQuery above the existing references. Here is an example:

<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="env.js"></script>
<script type="text/javascript" src="simpleLoader.js"></script>
<script type="text/javascript" src="init.js"></script>

Greg

MadalinCiciu
Deactivated User

Yes, this works, thanks for your answer. But I really wanted to make my plugin independent so I can export it and use it in other apps, so I ended up combining all the libraries in a single file.

0 Kudos