how to disable the page in jquery mobile - android

Hi I am using jquery mobile in my android phonegap application.I am showing the loader in the onload using jquery mobile and when loader is running,i can able to type in the textbox in the html page.But my need is when loader is running i should not able to type in the textbox.How to solve this problem
Here is my code:
$(document).ready(function ()
{
$.mobile.loading('show', {
text: 'Loading',
textVisible: true,
theme: 'a',
html:""
});
});
Please Kindly help me.Thanks in Advance.

you could display a splash page first during loading and then switch to your main page...
and: don't use $(document).ready(), see here
Important: Use $(document).bind('pageinit'), not $(document).ready()
The first thing you learn in jQuery is to call code inside the
$(document).ready() function so everything will execute as soon as the
DOM is loaded. However, in jQuery Mobile, Ajax is used to load the
contents of each page into the DOM as you navigate, and the DOM ready
handler only executes for the first page. To execute code whenever a
new page is loaded and created, you can bind to the pageinit event.
This event is explained in detail at the bottom of this page.

Related

The webview doesn't show the newest content when using 'webview.reload()' after 'webview.loadUrl()'

For the first time, invoke the method:
webview.loadUrl("https://www.google.com").
The page shows the google's content.
For the second time, invoke the method :
webview.loadUrl("https://stackoverflow.com/").
webview.reload();
The page still shows the google's content. But the log shows:
webview.getUrl()-> https://stackoverflow.com/
webview.getOriginalUrl-> https://www.google.com
I am wondering how it happened and how to make it show the newest content when doesn't change App native code?
(To let h5 page to listen the 'reload' event???)
Thanks!
You don't need to call webview.reload(); The second snippet should simply be:
webview.loadUrl("https://stackoverflow.com/");
I suspect the what you see is the result of .loadUrl() starting to load the page, but .reload() interrupting this process and reloading the current page.
Use webview.clearCache(true) and webview.clearHistory() after that call the loading method like webview.loadUrl(link)

Trigger event is not working in touch devices

I've this following JS code, it's working perfectly in the desktop but it's not working in the touch devices.
jQuery(document).ready(function(){
jQuery("#gallery_trigger").click(function () {
jQuery(".my-second-portfolio").trigger( "click");
});
});
From my analysis, I figured that following line of code is not working
jQuery(".my-second-portfolio").trigger( "click");
I understand that .trigger( "click"); is not appropriate for the touch devices, so could you please help me to work this code in all devices?
Try 'tap' or 'vclick'
http://api.jquerymobile.com/tap/
$(".my-second-portfolio").tap();
The first thing you learn in jQuery is to call code inside the $(document).ready() function so everything will execute as soon as the DOM is loaded. However, in jQuery Mobile, Ajax is used to load the contents of each page into the DOM as you navigate. Because of this $(document).ready() will trigger before your first page is loaded and every code intended for page manipulation will be executed after a page refresh. This can be a very subtle bug. On some systems it may appear that it works fine, but on others it may cause erratic, difficult to repeat weirdness to occur.
Classic jQuery syntax:
$(document).ready(function() {
});
To solve this problem (and trust me this is a problem) jQuery Mobile developers created page events. In a nutshell page events are events triggered in a particular point of page execution. One of those page events is a pageinit event and we can use it like this:
$(document).on('pageinit', function() {
});
To execute a code that will only available to the index page we could use this syntax:
$('#index').on('pageinit', function() {
});
There's also another special jQuery Mobile event and it is called mobileinit.When jQuery Mobile starts, it triggers a mobileinit event on the document object. To override default settings, bind them to mobileinit. One of a good examples of mobileinit usage is turning off ajax page loading, or changing default ajax loader behavior.
$(document).on("mobileinit", function(){
//apply overrides here
});
Or you could use something like this:
$('div:jqmData(url="index.html")').on('pageshow',function(){
// code to execute on that page
//$(this) works as expected - refers the page
});
You could try to use $('.my-second-portfolio')[0].click(); to simulate a mouse click on the actual DOM element (not the jQuery object), instead of using the .trigger() jQuery method.
Note: DOM Level 2 .click() doesn't work on some elements in Safari. You will need to use a workaround.
http://api.jquery.com/click/

Android 4.0.x (ICS) WebView does not update UI clicking <a> tags

I need WebView to show a HTML page A, there are hyperlink tags in page A, which will open page B when clicked. On action bar of my Activity, I have a Button which will call WebView.reload() when clicked. This should be a very simple case of WebView.
PROBLEM:
When running my app on Andorid 4.0.3 or 4.0.4, after click hyperlink ( tags) in page A, Android WevView stays on page A, nothing happend.
What-I-tried:
1. when the problem occurrs, click reload button, WevView is displaying page B correctly.
2. modify source code of page A and B, remove CSS code which affect how tag displays. Then WebView can jump to page B correctly after click hyperlinks in page A.
I think this is a bug in Android 4.0.x, It is not possilbe to remove CSS in HTML, I am stuck with the "reload solution".
Does anyone know the root cause of this bug or a better soluton?
Thanks
Use WebChromeClient for webView fucntionality it should work.Even then you are unable to load the html than debug your code and use alternative which function is not working . because java script and CSS both works in web view only the case if you have made mistake in java script or css thnt it should do strange behavior(not loading/blank load/hang screen).
Issue solved by WORKAROUND in web page source, not Android WebView.
add the following javascript inside html body:
try{
document.documentElement.clientHeight
} catch (e) {
};
above js trys to read web window height, but it will force a refresh of web page.
That's how this js solved this issue.
I guess this should be a bug in Android 4.0.3/4.0.4. But currently you can use this workaround to avoid it, only if your WebView load web pages developed by you.

Update one page with jQuery, in single html file

I've got a single html with 5 pages + navbar. To force a refresh of one page I use this:
$("#page3").on("pagecreate", function(e) {});
It works the first time, but I want it to update every time I visit the page. I know there is .trigger("create"), and "refresh", but I can't get it to work properly...
jQuery Mobile 1.4.0
You need to listen to pageContainer event in order to determine which page is active and accordingly run the functions you want.
The new events can't be attached to a specific page, unlike successor versions of jQuery Mobile. Once an event is occurred, retrieve ActivePage's ID.
$(document).on("pagecontainerbeforeshow", function (e, ui) {
var activePage = $.mobile.pageContainer.pagecontainer("getActivePage")[0].id;
if(activePage == "page3") {
doSomething();
}
});
Demo

Load first page on splashscreen using phonegap on android

Hi i'm using phonegap in conjunction with Jquery mobile. I'm trying to immediately fetch the main page, while showing the user a splashscreen.
In PhoneGap for Android i'm using this
super.setIntegerProperty("splashscreen", R.drawable.splash);
super.loadUrl("file:///android_asset/www/index.html", 2000);
While this loads the splash, it also delays the loading of index.html. It it possible to start fetching it right away? Also, if not with phonegap, has anybody done this using JQM instead of phonegap?
UPDATE: After using it with a slower loading first page (doing a json request) it kinda looks like the splash screens shows for a longer period of time, so this appears to be the default behavior
As given here, you could kill the splashscreen once you have loaded all the assets and DOM elements have been loaded.
something like this:
Java:
super.setIntegerProperty("splashscreen",R.drawable.splashscreen);
super.loadUrl("file:///android_asset/www/index.html", 2000);
on your HTML, javascript section:
function onDeviceReady()
{
cordova.exec(null, null, "SplashScreen", "hide", []);
window.MacAddress = new MacAddress();
window.MacAddress.getMacAddress(function(result){
database._mac_address = result.mac;
}, function(){
database._mac_address = '01:02:03:04:05:06';
});
}
I've implement better solution.
You can set your custom splashscreen and hide it with JS call after page have been loaded
https://github.com/inetstd/phonegap-android-custom-splashscreen/wiki

Categories

Resources