Cordova - How to change page from android code? - android

My question looks stupid at first glance and all my searches pointed out window.location and other JS stuff or the externalWebPage plugin. That's not what I'm looking for.
From the JAVA code, when I catch one specific exception during execution of a custom plugin, I want to force the page to move to "logout.html". I don't want to execute callback.error() or to deal with the error inside code in my webpage in any ways. I only want my transaction to be cancel and a web resource to be loaded in the current web UI.
Is there any way to do that?
Thanks in advance.

The CordovaWebView offers a showWebPage function to load any url from the native code.
From the plugin you should be able to do
this.webView.showWebPage("logout.html", false, true, null);
Also offers loadUrl
this.webView.loadUrl("file:///android_asset/www/logout.html");
And you can also use loadUrl to execute javascript so you can run the window.location from there without a callback.
this.webView.loadUrl("javascript:window.location.href='logout.html'");

You will either need to add it to your main.js interface so that you can callup page changed () and handle it in your angular code.
This can be a simple onPageNeedsChanged Handler call where you retain the context on page change context and just call it whenever you need.
Or you can call the onError callback from the caller, if it is a consistent error callback context to move you there, but sounds like you don't want to do this route.
So the easiest answer then is to just launch your own Activity with a preloaded web url and a web view. You already have access to the activity, so just make your own native activity with a full web view in it, hard coded url and then launch your activity on error.
i.e. I do it for sending an email, but it could be your own activity
cordova.getActivity().startActivity(Intent.createChooser(emailIntent, "Send mail..."));
You may even be able to get a reference to the Cordova web view, but not positive on that, but I assume you could through the tree of objects.
Does that work for you needs?
If not can you elaborate on your hesitation to handle in the onerror callback. It's fairly straight forward. Maybe I can help you there as an alternative? Retaining the callingContext and just using callingContext.error(withkey or instructions or object) is not too bad.
A35ble.writeValueToPodCharacteristic(this.device.macAddress, true, this.bytesToSend,
function (response) {
console.log("Success: " + response);
callbackContext.device.notificationReceivedFromPod(callbackContext.device.arrayBufferToString(response));
},
function (response) {
console.log("ERROR: " + response);
alert("Error Sending NSM Message: " + response);
}
);
For example I made a cordova plugin called A35ble that manages my bluetooth stuff and in this response I just show alert.

Related

How to create async call with jquery with android using phonegap?

I have seen background service in phonegap and integrated successfully but, I need to make an ajax call to get the data from server.This call need to be happen in background process without disturbing the UI. I am unable to do this using this plugin.
And my code look like,
$.ajax({
type: "POST",
url: "http://example.com/xxx",
dataType: "xml",
async:true,
success: function (data) {
var serializer = new XMLSerializer();
var xmlString = serializer.serializeToString(data);
var finalxml= xmlString.replace(/</g, '<').replace(/>/g, '>').replace('<br/>','\n');
window.localStorage.setItem("xml_Questions",finalxml);
}
});
This ajax call has to be done with async(background) call while user doing something..
But user is not able to do anything until get the response.So I have followed Background service plugin for phonegap, but I am not able to implement this method with that plugin.
Can we do this?
Can anybody help me?
Thank you in adv...
Your $.ajax code looks right to me, so it shouldn't block the app behavior.
I don't completely understand your question... user shoudn't be allowed to do anything until the localstorage.setitem is set? If this is right, you could use jquery to enable some kind of "NEXT" button after the setItem instruction, so the user won't be able to move on until the async call is done.

JSfiddle : how to create multi-JS/CSS/HTML files project?

Is there a way to create a serious HTML/CSS/JS project with multiple HTML, CSS, JS files on JSfiddle.net ?
If yes, how to do it ?
I want to create a basic mobile apps based on HTML/CSS/JS, about a dozen of HTML/CSS/JS files. I would like to develop it all on JSfiddle, my favorite Online JavaScript IDE. But JSfiddle.net while a clean way to test projects stays limited to:
1 html file (personal)
1 CSS file (personal)
1 JS file (personal)
several external resources (CSS, JS libs, data) which request you another webhosting.
The official doc suggesting Github hosting for 1HTML/1JS/1CSS/someDataFiles is not satisfying. I wish all on JSFiddle, and more files in my project.
You can do it inside a jsFiddle but there are few limitations, and you are probably not going to be satisfied with it.
You can test only 1 HTML multiple pages template. But in case of jQuery Mobile framework this will be enough, as you can place numerous jQM pages inside a 1 html file.
For example, this is my jsFiddle template when helping to this group: http://jsfiddle.net/Gajotres/yWTG2/
You cant use normal form submitting. Instead you should use ajax to sumbit form data.
In my other answer you can find solutions for ajax form submitting and how to send parameters during the page transition: jQuery Mobile: Sending data from one page to the another
In case you want to communicate with an remote host:
var ajax = {
sendRequest:function(save_data){
$.ajax({url: 'http://localhost/JSONP_Tutorial/json.php',
data: save_data,
async: true,
beforeSend: function() {
// This callback function will trigger before data is sent
$.mobile.showPageLoadingMsg(true); // This will show ajax spinner
},
complete: function() {
// This callback function will trigger on data sent/received complete
$.mobile.hidePageLoadingMsg(); // This will hide ajax spinner
},
success: function (result) {
if(result == "true") {
$.mobile.changePage( "#index", { transition: "slide"} ); // In case result is true change page to Index
} else {
alert('Login unsuccessful, please try again!'); // In case result is false throw an error
}
// This callback function will trigger on successful action
},
error: function (request,error) {
// This callback function will trigger on unsuccessful action
alert('Network error has occurred please try again!');
}
});
}
}
jsFiddle has a stupid policy where they want to prevent usage of full HTML files. They are trying to enforce this with stupid error warnings in HTML content part. You will need to have something like firebug plugin for Firefox or Chrome to remove this stupidity. Or you can even do it with Grease Monkey plugin.
In case you want to use full HTML template like in this example: http://jsfiddle.net/Gajotres/yWTG2/ you will need to use your javascript code in onDomready state.
Some functionalities are not going to work. Like window.orientationchange event.

Best practice for constructing a jQuery mobile page by json parse

I am developing an android app using phonegap which call an api on page load getting a json object as a return parameter.
now I have to construct the page using jQuery mobile by extracting values from the recieved object.
So I am asking what will be the best practice for this which can reduce its loading time.
Thanks for helping.
Presently what I am doing
<script>
$(document).ready( function() {
$.ajax({
url : "demourl.com",
type : "GET",
success : function(data) {
var obj = $.parseJSON(data);
$("#results").html(obj.messagedetails[0].spamReason.userApprove);},
fail : function() {
$("#notification").text("Try again after some time.");
}
});
});
</script>
Getting objects from this call and setting it in
<div id="results"></div>
There's nothing you can do about $.ajax / $.getJSON loading time, it will depend on your internet connection.
Never load data during the page transitions, do it ether before page change or after a page change. Best practice is to do it before page change (just show AJAX loader to indicate AJAX content is loading).
When data is loaded use .append( and not .html( to append data.
In case you are using each or for loop to add a dynamic content (laoded with an AJAX) UNDER NO CIRCUMSTANCES enhance page markup (apply jOuery Mobile style to new added content) during each loop, THIS IS A HUGE TIME SINK, do it only after all content has been added.
You can find more about this in my ARTICLE, or find it HERE.
Do not use document ready, it could trigger before page is loaded. Instead use correct page event.
Find more about document ready vs page events in my other ARTICLE, here you will also find a way to benchmark jQuery Mobile and some statistic about how much time is needed for some jQM actions.

Simple Phonegap application to call simple web service

I am a beginner in Phonegap and I made a simple web service in Microsoft Visual studio 2010 with two simple method. I want to call a method from that service from my Phonegap application for android platform. I am using xui library which method xhr is pretty much incomprehensible for me. I have read a lot of posts in that topic but I could not figure out how to do that.
My link to the web service looks like this: http://localhost/testservice/Service1.asmx.
This is my web service code:
[System.Web.Script.Services.ScriptService]
public class Service1 : System.Web.Services.WebService
{
[WebMethod]
public string HelloWorld()
{
return "Hello World";
}
[WebMethod]
public int Calculate(int firsNumber, int secundNumber)
{
return firsNumber + secundNumber;
}
}
This is my method which should test that service:
function checkWebService() {
var url = new "http://localhost/testservice/Service1.asmx?op=HelloWorld";
x$('#test').xhr(url, {error: function(){alert("failed "+this.responseText)},
callback: function(){
alert("Success " + this.responseText);
}
});
I call this method on button click and I am always getting alert with the text "Success", without "response text".
Probably my url is wrong, but I do not know which url I suppose to type.
This is for "HelloWorld" method without parameters, and I also do not know how to call method with parameters.
Any help or explanation please.
Looking at the docs (I'm not familiar with XUI), xhr is for getting a standard web page/JSON web service, where as you are calling a standard web service which will return an XML soap response (they are XML tags not HTML). You would need to parse this response to get just the result you require.
An easy way forward would be to change your web service to return a JSON response, then use eval() in javascript to give you a "typed" view of the object. XUI Example here.
If you're new to this you might find that JQuery has a larger document/community support than XUI.
BTW "Localhost" is a loopback address that essentially means "this" computer, so even it did work it would be trying to connect to the webservice on the mobile device (or emulator) rather than your server which you would typically connect to via a URL.

How to consume SOAP web service in SENCHA TOUCH?

I am new to sencha touch and i want to consume soap web service in sencha touch.I have written code for this cause, but the problem is that I am getting just plain HTML content as response not the soap object. And I dont know how to call a specific method from web service to sencha touch.
Here's my code :-
Ext.Ajax.request({
method: 'get',
url: 'http://192.168.1.15:80/himanshu/helloworldwebservice.asmx',
success: function (response, request) {
alert('Working!')
alert(response.responseText)
console.log('Response:-'+response.responseText)
},
failure: function (response, request) {
alert('Not working!')
console.log('Response Status:- '+response.status)
}
});
EDIT:- Ok i got the idea to call a specific method from web service from here.Like i have HelloWorld() method which only returns a single string and my url is http://192.168.1.15:80/himanshu/helloworldwebservice.asmx.
I can call HelloWorld() method by setting my url like this :- http://192.168.1.15:80/himanshu/helloworldwebservice.asmx/HelloWorld
But its not working for me.Every time i run the program 'Not Working' alert generates and 500 is the response stats i gets.Please make me understand that how can i call methods from webservice.Thanx in advance.
You will not be able to consume your SOAP webservice in this way, since performing a GET request on the asmx url will just return you the HTML content for the page listing your webservice methods.
Consuming SOAP webservices relies on POST requests and need that you send a correct XML SOAP request. I may suggest you to use something like http://archive.plugins.jquery.com/project/jqSOAPClient to execute your SOAP calls and retrieve your data and then pass them back to your Ext code.
Hope this helps
Nacef
Your code is absolutely fine. I think you are sending HTML data from the server side. Do check the response in Chrome/Safari Developer Tools. Also, use console.log() function instead of alert() function for a better view.
Also, open this url: "http://192.168.1.15:80/himanshu/helloworldwebservice.asmx" in browser and "View source" of the page - you will see what exactly you are sending.
You can make use of : SOAP Data Proxy
http://www.sencha.com/blog/taking-a-look-at-the-new-sencha-soap-data-proxy

Categories

Resources