CODEWITHSUNDEEP
jqueryjquery-mobilecordovaibm-mobilefirst
Madhurika Singh Gehlot
Madhurika Singh Gehlot

Reputation: 45

Can i load js and css while loading new page and unload it while navigat to other

I am using Worklight 6.0 and using 

 WL.Page.load("templates/a.html", {
        onComplete : function() {
          console.log("After fragment is loadded ");
        },
        onUnload : function() {
          console.log("After fragment is unloadded ");
        }
      });

for loading new page and defing some function in onComplete method and i have all css and js on index page which is conflicting with other pages. I do not want all css and js on single page instead of this i want to load it while loading new page and unload it while loading other page like that. how should i do that.

Upvotes: 0

Views: 138

Answers (2)

David Dhuyveter
David Dhuyveter

Reputation: 1416

Just FYI, WL.Page.Load has been deprecated in Worklight V6 in favor of the native JavaScript and mobile framework methods of loading fragments.

You don't mention whether you are using a mobile framework, but I've used the following to load css for a dojo mobile widget: (domConstruct is: "dojo/dom-construct")

var link1 = domConstruct.create("link", {
    type : "text/css",
    rel : "stylesheet",
    href : "js/widget/themes/myCss1.css"
});
var link2 = domConstruct.create("link", {
    type : "text/css",
    rel : "stylesheet",
    href : "js/widget/themes/myCss2.css"
});

var head = document.getElementsByTagName("head")[0];
head.appendChild(link1);
head.appendChild(link2);

For jQuery, it looks like the answer is here: Dynamically loading css stylesheet doesn't work on IE

I imagine that you can attach the css to your fragment rather than to the document head to get it unloaded when the fragment is unloaded. There is an argument about whether this is legitimate here: load external css file in body tag Of douse, you could attach the link to the head on load and explicitly remove it when the fragment is unloaded.

If you are using dojo mobile and organize your JavaScript into modules, you don't need to explicitly load the *.js files. Just use require() to load whatever is needed on demand.

For folks using jQuery mobile, Require.js (http://requirejs.org) serves a similar purpose.

Upvotes: 1

Anton
Anton

Reputation: 3166

WL.Page API is deprecated, use $.load() instead. see training module and sample here - http://public.dhe.ibm.com/software/mobile-solutions/worklight/docs/v600/03_02_Building_a_multi_page_application.pdf

Upvotes: 1

Related Questions