Typically, a Cordova / jQueryMobile app has a index.html file containing many data-role="page" pages.
May I partition the index.html file into several parts part1.html, part2.html...?
My goal is to partition a huge DOM into several smaller DOMs to get loaded on demand.
I did search the Cordova and jQueryMobile documentation sites, but failed to find a hint.
You need to use these things
$(document).on('pagebeforeshow', "#index",function () {
$(document).on('click', "#changePage",function () {
$.mobile.changePage('second.html', { dataUrl : "second.html?paremeter=123", data : { 'paremeter' : '123' }, reloadPage : false, changeHash : true });
});
});
OR
data-url='about.html'
data-ajax='false'
etc.
Learn using these things. Then you'll be able to handle mutiple html files for JQM.
Lets get you started with these following links
Create Multiple jQuery Mobile Pages and Link them
Check the question and also the first answer : Navigate between three pages in two different files in JQuery Mobile
AND this one : Linking pages
Related
I think I am missing something here.
Select2 is working fine in my MVC application, except, it is not showing dropdown image, search image, clear image, or I should say any other image which is a part of this plugin.
Following is how I have used it in my page:
1) Razor view
<div>
<input id="countriesList" type="hidden" class="bigdrop"/>
</div>
2) Script
$('#countriesList').select2(
{
placeholder: 'Select Countries',
minimumInputLength: 0,
maximumSelectionSize: 3,
multiple: true,
allowClear:true,
ajax: {
url: '#Url.Action("GetCountriesList", "Geography")',
dataType: 'json',
data: function (term, page) {
return {
searchTerm: term
};
},
results: function (data, page) {
return {
results: data
};
}
}
});
Also, I have copied select2 files (i.e. js, css, images, and all) in the same folder structure as they were downloaded from its site, and I can see CSS and JS being loaded as well. It seems I am not using appropriate classes due to which images are not getting loaded.
I worked it out myself.
While bundling used in an MVC application, the style bundles must have names similar to physical folder containing CSS.
i have same problem and i think #Nirman's answer is not good (for) me.
because if the bundle and directory has same name. mvc has been confused and not loads css and other contents that placed in that directory.
look at the 2nd part of second answer of this post.
it shows the conflict between same name of bundles and directories:
Do not use folder paths as bundle names
it says:
"2. Do not use folder paths as bundle names"
.I want to use jquery bubble popup to create a bubble.
I read that the folder “jquerybubblepopup-themes” should be copied in the root of my website.
Also, I have a jsp that isn't directly under the root of my website, but under "mywebsite/WEB-INF/jsp/admin/myfile.jsp". It contains this javascript code :
<script type="text/javascript">
$(document).ready(function(){
$('.infoTip').CreateBubblePopup({
themeName: 'black',
themePath: 'jquerybubblepopup-themes'
});
});
</script>
I read that in "themePath", the relative path of "jquerybubblepopup-themes" should be set.
In my case, "jquerybubblepopup-themes" can't be loaded, how could I modify themePath value so that the file "jquerybubblepopup-themes" will be loaded ?
Thanks in advance
You should see errors in the browser console, ther you can see where it is trying to search for the themes (path), and adjust the path accordingly
I am developing an app which uses both Phonegap and JQuery Mobile.
The app connects to an external server to check for new content/content updates (html and pdf files).
If needed, in iOS those files are successfully downloaded into the app /Documents folder.
The app then retrieves each content file's absolute path (file://localhost/var/mobile/Applications/APPID/Documents/subfolder) and creates listviews that link to each file's absolute path.
The problem I am having is the following: tapping a listview opens the linked page BUT not as an ajax call. The page loads but then no javascript (cordova.js, jquery.js app.js etc) is referenced in the page and hence I can't navigate back to the main menu. It seems like the jQueryMobile ajax navigation stops working when I open html files in the /Documents folder.
This happens only for the downloaded content in the /Documents folder (and hence outside Phonegap's www folder).
From the remote debugger, if I try to call the $.mobile.changePage('previousPage.html')* function, the console returns that $ is not defined, as if the page couldn't reference jQuery. But in none of the pages in the /www folder I need to re-reference the js files.
The app uses a multipage layout and each page has its own javascript after the <div data-role="page" id="pageid"> container.
Each .html in the /Documents folder is structured as a jQueryMobile page (with data-role attributes).
This is the code that creates the listviews:
<script type="text/javascript">
$('#content').live('pagebeforeshow', function(e) {
var curCat = parseInt(window.localStorage.getItem('currentCat'));
console.log('PAGE BEFORE SHOW: CONTENT');
db.db.transaction(function(tx) {
tx.executeSql('SELECT * FROM `content` WHERE `content`.`catID` = ?', [curCat],
function(tx, result) {
var path = window.localStorage.getItem('contentPath') + '/';
if (result.rows && result.rows.length) {
var html = '<ul data-role="listview" id="linkUl">';
for (var i = 0; i < result.rows.length; i++) {
var filename = result.rows.item(i).index_file.substr(result.rows.item(i).index_file.lastIndexOf('/'));
console.log(result.rows.item(i).id);
html += '<li id="' + result.rows.item(i).id + '">';
html += '<a href="' + path + filename +'">';
html += result.rows.item(i).title;
html += '</a></li>';
}
html += '</ul>';
console.log(html);
$('#contCnt').html(html);
$('ul#linkUl').listview();
}
},
function(tx, error) {
console.log(error.code);
var html = '<div id="errorDB">';
html += 'ERROR RETRIEVING FILES';
html += '</div>';
$('#contCnt').html(html);
}
);
});
});
$('div#content').live('pageshow', function(e) {
$('ul#linkUl').listview('refresh');
});
</script>
where the ContentPath variable is stored as a fileSystem object's directory.toUrl();
My fear is that jQueryMobile can't ajax-pull html from an external directory (the /Documents folder in iOS), or that I am missing some attribute or setting in order to do so.
Perhaps because I am using an absolute url? If so, how can I get the relative url from Phonegap's /www folder?
Do I have to declare something on the cordova.plist file?
Also, the downloaded content won't have to contain any js, they should be only plain html, but I need to keep jQuery Mobile header/footer and navigation system in all the pages.
I am using Cordova 2.2.0 and the latest releases of both jQuery and jQuery mobile.
Thanks in advance and sorry if something in the formatting goes wrong, I am new to SO (in case I'll edit asap).
You can open files from the documents folder (or any other folder the app has read access to).
There are two reasons that a link may not load as an ajax page
jQuery Mobile thinks that it isn't part of the app
There is a javascript error loading the page, which causes the default link click action to run instead of the ajax loader.
You could try using a call to $.mobile.changePage instead of just setting up the links - that gives you a little bit more visibility into what is going on.
I don't think a file url in a different folder should be treated as a different domain by jQuery Mobile, but to eliminate that possibility it should be reasonably easy to construct a relative url to the documents folder.
Solved, and thanks to Tom who led me through the right direction.
I guess the problem was that jQueryMobile was interpreting the absolute path as a an external link and thus the WebView was opening the html files as a new file, detaching it from the rest of the application.
What I did was substituting the absolute path file://localhost/var/mobile/Applications/APPID/Documents/subfolder
with a relative one, which in my case is './../../Documents/subfolder/filename.html
and now it works like a charm.
Im currently in the process of porting a completely static site using trigger io to convert it to an app. The site comprises of lots of folders in folders with index.html files in them to make the urls nice. The site uses absolute urls to include stylesheets, javascripts, on a tags, and images in every page.
I would like to set a root directory for trigger.io, but I cannot find any way of doing this. Is this even possible?
Cheers,
Rich
Edit:
Example:
<script src="/json.js" type="text/javascript"></script>
<img alt="Bar_hat" class="bar_hat" src="/assets/bar_hat-09efbabebef04dd368425a6b71badfa7.jpg" />
The script tag is in all of the files.
The img tag is used in 90% of the files. These are obviously not being found from within the app.
Copy your "assests" directory to the "src" directory and use without a "slash" before assets -
<img alt="Bar_hat" class="bar_hat" src="assets/bar_hat-09efbabebef04dd368425a6b71badfa7.jpg" />
Also, if you want to access via javascript you must use this pattern:
forge.file.getUrl("assets/bar_hat-09efbabebef04dd368425a6b71badfa7.jpg",
function(file) {
// If using zepto or jquery
$("#whateverImage").attr("src", file);
},
function(err) {
// error
}
);
Edit: getUrl vs getLocal
I'm using "Jquery UI 1./Dan Wellman/Packt Publishing" to learn JQuery UI. I'm working on the 'Dialog widget' chapiter.
After I've completed a series of exercises in order to build a Dialog widget (using Google Chrome), I then tried my work with Internet Explorer and Firefox.
The result has been disappointing.
Chrome was perfet
With Internet Explorer, (1) the title of the Dialog widget did not appear, (2) The location of the dialog widget was not correct (given the position: ["center", "center"]). It was rather offset toward left.
With Firefox, the location was respected. However, only the outer container was visible. the content was missing, just a blank container.
Also using Option Show:true and Hide:true did only work with Chrome.
I wonder now if JQuery UI was meant to be used only with Google Chrome. I just think that I might be missing some directives to make it work with major browsers (as the author claimed in his book).
Here's the code. Since, I'm using ASP.NET MVC, certain codes, such as the element to the css, do not appear. But, for the rest, all the functioning code is bellow.
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<p>
The goal of this tutorial is to explain one method of creating
model classes for an ASP.NET MVC application. In this tutorial,
you learn how to build model classes and perform database access
by taking advantage of Microsoft LINQ to SQL. In this tutorial,
we build a basic Movie database application. We start by creating
the Movie database application in the fastest and easiest way possible.
We perform all of our data access directly from our controller actions.
</p>
<div style = "font-size:.7em" id = "myDialog" title = "This is the title">
In this tutorial -- in order to illustrate how you can build model classes
-- we build a simple Movie database application.
The first step is to create a new database. Right-click the
App_Data folder in the Solution Explorer window and select the menu option
Add, New Item. Select the SQL Server Database template, give it the name
MoviesDB.mdf, and click the Add button (see Figure 1).
</div>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ScriptContent"
runat="server">
<script src="../../Content/development-bundle/jquery-1.3.2.js"
type="text/javascript"></script>
<script src="../../Content/development-bundle/ui/ui.core.js"
type="text/javascript"></script>
<script src="../../Content/development-bundle/ui/ui.dialog.js"
type="text/javascript"></script>
<script src="../../Content/development-bundle/ui/ui.draggable.js"
type="text/javascript"></script>
<script src="../../Content/development-bundle/ui/ui.resizable.js"
type="text/javascript"></script>
<script
src="../../Content/development-bundle/external/bgiframe/jquery.bgiframe.js"
type="text/javascript"></script>
<script type = "text/javascript">
$(function() {
var execute = function() { }
var cancel = function() { }
var dialogOpts = {
position: ["center", "center"],
title: '<a href="/Home/About">A link title!<a>',
modal: true,
minWidth: 500,
minHeight: 500,
buttons: {
"OK": execute,
"Cancel": cancel
},
show:true,
hide: true,
bgiframe:true
};
$("#myDialog").dialog(dialogOpts);
});
</script>
Thank for helping.
EDIT
I've re-done the same exercise yesterday. From the beginning to the end, each time I've introduced a behavior, I've tested my work in all 3 browsers (IE, Firefox, Chrome).
Everything works until I add option Show and Hide. Then only Chrome works.
If I remove Show and Hide, everything works again.
If I keep only Show and Hide, everything works perfectly
Maybe Show and Hide options for dialog widget do not mix up well with other options.
Thanks for helping.
No, jQuery UI works in any of those browsers. It's probably either the steps you're following don't work so well with the version you're using or the version you're using is old. I've used jQuery UI without issue on both browsers. If you don't believe me, then open this URL in your browser:
http://jqueryui.com/demos/dialog/
In Firefox 3.6, it loads just fine for me.
I'm not an expert on jQuery UI, but providing the code here might help.
jQuery supports all the major browsers however there are know issues with;
Firefox 1.0.x
Internet Explorer 1.0-5.x
Safari 1.0-2.0.1
Opera 1.0-8.x
Konqueror
We have successfully implemented a Dialog widget without major issues. We did have some problems making sure the correct versions of the libraries were created. I would suggest you build a custom file using the jQuery UI download tool. This will put all the necessary files in a single minified file.
If the Dialog examples don't help then posting code will be necessary to obtain further help.
EDIT:
I have anchors created with the classes dialogOpen and dialogClose and use the following code to utilise the created UI Dialog;
$(document).ready(function(){
var dialogOpts = {
autoOpen: false,
modal: true,
width: 840,
height: 560
};
$(".dialogOpen").click(function(){
$("#myDialog").dialog("open");
return false;
});
$(".dialogClose").click(function(){
$("#myDialog").dialog("close");
return false;
});
$("#myDialog").css('display','block').dialog(dialogOpts);
$(".ui-dialog-titlebar").hide();
});
NB: The use of the css function when creating the dialog stops the content appearing on the page before the Dialog is created. We needed this because our dialog has flash.
You may be missing something. It surely works in all major browsers.
jQuery is ment to be cross browser. Any errors with this can have to reasons
- Programmer's error
- Explicit incompatibilty
There are some explicit incompatibility's with IE5.5 and IE6 in jQuery. They are in the comments of jQuery and a good js compatible IDE like netbeans will allow targeting and warn you about it.
I never had any problems with the dialog widget positioning or contents.
jQuery UI is most definitly not designed to work with Google Chrome only.
I've successfully created applications using jQuery UI working on all major browser platforms.
jQuery UI (and jQuery) contain code to work around certain browser issues.
Of course there can be issues in jQuery UI which show on IE, like this one, but those are certainly not by design.