AJAX REQUEST Not working when I Run My App on an Android Device

my-app.js code is as follows:

// Initialize your app
// var myApp = new Framework7();

var myApp = new Framework7({
animateNavBackIcon:true,
template7Pages: true,
precompileTemplates: true
});

// Export selectors engine
var $$ = Dom7;

// Add view
var mainView = myApp.addView(’.view-main’, {
// Because we use fixed-through navbar we can enable dynamic navbar
dynamicNavbar: true
});

// Funcion to handle Submit button on Login page
$$(’#submmit-login’).on(‘click’, function () {

var username = $$('#username').val();
 var password = $$('#password').val();
 
 if (!username || !password){
  myApp.alert('Attention! Please fill in all Registration form fields');
  return;
 }

console.log('Submit clicked');
console.log('username: ' +username);
console.log('password: ' +password);

myApp.showIndicator();

$$.ajax({
		url: 'https://tdcmobilestore.com.ng/apimobileapp/auth.php',
		method: 'POST',
		data: { 
				username: username, 
				password: password 
		 }, 
					
		success: function(response){

		myApp.hideIndicator();
		
		  var reply = response.replace(/\s+/, ""); //remove any trailing white spaces from returned string
  			
		let obj = JSON.parse(reply);
				
			if(obj.response == "OK"){

			  localStorage.setItem("username", username);
			  localStorage.setItem("password", password);
	
				myApp.alert('Success ! You Have Logged In');
	
				window.location= 'great.html';	
			}
			
			else{
				myApp.alert('ERROR. FROM DB' + reply);
			}
		},
		
	 error: function(response){
	
			myApp.alert('ERROR FROM AJAX' + response);
	 }
		
	});

});

When I tried to debug it, the Console returned the following:

[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080
y @ framework7.min.js:18

Submit clicked

my-app.js:35 username: save
my-app.js:36 password: many
framework7.min.js:21 POST https://tdcmobilestore.com.ng/apimobileapp/auth.php 404 (Not Found)
a.ajax @ framework7.min.js:21
(anonymous) @ my-app.js:45
C @ framework7.min.js:18
T @ framework7.min.js:18

The code works perfectly well on my Laptop Browser but when I run it on an Android Device it does not work

Please I need your assistance on this.

1 Like

Your project in developer Cordova, your necessite in plugin Whitelist do Cordova how to execute request remotes ajax, sorry for my bad english! :wink:

Se o seu projeto for desenvolvido em cordova, talvez você necessite do plugin Whitelist do Cordova para executar requisições externas.

Try setup it

Honestly I don’t understand your suggestion.

I am new to all of these.

All I need now is how to make Ajax call to a remote server and still return the response from the server side PHP to the Ajax success function.

How can I build this App for Android using Phonegap online build, that is build.phonegap.com.

Already it is working perfectly well on my chrome browser

Looking forward to hear from you .

Thanks

What he is saying is that for AJAX request to work on ‘Android’ you must add the domain to a ‘white-list’ so Android will allow such requests…

Perhaps the docs may be more helpful then directly linking to the git repo. Additionally, if Cordova is proving to be a bit of a challenge you can always try something like trigger.io.

While not free it does abstract some of the complexities associated with cordova

@stephenmario, could you resolve this issue?

If not, what Android Version are you testing?

I had a similar problem in Android 9 and 8. I solved it by adding the android property: usesCleartextTraffic=“true” in the “application” tag of the “AndroidManifest.xml” file. [see attached image]

forum

1 Like

Не надо ничего добавлять в манифест, вы что-то делаете неправильно.

worked!!! thanks a lot

1 Like

Use App request

var app = new Framework7();

var $$ = Dom7;

app.request.get(‘blog-post.php’, { foo: ‘bar’, id:5 })
.then(function (res) {
$$(’.articles’).html(res.data);
console.log(‘Load was performed’);
})
.catch(function (err) {
console.log(err.xhr)
console.log(err.status)
console.log(err.message)
})