We Keep Coding

JsTree is not applied on a later built list - javascript

I have an Angular2 web application which loads a ul/li-list from a remote JSON object when a button is clicked.
The generated div and list looks like this:
<div class="jstree jstree-1 jstree-default jstree-leaf" role="tree" aria-multiselectable="true" tabindex="0" aria-activedescendant="j1_loading" aria-busy="false" ng-reflect-inner-h-t-m-l="<ul class=".actual"><li>Windows<ul><li>setupact.log</li><li>Tasks<ul><li>SCHEDLGU.TXT</li></ul></li><li>Logs<ul><li>CBS<ul><li>CBS.log</li></ul></li><li>DPX<ul><li>setupact.log</li></ul></li></ul></li><li>AppCompat<ul><li>Programs<ul><li>AEINV_PREVIOUS.xml</li><li>RecentFileCache.bcf</li><li>AEINV_WER_{91399519-4D7E-4F2D-8E40-5C55523C2307}_20160914_210543.xml</li></ul></li></ul></li><li>winsxs<ul><li>ManifestCache<ul><li>702349c5b78f9a04_blobs.bin</li></ul></li><li>poqexec.log</li></ul></li><li>rescache<ul><li>ResCache.mni</li></ul></li><li>System32<ul><li>Microsoft<ul><li>Protect<ul><li>S-1-5-19<ul><li>Preferred</li></ul></li></ul></li></ul></li><li>7B296FB0-376B-497e-B012-9C450E1B7327-5P-1.C7483456-A289-439d-8115-601632D005A0</li><li>winevt<ul><li>Logs<ul><li>Security.evtx</li><li>Microsoft-Windows-Windows Firewall With Advanced Security%4Firewall.evtx</li><li>Windows PowerShell.evtx</li><li>Microsoft-Windows-Dhcpv6-Client%4Admin.evtx</li><li>System.evtx</li><li>Microsoft-Windows-Application-Experience%4Program-Telemetry.evtx</li><li>Microsoft-Windows-Kernel-WHEA%4Operational.evtx</li><li>Microsoft-Windows-Resource-Exhaustion-Detector%4Operational.evtx</li><li>Microsoft-Windows-NetworkLocationWizard%4Operational.evtx</li><li>Microsoft-Windows-LanguagePackSetup%4Operational.evtx</li><li>Microsoft-Windows-OfflineFiles%4Operational.evtx</li><li>Microsoft-Windows-WindowsBackup%4ActionCenter.evtx</li><li>Microsoft-Windows-International%4Operational.evtx</li><li>Microsoft-Windows-WindowsUpdateClient%4Operational.evtx</li><li>Microsoft-Windows-MUI%4Operational.evtx</li><li>Microsoft-Windows-Diagnostics-Performance%4Operational.evtx</li><li>Microsoft-Windows-Compat-Appraiser%4Operational.evtx</li><li>Microsoft-Windows-Diagnosis-DPS%4Operational.evtx</li><li>Application.evtx</li><li>Microsoft-Windows-BranchCacheSMB%4Operational.evtx</li><li>Microsoft-Windows-Bits-Client%4Operational.evtx</li><li>Microsoft-Windows-GroupPolicy%4Operational.evtx</li><li>Microsoft-Windows-Windows Defender%4Operational.evtx</li><li>Microsoft-Windows-Known Folders API Service.evtx</li><li>Microsoft-Windows-Windows Defender%4WHC.evtx</li><li>Microsoft-Windows-HomeGroup Provider Service%4Operational.evtx</li><li>Microsoft-Windows-ReliabilityAnalysisComponent%4Operational.evtx</li><li>Microsoft-Windows-CodeIntegrity%4Operational.evtx</li><li>Microsoft-Windows-TerminalServices-RemoteConnectionManager%4Operational.evtx</li><li>Microsoft-Windows-User Profile Service%4Operational.evtx</li><li>Microsoft-Windows-WinRM%4Operational.evtx</li><li>Microsoft-Windows-NetworkProfile%4Operational.evtx</li><li>Microsoft-Windows-Application-Experience%4Program-Inventory.evtx</li><li>Microsoft-Windows-TerminalServices-LocalSessionManager%4Operational.evtx</li><li>Setup.evtx</li><li>Microsoft-Windows-CAPI2%4Operational.evtx</li></ul></li></ul></li><li>7B296FB0-376B-497e-B012-9C450E1B7327-5P-0.C7483456-A289-439d-8115-601632D005A0</li><li>wdi<ul><li>{86432a0b-3c7d-4ddf-a89c-172faa90485d}<ul><li>S-1-5-21-1426688081-248760799-3800414735-1001_UserData.bin</li></ul></li><li>ShutdownPerformanceDiagnostics_SystemData.bin</li><li>BootPerformanceDiagnostics_SystemData.bin</li><li>LogFiles<ul><li>WdiContextLog.etl.003</li><li>WdiContextLog.etl.002</li><li>WdiContextLog.etl.001</li><li>BootCKCL.etl</li><li>ShutdownCKCL.etl</li></ul></li></ul></li><li>LogFiles<ul><li>Scm<ul><li>a1cfa52f-06f2-418d-addb-cd6456d66f43</li><li>2c59ecaf-3a27-4640-9f4b-519b05bdd70f</li><li>5b184694-64c3-4633-94c5-945b3fa561d6</li><li>6b7ac694-8d6d-481b-9dd8-2a3a741ada6d</li><li>956981f2-9434-4ac7-92d1-255484e54e4d</li><li>bba67ad0-4ba0-4b44-827b-ff419b70c057</li><li>b9bee219-c29e-4310-819c-147a5a0e045e</li><li>731e9c62-95b5-4c8c-ab64-4cc591c9ff5b</li><li>9334c323-f100-4656-9ba0-e4aa69c0f9c2</li><li>d21f6024-191f-4454-bbbc-09a650da2549</li><li>a316e645-1c56-45a6-bd6a-7dca79778090</li><li>a6394592-54ce-4e93-8d64-1a068f462632</li><li>f1369a11-e983-4458-b390-712efa1cba44</li><li>38279e40-3dc1-4c28-a688-148aed61ff69</li><li>1ec9510d-a439-4950-9399-b6399edf9ea7</li><li>de8bae53-2809-4f75-85ef-427d364b9b2c</li><li>9b75c702-ea13-406a-badb-6c588ee4375b</li><li>de8699d2-8a05-42f7-8a85-5162af47d26a</li></ul></li><li>WMI<ul><li>RtBackup<ul><li>EtwRTDiagLog.etl</li><li>EtwRTEventLog-Application.etl</li><li>EtwRTEventLog-System.etl</li></ul></li></ul></li></ul></li><li>spool<ul><li>drivers<ul><li>w32x86<ul><li>3<ul><li>mxdwdui.BUD</li></ul></li><li>PCC<ul><li>tsprint.inf_x86_neutral_c48d421ad2c1e3e3.cab</li></ul></li></ul></li></ul></li></ul></li><li>Tasks<ul><li>Microsoft<ul><li>Windows Defender<ul><li>MP Scheduled Scan</li></ul></li></ul></li></ul></li><li>DriverStore<ul><li>INFCACHE.1</li><li>FileRepository<ul><li>prnep00l.inf_x86_neutral_3323920c1a72a42d<ul><li>prnep00l.PNF</li></ul></li><li>prnbr009.inf_x86_neutral_3f6b69c8d1091fd8<ul><li>prnbr009.PNF</li></ul></li><li>prnkm002.inf_x86_neutral_ded1a36701bddc86<ul><li>prnkm002.PNF</li></ul></li><li>prnca003.inf_x86_neutral_f0a023edfd5cd833<ul><li>prnca003.PNF</li></ul></li><li>prnca00d.inf_x86_neutral_8883e3ab4a33bfbb<ul><li>prnca00d.PNF</li></ul></li><li>prnbr006.inf_x86_neutral_331a0c6df1c9d3e1<ul><li>prnbr006.PNF</li></ul></li><li>prnep004.inf_x86_neutral_25623e649d146f5d<ul><li>prnep004.PNF</li></ul></li><li>prnkm003.inf_x86_neutral_ea465b3729b37f54<ul><li>prnkm003.PNF</li></ul></li><li>prnbr005.inf_x86_neutral_407befecac90c7f1<ul><li>prnbr005.PNF</li></ul></li><li>prnrc003.inf_x86_neutral_e9198ff5f961d947<ul><li>prnrc003.PNF</li></ul></li><li>bth.inf_x86_neutral_a6bf6d613b46f6a5<ul><li>bth.PNF</li></ul></li><li>prnin004.inf_x86_neutral_2aba7beb4ab9a9e8<ul><li>prnin004.PNF</li></ul></li><li>prnnr004.inf_x86_neutral_15e7dc89d102e928<ul><li>prnnr004.PNF</li></ul></li><li>prnin002.inf_x86_neutral_b9fa18a8d63d5294<ul><li>prnin002.PNF</li></ul></li><li>prnca00g.inf_x86_neutral_b19defbd7969a7c7<ul><li>prnca00g.PNF</li></ul></li><li>prnhp005.inf_x86_neutral_9307c57b91a7985e<ul><li>prnhp005.PNF</li></ul></li><li>prnrc006.inf_x86_neutral_404ca57b9d9c1e47<ul><li>prnrc006.PNF</li></ul></li><li>amdsata.inf_x86_neutral_5c3d0d1e97e99e10<ul><li>amdsata.PNF</li></ul></li><li>prnrc005.inf_x86_neutral_73b01a2655fdb5c5<ul><li>prnrc005.PNF</li></ul></li><li>prnca00f.inf_x86_neutral_b94365c0e502f290<ul><li>prnca00f.PNF</li></ul></li><li>prnep00a.inf_x86_neutral_d4494950448771ed<ul><li>prnep00a.PNF</li></ul></li><li>prnge001.inf_x86_neutral_51cbe14e4cdde8c2<ul><li>prnge001.PNF</li></ul></li><li>prnkm004.inf_x86_neutral_b456c14d5367f83c<ul><li>prnkm004.PNF</li></ul></li><li>prnbr008.inf_x86_neutral_87aae9d395393afd<ul><li>prnbr008.PNF</li></ul></li><li>prnok002.inf_x86_neutral_436ff5d24333cca0<ul><li>prnok002.PNF</li></ul></li><li>prnin003.inf_x86_neutral_dca922447801904c<ul><li>prnin003.PNF</li></ul></li><li>prnsa002.inf_x86_neutral_db272f9cd17a383f<ul><li>prnsa002.PNF</li></ul></li><li>prnbr007.inf_x86_neutral_af94d26aafd1ca3a<ul><li>prnbr007.PNF</li></ul></li><li>prnep003.inf_x86_neutral_342be98eb74e1449<ul><li>prnep003.PNF</li></ul></li><li>prnep005.inf_x86_neutral_f4a4a2a89cb57323<ul><li>prnep005.PNF</li></ul></li><li>prnrc004.inf_x86_neutral_7d5665e9e43f678d<ul><li>prnrc004.PNF</li></ul></li><li>prnhp003.inf_x86_neutral_8685826a5ca37e6b<ul><li>prnhp003.PNF</li></ul></li><li>iastorv.inf_x86_neutral_0bcee2057afcc090<ul><li>iastorv.PNF</li></ul></li><li>prnca00b.inf_x86_neutral_c675b60dd45218c1<ul><li>prnca00b.PNF</li></ul></li><li>prnrc007.inf_x86_neutral_cfebba21b1c02dd7<ul><li>prnrc007.PNF</li></ul></li><li>prnle003.inf_x86_neutral_a8106f7f3af21d88<ul><li>prnle003.PNF</li></ul></li><li>prnbr002.inf_x86_neutral_1d14699bf2d4d936<ul><li>prnbr002.PNF</li></ul></li><li>prnnr003.inf_x86_neutral_02802729a95f0eed<ul><li>prnnr003.PNF</li></ul></li><li>prnep00c.inf_x86_neutral_92ff44dcbf1c760c<ul><li>prnep00c.PNF</li></ul></li><li>prnsv003.inf_x86_neutral_2011fa0a7f786266<ul><li>prnsv003.PNF</li></ul></li><li>prnnr002.inf_x86_neutral_b9a1c43c0cb6c940<ul><li>prnnr002.PNF</li></ul></li><li>faxcn002.inf_x86_neutral_29a66691dd7a46a5<ul><li>faxcn002.PNF</li></ul></li><li>prnod002.inf_x86_neutral_c36a5fe1ac15a734<ul><li>prnod002.PNF</li></ul></li><li>prnrc00b.inf_x86_neutral_354df7938905aa3b<ul><li>prnrc00b.PNF</li></ul></li><li>prnep00b.inf_x86_neutral_d0e9433101a2df79<ul><li>prnep00b.PNF</li></ul></li><li>prnsv004.inf_x86_neutral_3ee5a15023f3b3ed<ul><li>prnsv004.PNF</li></ul></li><li>prngt002.inf_x86_neutral_a10ecaa46786286d<ul><li>prngt002.PNF</li></ul></li><li>nvraid.inf_x86_neutral_0276fc3b3ea60d41<ul><li>nvraid.PNF</li></ul></li><li>prnbr004.inf_x86_neutral_a976dec554a0be13<ul><li>prnbr004.PNF</li></ul></li><li>prnep002.inf_x86_neutral_9111d9b86cbd3f64<ul><li>prnep002.PNF</li></ul></li><li>prnrc002.inf_x86_neutral_3fb2e6c401a9c7d8<ul><li>prnrc002.PNF</li></ul></li><li>prnbr003.inf_x86_neutral_21c4516754f2bda5<ul><li>prnbr003.PNF</li></ul></li><li>prnle004.inf_x86_neutral_60637fb8287b0bdb<ul><li>prnle004.PNF</li></ul></li><li>prnkm005.inf_x86_neutral_a2013031e279b6f6<ul><li>prnkm005.PNF</li></ul></li><li>prngt004.inf_x86_neutral_f7b569fe96e4f7ae<ul><li>prngt004.PNF</li></ul></li><li>prnhp002.inf_x86_neutral_e6daa9c39ac001a3<ul><li>prnhp002.PNF</li></ul></li><li>prnfx002.inf_x86_neutral_f83f67e1c22e557b<ul><li>prnfx002.PNF</li></ul></li><li>prnhp004.inf_x86_neutral_95288ae6f32f1fe7<ul><li>prnhp004.PNF</li></ul></li></ul></li></ul></li><li>SMI<ul><li>Store<ul><li>Machine<ul><li>SCHEMA.DAT{f74722ed-7b07-11e6-b6ad-0800273c6b02}.TM.blf</li><li>SCHEMA.DAT.LOG1</li><li>SCHEMA.DAT{f74722ed-7b07-11e6-b6ad-0800273c6b02}.TMContainer00000000000000000001.regtrans-ms</li><li>SCHEMA.DAT</li></ul></li></ul></li></ul></li><li>CodeIntegrity<ul><li>bootcat.cache</li></ul></li><li>wbem<ul><li>Repository<ul><li>MAPPING1.MAP</li><li>MAPPING2.MAP</li><li>MAPPING3.MAP</li><li>OBJECTS.DATA</li><li>INDEX.BTR</li></ul></li></ul></li><li>wfp<ul><li>wfpdiag.etl</li></ul></li><li>config<ul><li>SOFTWARE.LOG1</li><li>SECURITY.LOG1</li><li>SAM</li><li>DEFAULT.LOG1</li><li>COMPONENTS.LOG1</li><li>systemprofile<ul><li>AppData<ul><li>LocalLow<ul><li>Microsoft<ul><li>CryptnetUrlCache<ul><li>MetaData<ul><li>7396C420A8E1BC1DA97F1AF0D10BAD21</li><li>57C8EDB95DF3F0AD4EE2DC2B8CFD4157</li><li>37C951188967C8EB88D99893D9D191FE</li><li>21253908F3CB05D51B1C2DA8B681A785</li><li>A1377F7115F1F126A15360369B165211</li><li>F90F18257CBB4D84216AC1E1F3BB2C76</li><li>A583E2A51BFBDC1E492A57B7C8325850</li><li>3130B1871A126520A8C47861EFE3ED4D</li><li>696F3DE637E6DE85B458996D49D759AD</li><li>4C7F163ED126D5C3CB9457F68EC64E9E</li></ul></li></ul></li></ul></li></ul></li></ul></li></ul></li><li>SYSTEM</li><li>DEFAULT</li><li>COMPONENTS{6cced2ed-6e01-11de-8bed-001e0bcd1824}.TM.blf</li><li>SAM.LOG1</li><li>SYSTEM.LOG1</li><li>COMPONENTS</li><li>SECURITY</li><li>COMPONENTS{6cced2ed-6e01-11de-8bed-001e0bcd1824}.TMContainer00000000000000000002.regtrans-ms</li><li>COMPONENTS{6cced2ed-6e01-11de-8bed-001e0bcd1824}.TMContainer00000000000000000001.regtrans-ms</li><li>TxR<ul><li>{6cced300-6e01-11de-8bed-001e0bcd1824}.TxR.0.regtrans-ms</li><li>{6cced300-6e01-11de-8bed-001e0bcd1824}.TxR.2.regtrans-ms</li><li>{6cced300-6e01-11de-8bed-001e0bcd1824}.TxR.blf</li><li>{6cced301-6e01-11de-8bed-001e0bcd1824}.TM.blf</li><li>{6cced301-6e01-11de-8bed-001e0bcd1824}.TMContainer00000000000000000001.regtrans-ms</li></ul></li><li>SOFTWARE</li></ul></li><li>NetworkList<ul><li>Icons<ul><li>{1ED31542-AA58-4CD5-A56A-B9007AB965C3}_16.bin</li><li>{1ED31542-AA58-4CD5-A56A-B9007AB965C3}_24.bin</li><li>{1ED31542-AA58-4CD5-A56A-B9007AB965C3}_48.bin</li><li>{1ED31542-AA58-4CD5-A56A-B9007AB965C3}_32.bin</li></ul></li></ul></li><li>catroot2<ul><li>{F750E6C3-38EE-11D1-85E5-00C04FC295EE}<ul><li>catdb</li></ul></li><li>{127D0A1D-4EF2-11D1-8608-00C04FC295EE}<ul><li>catdb</li></ul></li><li>edb.log</li><li>edb004E5.log</li><li>edb.chk</li><li>edb004E4.log</li></ul></li></ul></li><li>SoftwareDistribution<ul><li>DataStore<ul><li>DataStore.edb</li><li>Logs<ul><li>edb.chk</li><li>edb.log</li></ul></li></ul></li><li>ReportingEvents.log</li></ul></li><li>ServiceProfiles<ul><li>NetworkService<ul><li>NTUSER.DAT.LOG1</li><li>NTUSER.DAT</li><li>AppData<ul><li>Roaming<ul><li>Microsoft<ul><li>SoftwareProtectionPlatform<ul><li>Cache<ul><li>cache.dat</li></ul></li><li>tokens.dat</li></ul></li></ul></li></ul></li><li>Local<ul><li>Microsoft<ul><li>Media Player<ul><li>CurrentDatabase_372.wmdb</li></ul></li></ul></li><li>Temp<ul><li>MpCmdRun.log</li></ul></li></ul></li></ul></li></ul></li><li>LocalService<ul><li>NTUSER.DAT.LOG1</li><li>NTUSER.DAT</li><li>AppData<ul><li>Roaming<ul><li>PeerNetworking<ul><li>idstore.sst</li><li>idstore.sst.new</li></ul></li><li>Microsoft<ul><li>Crypto<ul><li>RSA<ul><li>S-1-5-19<ul><li>7e22207fe9846926e18c29d3e675240e_f98e9ddc-0e1b-4293-b1aa-bc41c96b9f31</li></ul></li></ul></li></ul></li></ul></li></ul></li><li>Local<ul><li>FontCache-S-1-5-21-1426688081-248760799-3800414735-1001.dat</li><li>FontCache-System.dat</li><li>FontCache-FontFace.dat</li></ul></li></ul></li></ul></li></ul></li><li>bootstat.dat</li><li>servicing<ul><li>Sessions<ul><li>Sessions.xml</li><li>Sessions.back.xml</li><li>30543655_539879863.xml</li></ul></li></ul></li><li>Temp<ul><li>MpCmdRun.log</li><li>MpSigStub.log</li></ul></li><li>inf<ul><li>setupapi.ev1</li><li>setupapi.dev.log</li><li>setupapi.app.log</li></ul></li><li>Microsoft.NET<ul><li>Framework<ul><li>v4.0.30319<ul><li>ngen.log</li><li>ngen_service.log</li></ul></li></ul></li></ul></li><li>WindowsUpdate.log</li></ul></li><li>System Volume Information<ul><li>Syscache.hve</li><li>Syscache.hve.LOG1</li><li>{ebac27bb-7b10-11e6-a5bc-0800273c6b02}{3808876b-c176-4e48-b7ae-04046e6cc752}</li></ul></li><li>pagefile.sys</li><li>Users<ul><li>vagrant<ul><li>ntuser.dat.LOG1</li><li>NTUSER.DAT</li><li>AppData<ul><li>LocalLow<ul><li>Microsoft<ul><li>CryptnetUrlCache<ul><li>Content<ul><li>B912B2C6928A18B8CD7D50CF08BEA95B_87708DAABE1AF38B603CEFBE5F2B3276</li></ul></li><li>MetaData<ul><li>EDC238BFF48A31D55A97E1E93892934B_C20E0DA2D0F89FE526E1490F4A2EE5AB</li><li>B912B2C6928A18B8CD7D50CF08BEA95B_87708DAABE1AF38B603CEFBE5F2B3276</li><li>40E450F7CE13419A2CCC2A5445035A0A_97482851B9CF8FBB790FA8AEAB0C772D</li><li>C0018BB1B5834735BFA60CD063B31956</li><li>7396C420A8E1BC1DA97F1AF0D10BAD21</li><li>57C8EDB95DF3F0AD4EE2DC2B8CFD4157</li><li>DCE3BDBF5BDD86E2AB5B471CB90709B4_A7704BF276C97AA4D70879F611AA7DB9</li><li>37C951188967C8EB88D99893D9D191FE</li><li>C46E7B0F942663A1EDC8D9D6D7869173_42820CDFEA41DC84AAB89A6B63561873</li><li>21253908F3CB05D51B1C2DA8B681A785</li><li>FB788E090BC1F3AA2FBC9E8FB2859601</li><li>F90F18257CBB4D84216AC1E1F3BB2C76</li><li>696F3DE637E6DE85B458996D49D759AD</li></ul></li></ul></li></ul></li></ul></li><li>Roaming<ul><li>Microsoft<ul><li>Windows<ul><li>Recent<ul><li>CustomDestinations<ul><li>d93f411851d7c929.customDestinations-ms</li></ul></li><li>AutomaticDestinations<ul><li>7e4dca80246863e3.automaticDestinations-ms</li><li>1b4dd67f29cb1962.automaticDestinations-ms</li></ul></li></ul></li></ul></li></ul></li></ul></li><li>Local<ul><li>Microsoft<ul><li>Windows<ul><li>Explorer<ul><li>thumbcache_256.db</li><li>thumbcache_32.db</li><li>thumbcache_idx.db</li></ul></li><li>Temporary Internet Files<ul><li>counters.dat</li></ul></li><li>WebCache<ul><li>V01.log</li><li>WebCacheV01.dat</li><li>V01.chk</li></ul></li><li>UsrClass.dat</li><li>UsrClass.dat.LOG1</li><li>Caches<ul><li>cversions.1.db</li></ul></li></ul></li><li>Internet Explorer<ul><li>MSIMGSIZ.DAT</li><li>Tiles<ul><li>pin-2845162440<ul><li>msapplication.xml</li></ul></li></ul></li><li>Recovery<ul><li>High<ul><li>Last Active<ul><li>RecoveryStore.{AC08E291-7B19-11E6-917C-0800273C6B02}.dat</li></ul></li></ul></li></ul></li></ul></li><li>Feeds<ul><li>FeedsStore.feedsdb-ms</li><li>{5588ACFD-6436-411B-A5CE-666AE6A92D3D}~<ul><li>WebSlices~<ul><li>Suggested Sites~.feed-ms</li></ul></li></ul></li></ul></li><li>Media Player<ul><li>CurrentDatabase_372.wmdb</li></ul></li></ul></li><li>IconCache.db</li></ul></li></ul></li></ul></li><li>Public<ul><li>Libraries<ul><li>RecordedTV.library-ms</li></ul></li></ul></li></ul></li><li>ProgramData<ul><li>Microsoft<ul><li>Windows Defender<ul><li>Support<ul><li>MPLog-07132009-215552.log</li></ul></li><li>Scans<ul><li>History<ul><li>Service<ul><li>Unknown.Log</li></ul></li></ul></li></ul></li></ul></li><li>Search<ul><li>Data<ul><li>Applications<ul><li>Windows<ul><li>MSS.log</li><li>Windows.edb</li><li>GatherLogs<ul><li>SystemIndex<ul><li>SystemIndex.2.gthr</li><li>SystemIndex.2.Crwl</li><li>SystemIndex.1.Crwl</li><li>SystemIndex.1.gthr</li></ul></li></ul></li><li>MSS.chk</li><li>Projects<ul><li>SystemIndex<ul><li>PropMap<ul><li>CiPT0000.000</li></ul></li><li>SecStore<ul><li>CiST0000.002</li><li>CiST0000.001</li><li>CiST0000.000</li></ul></li><li>Indexer<ul><li>CiFiles<ul><li>CiAD0002.000</li><li>CiAD0002.001</li><li>00010001.ci</li><li>00010008.wid</li><li>00010004.wid</li><li>INDEX.002</li><li>INDEX.001</li><li>INDEX.000</li><li>00010001.dir</li><li>00010006.wid</li><li>CiAB0002.001</li><li>CiAB0002.000</li><li>CiAB0002.002</li><li>00010003.wid</li><li>CiAD0002.002</li><li>00010005.wid</li><li>00010007.ci</li><li>00010009.wid</li><li>00010005.ci</li><li>00010001.wid</li><li>00010005.dir</li><li>00010009.ci</li><li>00010007.wid</li><li>00010009.dir</li><li>00010002.wid</li></ul></li></ul></li></ul></li></ul></li></ul></li></ul></li></ul></li></ul></li><li>RAC<ul><li>PublishedData<ul><li>RacWmiDatabase.sdf</li></ul></li><li>StateData<ul><li>RacWmiEventData.dat</li><li>RacWmiDataBookmarks.dat</li><li>RacDatabase.sdf</li></ul></li></ul></li><li>Windows<ul><li>DRM<ul><li>drmstore.hds</li></ul></li></ul></li><li>Diagnosis<ul><li>ETLLogs<ul><li>ShutdownLogger<ul><li>AutoLogger-Diagtrack-Listener.etl</li></ul></li></ul></li><li>events01.rbs</li></ul></li><li>IlsCache<ul><li>ilrcache.xml</li><li>imcrcache.xml</li></ul></li><li>Network<ul><li>Downloader<ul><li>qmgr1.dat</li><li>qmgr0.dat</li></ul></li></ul></li></ul></li></ul></li></ul>"><ul class=".actual"><li>Windows<ul><li>setupact.log</li><li>Tasks<ul><li>SCHEDLGU.TXT</li></ul> .... etc.
My Javascript code:
<script>
$(function () {
$('button').on('click', function() {
$('.jstree').jstree();
});
});
</script>
My problem: When the dom of this UL/LI-list is being built and generated by Angular2, the jstree is not getting applied. Instead I receive a normal list.
I tried several ways, having the jstree also loaded on the document ready function, without success:
<script>
$(function () {
$(".jstree").jstree();
}
</script>
Appreciate any help or hint.
Thanks

If you really invoke the code like you shown, Angular app is not in the DOM yet when document ready is called. If you need to use a jQuery plugin inside Angular 2, you should invoke it in a component's ngOnInit. Refer here for sample angular2 component.

Related

I have created an ember.js template (about.hbs). I want to run some jQuery on the page but the jQuery only works if I reload the page.
I don't really get where I am meant to put the jQuery code to make it run when the template is rendered. At them moment I have put it in the controller.
App.AboutController = Ember.ObjectController.extend({
$(document).ready(function() {
//my jquery code
});
});
Could someone help me out?

You are going to want to lifecycle callbacks (see Ember docs). When a template is rendered Ember will trigger the didInsertElement callback. You can simply add your own code to this function, and if you want to use any jQuery inside of that callback you must keep the scope in mind: this.$()
Your code will look like this:
didInsertElement: function(){
this.$() //jquery code
}

I'm using JQuery UI components in a view of AngularJS/JQuery application.
I need something like this (does not work) in my JavaScript code:
$(document).ready(function () {
var elem = $('div[ng-view]')[0];
var $scope = angular.element(elem).scope();
$scope.$on('$viewContentLoaded', function() {
// multiple JQuery statements
// to support JQuery-UI componenets
});
});
This code is included as <script> into index.html that has <div class="container" ng-view> element.
My thinking was that we need a two-step process:
First JQuery reacts on document-ready HTML event and attaches a listener to Angular's $viewContenLoaded using $scope retrieved using [ng-view] element.
Then each time a view is loaded my JQuery code will be executed and JQuery UI components get activated and wired.
Apparently my logic is flawed somewhere. Please point me in the right direction.
ADDITIONAL INFO (posted 03/31/14):
The rest of my code (controllers, service, routing) is written in TypeScript.

That element needs to be compiled in order to bind angulars scope to that element. You could try something like:
var scope = angular.injector(['ng']).get('$rootScope').$new();
var compile = angular.injector(['ng']).get('$compile');
compile(elem)(scope);
scope.$on('$viewContentLoaded', function(){
// Your code
});
Though I would suggest putting your code in a directive. The code I shown above is nothing more than a hack and dangerous since now you have global access to your services.

I'm working on an application that uses JQuery layouts and loads only website parts (like Gmail). Every time I load a "panel" using JQuery I have to substitute some links to make it work with panels (i.e., to load this link content in a panel, not in the full page). Is something like this:
function changeMainPane(href) {
$("#screen").load(href);
$("#screen a.ajax-page").click(function () {return
changeMainPane($(this).attr("href"))
});
}
This is a very simplified changeMainPane function, mine has tens of $("#screen ...").click() calls to integrate the new piece of HTML into the page.
The question is: there is any better way to do this? Something like:
$("#screen").ready(function() {
// All my html setups
}
Or something like "always a user clicks on a link, check if has ajax-page class and the call this function" without having to initialize each link independently.

You can have a look at the delegate method. The delegate method can be registered for the common parent element of all the links on which you wants to reload the main panel. It can be the document object or a lower level element like "body" or another div like "div.mylinks".
$(document).delegate("a.ajax-page", "click", function(){
changeMainPane($(this).attr("href"))
})

Maybe jQuery live() is what you're looking for. You use it like this:
$("#screen a.ajax-page").live('click', function () { whatever; });
Then you don't need to reinitizalize after ajax activity.

I'm using jQuery Mobile and Backbone JS for a project. It's mostly working, using jQuery Mobile's event 'pagebeforeshow' to trigger the correct Backbone View. In the Backbone View for that particular jQuery Mobile page, that's where it's doing all the dynamic things needed. Some of the things the views do is pull in certain bits using Underscore's templating system.
This is all great until where I pulling in form bits using the templating system. For example, a set of dynamic radio buttons (which are generated from a Backbone Collection). These radio buttons I want to style up using what jQuery Mobile has to offer. At the moment, jQuery Mobile is not picking up these dynamically injected radio buttons. I solved this issue previously when doing sliders by just calling the jQuery Mobile widget "slider()" method again and it seemed to refresh them... This doesn't seem to be the case with these radio buttons.
In the Backbone View, I tried calling the widget methods again:
$(this.el).find("input[type='radio']").checkboxradio();
$(this.el).find(":jqmData(role='controlgroup')").controlgroup();
I tried them the other way around too, but it seemed I need to do it this way for the grouping styling to work etc. But this just doesn't seem right! ...doing this also caused errors when I clicked on the radio buttons, saying: "cannot call methods on checkboxradio prior to initialization; attempted to call method 'refresh'"?
It seems there should be a way in jQuery Mobile to re-initialize the page or something?! I noticed there is a 'page' widget in the source code.
How does jQuery Mobile handle forms/elements being injected into the DOM after the page is made? Is there a clean way of handling how it makes up the forms? There must be a clean way of calling on the forms to render 'the jQuery Mobile way' without it just relying on data attribute tags in the base HTML?
Any help or insight into this problem would be greatly appreciated... I'm very much on this quest of trying to get Backbone JS and jQuery Mobile to work nicely together.
Many thanks, James

update
Since jQueryMobile beta2 there is an event to do this. .trigger('create') on an element to cause everything inside it to be painted correctly.
Another question that is not a duplicate, but requires an answet I posted over 10 times :)
[old answer]
try .page()
More details in my faq:
http://jquerymobiledictionary.pl/faq.html

Refreshing the whole page worked for me:
$('#pageId').page('destroy').page();

I'm not sure if this helps but when adding dynamic elements I was using .page() in the sucess ajax call itself (example here and here) but I found that it was not working as expected. I found that in the ajax call it's better to refresh the element (if it's a form element) to use these documented methods:
Checkboxes:
$("input[type='checkbox']").attr("checked",true).checkboxradio("refresh");
Radios:
$("input[type='radio']").attr("checked",true).checkboxradio("refresh");
Selects:
var myselect = $("select#foo");
myselect[0].selectedIndex = 3;
myselect.selectmenu("refresh");
Sliders:
$("input[type=range]").val(60).slider("refresh");
Flip switches (they use slider):
var myswitch = $("select#bar");
myswitch[0].selectedIndex = 1;
myswitch .slider("refresh");
and for adding a non-form element use .page()

JQuery Mobile now supports .trigger("create"); which will resolve this for you

Try calling .trigger("create") on the element with the new content.

I needed a way to dynamically refresh a JQM page after it had been initialized. I found that if I removed the data attribute "page" during the "pagehide" event, the next time the JQM page was displayed it was re-initialzed.
$('#testing').live('pagehide', function (e) {
$.removeData(e.target, 'page');
});

$('#pageId').page('destroy').page();
works for entire control groups that are generated, let alone radio input children.
-Mike

It worked for me when I called .trigger('create') on the enclosing div element. See example below:
In .html file:
<div id="status-list" data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Choose as many snacks as you'd like:</legend>
<input type="checkbox" name="checkbox-1a" id="checkbox-1a"/>
<label for="checkbox-1a">Cheetos</label>
</fieldset>
</div>
in .js file:
$("#status-list").trigger('create');

For me only .page() worked (without the .page('destroy')).
E.g.:
$('my-control-group-id').page();
Amnon

I little bit off topic. I wanted to be able to stop jqm from creating first default page div on init as backbone wraps elements in divs anyway. I wanted to dynamically insert pages to the DOM and then call jqm to create its classes and widgets. I finally did this like this:
<head>
<script src="jquery-1.8.3.js"></script>
<script type='javascript'>
$(document).on("mobileinit", function () {
$.mobile.autoInitializePage = false;
}
</script>
<script src="jquery.mobile-1.3.0-beta.1.min.js"></script>
</head>
<body>
....... dynamically add your content ..........
<script type='javascript'>
$.mobile.initializePage()
</script>
</body>
and my hole jqm config (which you put before jqm.js)
$(document).on("mobileinit", function () {
$.mobile.ajaxEnabled = false;
$.mobile.hashListeningEnabled = false;
$.mobile.pushStateEnabled = false;
$.mobile.linkBindingEnabled = false; // delegating all the events to chaplin
$.mobile.changePage.defaults.changeHash = false;
$.mobile.defaultDialogTransition = "none";
$.mobile.defaultPageTransition = "slidedown";
$.mobile.page.prototype.options.degradeInputs.date = true;
$.mobile.page.prototype.options.domCache = false;
$.mobile.autoInitializePage = false;
$.mobile.ignoreContentEnabled=true;
});
So far Backbone and JQM been working fine.

Try use enhanceWithin() method. This should be method of any jQuery object while using jQuery Mobile.

I'm trying to build a music search using Amazon mp3 widgets to play each result. Instead of building a page full of these widgets, I'd like the user to click the album art and then the widget would load.
The code that I have looks like this:
function loadPlayer(asin) {
var amzn_wdgt={widget:'MP3Clips'};
amzn_wdgt.tag='widgetsamazon-20';
amzn_wdgt.widgetType='ASINList';
amzn_wdgt.ASIN=asin;
amzn_wdgt.title='What I\'ve been listening to lately...';
amzn_wdgt.width='250';
amzn_wdgt.height='250';
amzn_wdgt.shuffleTracks='True';
amzn_wdgt.marketPlace='US';
}
In their documentation (https://widgets.amazon.com/Widget-Source/), they have a script to load the widget:
<script type='text/javascript' src='http://wms.assoc-amazon.com/20070822/US/js/swfobject_1_5.js'></script>
The issue that I'm running into is that I can't seem to find a way to load that script dynamically. The script loads the widget into the element that contains the code, so I don't knw how to do this with jQuery or javascript. Any help would be appreciated.

Check out jquery's getScript: http://api.jquery.com/jQuery.getScript/
Update To answer your question below, the script expects a global variable, so you'll need something more like:
var amzn_wdgt;
function loadPlayer(asin) {
amzn_wdgt={widget:'MP3Clips'};
amzn_wdgt.tag='widgetsamazon-20';
...yada yada...
$.getScript(...)
}