I'm having trouble with JQuery alias conflict

[icemagno]

After added this to my page:

<script src="/resources/3dcity/Intersection/IntersectionAPI.js"></script>
<script src="/resources/3dcity/3dcitydb-web-map.js"></script>  
<script src="/resources/3dcity/CitydbUtil.js"></script>  
<script src="/resources/3dcity/CitydbWebworker.js"></script>
<script src="/resources/3dcity/CitydbSceneTransforms.js"></script> 
<script src="/resources/3dcity/CitydbKmlHighlightingManager.js"></script>   
<script src="/resources/3dcity/CitydbKmlTilingManager.js"></script>  
<script src="/resources/3dcity/CitydbKmlDataSource.js"></script>    
<script src="/resources/3dcity/CitydbKmlLayer.js"></script> 
<script src="/resources/3dcity/Cesium3DTilesDataLayer.js"></script>

<!-- Mashup Data Source Service -->
<script src="/resources/3dcity/ds/core/DataRecord.js"></script>
<script src="/resources/3dcity/ds/core/DataSourceCapability.js"></script>
<script src="/resources/3dcity/ds/core/QueryResult.js"></script>
<script src="/resources/3dcity/ds/core/ReadableDataSource.js"></script>
<script src="/resources/3dcity/ds/core/WritableDataSource.js"></script>
<script src="/resources/3dcity/ds/core/DataSource.js"></script>
<script src="/resources/3dcity/ds/core/SQLDataSource.js"></script>
<script src="/resources/3dcity/ds/application/GoogleSheets.js"></script>
<script src="/resources/3dcity/ds/application/PostgreSQL.js"></script>
<script src="/resources/3dcity/ds/core/MashupDataSource.js"></script>
<script src="/resources/3dcity/ds/application/DataSourceController.js"></script>

and...

var webMap = new WebMap3DCityDB( viewer );  
webMap.activateViewChangedEvent(false);
webMap.activateMouseMoveEvents(false);
webMap.activateMouseClickEvents(false);

var dataLayer = new CitydbKmlLayer({
    url : '/resources/data/Railway_Scene_LoD3/Railway_Scene_LoD3_collada_MasterJSON.json'
});

Cesium.when( webMap.addLayer(dataLayer), function(loadedcitydbLayer){
    loadedcitydbLayer.zoomToStartPosition();
}).otherwise( function( error ){ console.log( error ) });       

I have the example loaded, but after this all my calls to JQuery alias $ gives me a Uncaught TypeError: $ is not a function error.

Are you overriding the JQuery alias? How to solve this?

Note: This only happen when the objects are loaded to screen. I.e. if just load and not zoom to it then all goes fine and I still be able to use jQuery.

[icemagno]

For now, changing all $ to jQuery seem to work but I'll have a lot of work to refactory my code.

[Son-HNguyen]

Hi!

the web client uses mostly pure JavaScript codes, but since we have a number of imported libraries and utils, there could be some parts that may have caused conflicts with your code. Try isolating each library while loading might help find the cause. If you happen to know which library caused this problem please let us know.

Best, Son

P.S.: Perhaps this might help...

[icemagno]

As I said, the error only occour when the objects are loaded on map. If I do all steps but don't go to the objects area, jQuery still working well.

Anyway.... I solved by refactoring all $ to jQuery. Work hard as hell but solved for now. I can dig deep into your code now but a fast look at CitydbKmlDataSource.js I found this:

text = text.replace('$[name]', defaultValue(entity.name, ''));
text = text.replace('$[description]', defaultValue(description, ''));
text = text.replace('$[address]', defaultValue(kmlData.address, ''));
text = text.replace('$[Snippet]', defaultValue(kmlData.snippet, ''));
text = text.replace('$[id]', entity.id);

Could this use of $ be related to this issue?

P.S.: Already tried jQuery.noConflict() before open this issue and did't work because the error occour when the objects are loaded not at a specific code line. If I don't see any objects then all works fine. In other words, if I remove loadedcitydbLayer.zoomToStartPosition(); and don't go to the objects area then there's no conflict and $ alias still working as well.

[Son-HNguyen]

Hi!

weird, have you tried wrapping your code in an immediately invoked function expression (IIFE), such as:

(function( $ ) {
    // Do some jQuery code with $
})( jQuery );

We've already used this pattern for the web client, such as here.

[icemagno]

Well... I'm using jQuery in thousands places. How can I wrap all my code? It would be easer to change the alias.

[icemagno]

But after all I discovered I have no way to convert OSM to the CityDB so I can't use it anyway.

[Son-HNguyen]

Closed due to inactivity.