I'm developing a mobile application using jqm and phonegap.
I've created a multi-page html file. There are two jqm pages with ids 'myPage1' and 'myPage2' inside single html file.'myPage1' contains a list of items.On click of list item i've to issue an ajax call and show the response data on 'myPage2'.
After getting response from ajax call i'm calling jqm changePage function like:
$.mobile.changePage('#myPage2', {
transition : "slide",
reverse : false,
changeHash : true
});
On pagecreate event i'm making some changes in DOM which causes page display size to increase. Everything works perfectly fine on pc browser but on android the page size remains same as screen size i.e. i cannot scroll down to see full page content.
I've tried calling $('#myPage2').page() and $(document).resize() after updating DOM but all in vain.
The problem only occurs when changing page using jqm ajax based page loading. If i create a separate html file, declare 'myPage2' in it and instead of calling $.mobile.changePage, use rel='external' as link attribute in 'myPage1' list item, the problem resolves. I don't even have to call $('#myPage2').page().
But i want to use jqm Ajax based page loading as i want to leverage jqm page transitions.
Following are my config details:
Jquery verison - 1.6.2
Jquery Mobile Version - 1.0 Beta 2
Android version - 2.2.2
Android Browser : Mozilla/5.0 (Linux; U; Android 2.2.2; hd-us; eeepc Build/FRG83G) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1
Any pointer would be really helpful as my work is gated due to this.
Thanks in advance.
Ajay
instead of .resize(); or .page(); try the new trigger option:
.trigger('create');
Here are the release notes for Beta2:
http://jquerymobile.com/blog/2011/08/03/jquery-mobile-beta-2-released/
Related
I'm having an issue with the page changes... In phonegap it works once and on chrome it doesn't work.
This is the code I use to load an external page in the dom and open it. After moving away it get's removed from dom.
function changeToMypage() {
$.mobile.loadPage('http://mydomain/mypage.html', {
prefetch: "true"
}).done(function() {
$.mobile.changePage('#mypageid');
});
}
$(document).on("pagehide", "#mypageid", function() {
$(this).remove();
});
On phonegap it works the first time I navigate to the external page but when I navigate to a local page and back to the external page it stops working.(Reloads the current page in stead)
In chrome it never works. It seems to try and load file://indexpage.html#mypageid in the changepage
but this doesn't work because I'm using single page navigation.
I don't understand how the pageload appends the mypage.html to the dom to navigate to it with the pageid?
Using jQuery.mobile.navigate() solved my problem but this is a low level api method according to the JQM docs. Maybe someone could give some extra information why it works with this method and not with changepage?
I am new to Jquery Mobile and attempting to learn it as I redevelop this mobile site. So I am doing all my navigation with different divs with data-role="page". and navigating with the #pagename. My question being doing my navigation this way how do I use the loading message and wait to make the transition until the next page is loaded? I tried putting the $.mobile.pageLoading() in the onClick attribute of the link but that didn't work.
Using JQM 1.0 beta 1
//show
$.mobile.showPageLoadingMsg();
//hide
$.mobile.hidePageLoadingMsg();
http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/api/methods.html
http://jquerymobile.com/test/docs/api/methods.html
Update:
This method is also the accepted way to do it in the official 1.0 release.
http://code.jquery.com/mobile/latest/demos/docs/api/methods.html
mobile.showPageLoadingMsg ()
Show the page loading message, which is configurable via $.mobile.loadingMessage.
Example:
//cue the page loader
$.mobile.showPageLoadingMsg();
$.mobile.hidePageLoadingMsg ()
Hide the page loading message, which is configurable via $.mobile.loadingMessage.
Example:
//cue the page loader
$.mobile.hidePageLoadingMsg();
The documentation is here (at the bottom) http://jquerymobile.com/demos/1.0a4.1/#docs/api/methods.html but yeah it's a little vague on examples.
This might help you out: https://github.com/jquery/jquery-mobile/issues/1397
In jQuery mobile 1.4.5 the only thing that helped me is:
$('.ui-loader').hide();
Currently, I have an issue with populating an iframe that I have with a PDF document, but this issue only occurs in IE.
Basic Layout:
I have a screen that contains a list of items (attachments), which can be images, text or pdf. When the user clicks on one of these items - it will make a call to a controller action [ViewAttachment] which will return the requested item and display it in the iframe.
This currently works for all data types with the exception of PDFs in IE. (Firefox, Chrome etc. all display the PDF in the iframe without issue.)
I previously was using Adobe Reader 9, and recently upgraded to 10 in hopes of solving this issue. I'll attach some code to see if anyone has any suggestions as to how to possibly resolve this.
Code to Populate iframe: (Moved to two lines for readability)
$(".viewattachment").live('click',function ()
{
$("iframe#test").attr("src","<%=Url.Action("ViewAttachment","Images") %>?
attachment=" + $(this).next().val());
});
ViewAttachment Controller Action:
public ActionResult ViewAttachment(string attachmentGuid)
{
Attachment attachment= imageAgent.GetAttachment(attachmentGuid);
Stream resultStream = new MemoryStream();
resultStream = StorageProviders[attachment.ProviderName]
.ReadFile(attachment.FileReference);
resultStream.Position = 0;
FileStreamResult result = new FileStreamResult(resultStream,
attachment.ContentType);
return result;
}
Notes:
I've attempted toggling the "Display PDF in Browser" in Adobe Reader without any success.
Currently testing this for IE8.
When clicking on a PDF to view - the iframe simply remains at it's previous content and doesn't change at all.
After several different methods and iterations of testing - I determined that it was a conflict between IE8-9 and versions of Adobe Reader 9-10. I added the following meta tag to the window containing the iframe and it resolved all of the issues:
<meta http-equiv="X-UA-Compatible" content="IE=7" />
This should at least work until an update / fix is made.
Have you tried hitting the pdf url directly? If it loads within the browser, then you can narrow down the problem to the iframe. If Adobe Reader pops up, then you know its a problem with the IE Plugin.
I had the same problem working with spring mvc. I releazed that if I put the Iframe inside some tag, like 'util:panel', the iframe does not load de pdf content in IE 8. When I put the iFrame out of the tag, all work fine.
I have a few multiselect boxes from the Jquery UI on a page that work perfectly well in Chrome & Safari but not in Firefox for some reason... when I load the Error Console in Firefox I see:
Error: $.widget is not a function
Source File: http://localhost:3000/javascripts/jquery.multiselect.js?1302660373
Line: 563
Any ideas why?
edit: the line itself is within the open function right where it says "// react to option changes after initialization"
// open the menu
open: function(e){
var self = this,
button = this.button,
menu = this.menu,
speed = this.speed,
o = this.options;
widget: function(){
return this.menu;
},
// react to option changes after initialization
_setOption: function( key, value ){
var menu = this.menu;
switch(key){
case 'header':
menu.find('div.ui-multiselect-header')[ value ? 'show' : 'hide' ]();
I am assuming you are using the jQuery Multiselect plugin… which depends on jQuery UI.
Sounds like you have not included enough of the jQuery UI library or just none of it. You need to include the core parts of jQuery UI (including Widget) if you build a custom download. Or just download the whole jQuery UI and include it instead.
For anyone else who is getting this but has the requirements; make sure you are including the Javascript files in the correct order. This error was being caused by my jquery-ui.js being included after the multiselect js file.
This answer is probably unrelated to the situation of the questioner, but I put it here for the sake of others Googling the question.
I got this error using Rails 3.2 and fixed it by deleting (renaming) the public/assets folder. It seems there are a lot of problems with the assets pipeline still. I don't know the details but have had other Javascript failures that are fixed this way.
Actually if you are getting this error then it's either
a) per #andyb answer - you haven't included the correct jQuery UI components
OR
b) your DOM is not loaded yet with the correct $.widget and therefore your function is attempting to call before $.widget has loaded. to fix the problem, ensure $.widget is called BEFORE your function
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.