Is there a particular order that jQPlot has to be included in a header? Currently I'm using jQMobile, but for some reason my jqPlot BarRenderer.js isn't being recognized...
<head>
<!-- CSS -->
<link rel="stylesheet" href="./signup.css">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.css" />
<!-- Modernizer -->
<script type="text/javascript" src="./modernizr.custom.56582.js"></script>
<!-- jquery -->
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<!-- simpleDiaglo2 -->
<script src="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog2.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog2.min.js"></script>
<!-- Bar Chart -->
<script class="include" language="javascript" type="text/javascript"
src="./jquery-jqPlot/jquery.jqplot.js"></script>
<script class="include" language="javascript" type="text/javascript" src="./jquery-jqPlot/plugins/jqplot.barRenderer.min.js"></script>
</head>
An example loading order might be jQuery, jqplot, main renderer(s), axis renderer, then point labels. Order is dependent on project dependencies.
You are including JS from CDNs which is good. But in your example, you have JavaScript included in the <head> of the page. You should include your JS just above the </body> tag, to speed page load times. CSS should be included in the <head> area.
The newly updated official jqplot example page "Bar Charts" shows this loading order as documentation:
Documented order:
<script type="text/javascript" src="../jquery.min.js"></script>
<script type="text/javascript" src="../jquery.jqplot.min.js"></script>
<script type="text/javascript" src="../jquery.jqplot.min.js"></script>
<script type="text/javascript" src="../plugins/jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="../plugins/jqplot.pieRenderer.min.js"></script>
<script type="text/javascript" src="../plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="../plugins/jqplot.pointLabels.min.js"></script>
<link rel="stylesheet" type="text/css" hrf="../jquery.jqplot.min.css" />
Note that both the actual source and the documentation of the official page appears to have an error - jqplot is being loaded twice. However, they load the CSS in the header properly in the actual source - the example shows it loading in the footer with the JS which is improper. Here's the actual JS loading order in the example page:
Actual order on example page:
<!-- Don't touch this! -->
<script class="include" type="text/javascript" src="../jquery.jqplot.min.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shCore.min.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJScript.min.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushXml.min.js"></script>
<!-- Additional plugins go here -->
<script class="include" type="text/javascript" src="../jquery.jqplot.min.js"></script>
<script class="include" type="text/javascript" src="../plugins/jqplot.barRenderer.min.js"></script>
<script class="include" type="text/javascript" src="../plugins/jqplot.pieRenderer.min.js"></script>
<script class="include" type="text/javascript" src="../plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script class="include" type="text/javascript" src="../plugins/jqplot.pointLabels.min.js"></script>
<!-- End additional plugins -->
References: http://www.jqplot.com/deploy/dist/examples/barTest.html, http://developer.yahoo.com/performance/rules.html, personal experience
Related
I installed bootstrap-material-design as instructed on the github website and everything said it was installed successfully:
I have inserted the recommended code into my application header:
<!-- Material Design fonts -->
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/icon?family=Material+Icons">
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Bootstrap Material Design -->
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap-material-design/dist/css/bootstrap-material-design.css">
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap-material-design/dist/css/ripples.min.css">
<!-- Material Design Scripts -->
<script src="bower_components/bootstrap-material-design/scripts/index.js"> </script>
<script src="bower_components/bootstrap-material-design/scripts/material.js"> </script>
<script src="bower_components/bootstrap-material-design/scripts/ripples.js"> </script>
and
<script type="text/javascript">
$(document).ready(function() {
$.material.init();
});
</script>
However, when I try a sample element (e.g. "jumbotron" or "well") it still appears the way normal bootstrap does, not the way your material design website says it should.
Any ideas on how to get it to appear? I didn't get any error message, so I don't really have anything to go on, and I don't want to manually download the files for fear of duplicates.
Apparently you do not have a reference to the correct JS files. Trying adding these to you code in the head section
<script src="scripts/index.js"> </script>
<script src="scripts/material.js"> </script>
<script src="scripts/ripples.js"> </script>
You seems to be missing references to jQuery and bootstrap's .js file. You should include both before material design script in that order.
I have an ASP.Net MVC 5 project using Infragistics IgniteUI. When I load igniteui charts or grids using my bundled and minified infragistics scripts and stylesheets, I get errors. When I use the unbundled versions, I do not get the errors.
UPDATE I also tried bundling with minification disabled, which still produces the errors.
Why is it looking for images in the /bundles/ path when I use the bundled files?
What can I do differently, to prevent these errors while using bundling?
Errors
The controller for path '/bundles/images/ui-icons_888888_256x240.png' was not found or does not implement IController.
The controller for path '/bundles/images/igLoadingSmall.gif' was not found or does not implement IController.
BundleConfig
#region Scripts
...
bundles.Add(new ScriptBundle("~/bundles/igniteui_full_js").Include(
"~/Scripts/IgniteUI/js/infragistics.core.js",
"~/Scripts/IgniteUI/js/infragistics.dv.js",
"~/Scripts/IgniteUI/js/infragistics.lob.js",
"~/Scripts/IgniteUI/js/infragistics.loader.js"
));
#endregion
#region Styles
...
bundles.Add(new StyleBundle("~/bundles/igniteui_full_css").Include(
"~/Content/IgniteUI/css/themes/infragistics/infragistics.theme.css",
"~/Content/IgniteUI/css/structure/infragistics.css"
));
#endregion
Layout Head Razor Code
<!-- Header Styles-->
#Styles.Render(
"~/bundles/css",
"~/bundles/igniteui_full_css"
)
<!-- Header Scripts-->
#Scripts.Render(
"~/bundles/jquery",
"~/bundles/ajax",
"~/bundles/modernizr",
"~/bundles/bootstrap",
"~/bundles/site",
"~/bundles/igniteui_full_js"
)
Unbundled Head - Doesn't produce Errors
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Header Styles-->
<link href="/Content/bootstrap-multiselect.css" rel="stylesheet"/>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<link href="/Content/Dashboard.css" rel="stylesheet"/>
<link href="/Content/IgniteUI/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"/>
<link href="/Content/IgniteUI/css/structure/infragistics.css" rel="stylesheet"/>
<!-- Header Scripts-->
<script src="/Scripts/jquery-2.2.0.js"></script>
<script src="/Scripts/jquery-ui-1.11.4.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="/Scripts/validator.js"></script>
<script src="/Scripts/jquery.browser.mobile.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
<script src="/Scripts/bootstrap-multiselect.js"></script>
<script src="/Scripts/site.js"></script>
<script src="/Scripts/IgniteUI/js/infragistics.core.js"></script>
<script src="/Scripts/IgniteUI/js/infragistics.dv.js"></script>
<script src="/Scripts/IgniteUI/js/infragistics.lob.js"></script>
<script src="/Scripts/IgniteUI/js/infragistics.loader.js"></script>
</head>
Bundled Head - Produces Errors
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Header Styles-->
<link href="/bundles/css?v=DOErVhQffVVJij5tRivXIDYvvea9XjXYoWkD6iph4yo1" rel="stylesheet"/>
<link href="/bundles/igniteui_full_css?v=oMN-4N9H6hCThCn7D6WHIiusJgqj7Qk9KfeKje7iGdI1" rel="stylesheet"/>
<!-- Header Scripts-->
<script src="/bundles/jquery?v=3wcNYlWV3nKyr3gSm0Ry9LrwfpXaysXErYMcQN9fkcw1"></script>
<script src="/bundles/ajax?v=jmjhTWiGrUMlGQS2hayanNTeGVZ9FC7i0HnCBpQ4IZ81"></script>
<script src="/bundles/modernizr?v="></script>
<script src="/bundles/bootstrap?v=kNIhecyepPMk8f_DFvoGkBz2T4zIItHFFHq2488ZHwY1"></script>
<script src="/bundles/site?v=stk1SwAEJZvoHt7p5QZ9202zmQ1IeBvXWmqmxFpIXI01"></script>
<script src="/bundles/igniteui_full_js?v=6y5k9Wl7x2PlzNsRN0azCfVIh1oR8SLPZohqnlbLrNo1"></script>
</head>
View
#using Infragistics.Web.Mvc
#using MyProject.Web.Website.ViewModels
#model ReportViewModel
#(Html.Infragistics()
.Grid(Model.ReportData.AsQueryable())
.ID("grid")
.AutoGenerateColumns(true)
.AutoGenerateLayouts(true)
.DataBind()
.Render()
)
I believe the issue is that you need a CssRewriteUrlTransform because the bundling changes where the resources should be referenced from.
bundles.Add(new StyleBundle("~/bundles/igniteui_full_css")
.Include("~/Content/IgniteUI/themes/infragistics/infragistics.theme.css", new CssRewriteUrlTransform())
.Include("~/Content/IgniteUI/structure/infragistics.css", new CssRewriteUrlTransform()));
On a side note, you can remove the infragistics.loader.js from your script bundle as you're bundling all of the combines script files, thus the loader is not needed.
Im developing an AngularJS (frontend) and Rails API (backend) project. My development environment has been running on an AWS EC2 micro instance. Now, its time to go live, so I chose a medium instance. I thought the performance improvement was going to be awesome, but instead of that, my feeling is they are more or less the same.
You can check it by yourself.
Development environment: http://ec2-54-76-16-85.eu-west-1.compute.amazonaws.com/
Preproduction environment: http://ec2-54-76-117-208.eu-west-1.compute.amazonaws.com/
What am I missing? It takes too long to load the main page. But I don´t know where is the bottelneck or how can I improve the performance. Should I use cloudfront for the static images.
Anyway, you can see it takes time to load even the text translations.
Any suggestions how to improve this?
Check cloudwatch for the instance monitoring of both instances, you probably have a shared bottleneck. Could it be they use the same database for example?
What Julio said about shared resources must be check first. Keep looking at the CloudWatch that's very important.
Regarding the performance improvement. Use CloudFront or S3 for images, CSS, js etc. that's the first step for reducing the burden on you instance.
Micro instance is a special instance type. Actually speaking micro is roughly can exceed the performance and infra power than small instance. It belongs to a place between small and medium instance interms of compute power.
Here is little gist about the way micro instance behaves. It is meant to work on occasional burst compute intensive task. That occasional max threshold is actually bigger than the range of small instance. The number times you hit the max threshold, that many times you are penalised for hitting the max. On that event of hitting the upper limit of the compute power, your micro's compute power is cut down to great extend. After some time, the cut down threshold is removed and your instance is back to normal. If again when you hit the max threshold again, you will be penalised again but this time for even long duration. This way, if the trend continues, your app will behave very badly over a period of time. With micro occasional spikes are good but not frequent burst. The idea behind the micro is for burst compute and shared compute (process capability). Small instance is for guaranteed memory and compute power ( actually all instance other than micro )
Now speaking of the comparison of the micro and medium. The effect what you observed is correct and it actually anticipated behaviour. What differs from medium and micro is the memory. Chances are your app is compute intensive and thus the behaviour is as not as overwhelming as you have anticipated.
I suggest you to check your app with large instance for few hours with few CloudWatch metics and see the performance. The comparison between micro and medium, wouldn't be like 3x performance improvement as you think of ( I am guess are thinking of ranking as micro, small and then medium so 3 times up )
First suggestion would be using pipeline for your assets. At the moment you have many individual calls to individual CSS and JS files.
CSS:
<link rel="stylesheet" href="css/app.css"/>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-responsive.min.css">
<link rel="stylesheet" href="css/contacts.css">
<link rel="stylesheet" href="css/options.css">
<link rel="stylesheet" href="css/welcome.css">
<link rel="stylesheet" href="css/new-business.css">
<link rel="stylesheet" href="css/boat-booking.css">
<link rel="stylesheet" href="css/icons.css">
<link rel="stylesheet" href="css/menus.css">
<link rel="stylesheet" href="css/booking.css">
<link rel="stylesheet" href="css/join-us.css">
<link rel="stylesheet" href="css/user.css">
<link rel="stylesheet" href="css/social-buttons.css">
<link rel="stylesheet" href="css/font-awesome.min.css" />
<link rel="stylesheet" href="css/font-awesome-ie7.min.css" />
<!-- SELECT -->
<link rel="stylesheet" href="css/prettify.css">
<link rel="stylesheet" href="css/bootstrap-select.css">
<!-- SWITCH -->
<link rel="stylesheet" href="css/angular-toggle-switch-bootstrap.css"/>
<link rel="stylesheet" href="css/angular-toggle-switch.css"/>
<!-- SLIDER -->
<link rel="stylesheet" href="css/slider.css"/>
<link rel="stylesheet" href="css/lightbox.css" />
<link rel="stylesheet" href="css/angular-growl.min.css" /> <!-- Notifications -->
<!-- Progress bar -->
<link rel="stylesheet" href="css/ngProgress.css" />
JS:
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="lib/plugins/file-upload/angular-file-upload-shim.min.js"></script>
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-resource.js"></script>
<script src="lib/angular/angular-sanitize.js"></script>
<script src="lib/angular/angular-cookies.min.js"></script>
<!--<script src="http://rawgithub.com/SlexAxton/messageformat.js/master/messageformat.js"></script>-->
<script src="lib/plugins/angular-translate.min.js"></script>
<script src="lib/plugins/angular-translate-loader-static-files.min.js"></script>
<!--<script src="http://rawgithub.com/angular-translate/bower-angular-translate-interpolation-messageformat/master/angular-translate-interpolation-messageformat.min.js"></script>-->
<script src="js/ui-bootstrap-tpls-0.6.0.min.js"></script>
<script src="lib/bootstrap/bootstrap.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/controllers/home.js"></script>
<script src="js/controllers/boat-list.js"></script>
<script src="js/controllers/boat.js"></script>
<script src="js/controllers/boat-booking-payment.js"></script>
<script src="js/controllers/boat-services-payment.js"></script>
<script src="js/controllers/login.js"></script>
<script src="js/controllers/location.js"></script>
<script src="js/controllers/user-dashboard.js"></script>
<script src="js/controllers/business.js"></script>
<script src="js/controllers/file-upload.js"></script>
<script src="js/controllers/searcher.js"></script>
<script src="js/controllers/reset-password.js"></script>
<script src="js/controllers/about.js"></script>
<script src="js/controllers/shopping-cart.js"></script>
<script src="js/controllers/user-plans.js"></script>
<script src="js/controllers/user-plan-payment.js"></script>
<script src="js/controllers/demo.js"></script>
<script src="js/controllers/account.js"></script>
<script src="js/controllers/help.js"></script>
<script src="js/controllers/join-us.js"></script>
<script src="js/controllers/account.js"></script>
<script src="js/controllers/accordion.js"></script>
<script src="js/controllers/boat-model.js"></script>
<script src="js/controllers/new-boat-payment.js"></script>
<script src="js/controllers/what-to-do.js"></script>
<script src="js/controllers/privacy.js"></script>
<script src="js/controllers/terms.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
<script src="js/i18n.js"></script>
<script src="js/properties/properties.js"></script>
<script src="lib/plugins/file-upload/angular-file-upload.min.js"></script>
<!-- SELECT -->
<script src="lib/plugins/angular-strap.js"></script>
<script src="lib/bootstrap/bootstrap-select.js"></script>
<!-- SWITCH -->
<script src="lib/plugins/angular-toggle-switch.min.js"></script>
<!-- SLIDER -->
<script src="lib/bootstrap/bootstrap-slider.js"></script>
<!-- SPINNER -->
<script src="js/spin.min.js"></script>
<script src="lib/plugins/angular-spinner.min.js"></script>
<!-- LIGHTBOX -->
<script src="lib/bootstrap/lightbox-2.6.min.js"></script>
<!-- OAUTH -->
<script src="js/oauth.min.js"></script>
<!-- Growl notifications -->
<script src="lib/plugins/angular-growl.js"></script>
<!-- Custom HTML popover
<script src="lib/plugins/custom-popover.js"></script>-->
<!-- Countdown Timer -->
<script src="lib/plugins/angular-timer.min.js"></script>
<!-- CART -->
<script src="js/shopping-cart.js" type="text/javascript"></script>
<!-- Chart -->
<!--<script src="lib/plugins/d3.min.js" type="text/javascript"></script>-->
<script src="lib/plugins/angular-charts.min.js" type="text/javascript"></script>
<!-- Progress bar -->
<script src="lib/plugins/ngProgress.min.js" type="text/javascript"></script>
<!-- Angular moment -->
<script src="lib/plugins/moment-with-langs.min.js"></script>
<script src="lib/plugins/angular-moment.min.js"></script>
<!-- Stripe -->
<script src="https://checkout.stripe.com/checkout.js"></script>
<!-- Angular-dynamic-locale -->
<script src="lib/plugins/tmhDynamicLocale.js"></script>
Reduce these down to two queries plus external resources will see a big improvement in your load times. Indeed, looking at the refresh-without-cache shows that there is a big limitation being placed by the fact that you're loading individual files.
Indeed that's the top two recommendations advised by Google Chrome's Audit tool (along with browser caching, proxy caching
I am pushing my static files to a CND for my web application. To do so I've used OmniFaces CDNResourceHandler that works fine. Except, my styles do not follow.
I am mapped as so :
javax.faces:jsf.js=http://.../jsf.js,
primefaces:primefaces.js=http://.../primefaces.js,
primefaces:jquery/jquery.js=http://.../jquery.js,
primefaces:jquery/jquery-plugins.js=http://.../jquery-plugins.js,
primefaces:idlemonitor/idlemonitor.js=http://.../idlemonitor.js,
primefaces-smoothness:theme.css=http://.../theme.css,
primefaces:primefaces.css=http://.../primefaces.css,
styles:main04.css=http://.../main04.css,
This works fine, except that my styles are all off. The rendered result is the same as when theme.css AND primefaces.css are not loaded.
If I remove these resources as being handled by the CDNResourceHandler, the page loads as desired. I can confirm that these files are being loaded by on the page (Inspect Element-> resources in web browser show that these are there and loaded).
Has anyone experienced PrimeFaces styles not working through CDN? Is there a way to get this to work?
My application runs on :
OmniFaces 1.6
Primefaces 3.5
Majorra 2.2
Glassfish 3.1.2.2 (also tried on Glassfish 4)
Edit 1
I have looked into this a bit further and it seems that the css files are not process : something with #{resources[]} within the CSS remains as such. This would be due to the file not meeting the Faces Servlet url-pattern. This leads me to believe to achieve what I am looking for I will need the CND resources to be processed...?
Edit 2
The weird thing is that the generated HTML has all the loaded resources. It just seems that the resources (Primefaces styles) are not processed if loaded via CDN.
This is the resources loaded when the page DOES NOT WORK. Everything is functional, except for the basic styles provided by Primefaces.
<link type="text/css" rel="stylesheet" href="http://.../theme.css" />
<link type="text/css" rel="stylesheet" href="http://.../primefaces.css" />
<link type="text/css" rel="stylesheet" href="http://.../main04.css" />
<link type="text/css" rel="stylesheet" href="http://.../main_compact.css" />
<link type="text/css" rel="stylesheet" href="http://.../ironmanCompact.css" />
<script type="text/javascript" src="http://.../jquery.js"></script>
<script type="text/javascript" src="http://.../primefaces.js"></script>
<script type="text/javascript" src="http://.../idlemonitor.js"></script>
<script type="text/javascript" src="http://.../jquery-plugins.js"></script>
<script type="text/javascript" src="http://.../jsf.js"></script>
<script type="text/javascript" src="http://.../jquery.ba-postmessage.js"></script>
<script type="text/javascript" src="http://.../tracker.js"></script>
<script type="text/javascript" src="http://.../socialMedia.js"></script>
By removing the Primefaces styles from the CDN, this following generated HTML works perfectly and generates the page as it should.
<link type="text/css" rel="stylesheet" href="/myapp/javax.faces.resource/theme.css.xhtml?ln=primefaces-smoothness" />
<link type="text/css" rel="stylesheet" href="/myapp/javax.faces.resource/primefaces.css.xhtml?ln=primefaces" />
<link type="text/css" rel="stylesheet" href="http://.../main04.css" />
<link type="text/css" rel="stylesheet" href="http://.../main_compact.css" />
<link type="text/css" rel="stylesheet" href="http://.../ironmanCompact.css" />
<script type="text/javascript" src="http://.../jquery.js"></script>
<script type="text/javascript" src="http://.../primefaces.js"></script>
<script type="text/javascript" src="http://.../idlemonitor.js"></script>
<script type="text/javascript" src="http://.../jquery-plugins.js"></script>
<script type="text/javascript" src="http://.../jsf.js"></script>
<script type="text/javascript" src="http://.../jquery.ba-postmessage.js"></script>
<script type="text/javascript" src="http://.../tracker.js"></script>
<script type="text/javascript" src="http://.../socialMedia.js"></script>
Just replace the jsf resource lookup by a classic css lookup.
When i externalized my themes this were just two mass-replacements in my ide.
Instead of:
background:url("#{resource['primefaces:colorpicker/images/colorpicker_select.gif']}");
Use:
background:url("images/colorpicker_select.gif");
Or download changed resource and mapping from here:
http://forum.primefaces.org/viewtopic.php?t=38421
What is the proper order for these scripts to be loaded?
This order has been the only one that I have found that properly populates the DB, however it throws the errors:
Uncaught Error: jQuery should be loaded before persistence.jquery.js
Uncaught Error: persistence.jquery.js should be loaded before persistence.jquery.mobile.js
I can re-order the scripts so that these errors do not appear, but I haven't found one that does not throw the errors && populates the DB correctly
Otherwise the DB is created correctly but when populating it, the entries are the default values instead of my custom iterated values
<head>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="lib/persistence.js"></script>
<script type="text/javascript" src="lib/persistence.store.sql.js"></script>
<script type="text/javascript" src="lib/persistence.store.websql.js"></script>
<script type="text/javascript" src="lib/persistence.store.config.js"></script>
<script>//population and clearance of DB scripst </script>
</head>
<body>
<div class="app">...</div>
<script type="text/javascript" src="lib/persistence.jquery.js"></script>
<script type="text/javascript" src="lib/persistence.jquery.mobile.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
Use the demo/index.html file in the persistencejs src to answer this question. It has the jquery scripts first and persistencejs second. Here in the order in the demo file:
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
<script src="http://code.google.com/apis/gears/gears_init.js"></script>
<script src="../../lib/persistence.js"></script>
<script src="../../lib/persistence.store.sql.js"></script>
<script src="../../lib/persistence.store.websql.js"></script>
<script src="../../lib/persistence.store.memory.js"></script>
<script src="../../lib/persistence.jquery.js"></script>
<script src="../../lib/persistence.jquery.mobile.js"></script>
Modify the order to use your own version and last I would loaded your database population script.