Jump to content
gongpex

PHP ajax able to response on PC but not in mobile

Recommended Posts

Hello everyone,

I did upload my piece of cake code here : ajaxsite

When I opened and run, this code worked well on PC.

But when I opened it on my smartphone it didn't give responds entirely.

Here my code :

Controller Test.php

public function index()
	{	
		$this->load->view('form-test');
	}
	
	public function signin()
	{	
		header('Content-Type: application/json');
		$l_username = $this->input->post('l_username');
		$l_password = $this->input->post('l_password');
		
		if(empty($l_username) || empty($l_password)){
			$data['success'] = false;
		} else {
			$data['success'] = true;
		}
		echo json_encode($data);
		exit;
	}

and this form-test.php :

<body>
        <form id="fm" role="form"> 
		   <div class="f_wrapper">
		     <div align="center" class="number warn"><!-- WARN --></div>
		     <div align="center" class="number notify"><!-- WARN --></div>
		    <div class="admin_panel">Backoffice Template Media</div>
			 <div>&nbsp;</div>
		     <div class="f_col">Admin Username</div><div class="f_col"><input name="l_username" type="text" class="inbox form-control"></div>
			 <div class="f_col_w"><span class="number user"></span></div>
			 
			 <div class="f_col">Password</div><div class="f_col"><input name="l_password" type="password" class="inbox form-control"></div>
			 <div class="f_col_w"><span class="number pass"></span></div>
			 <div class="f_col">&nbsp;</div><div class="f_col"><button class="btn btn-default loading" id="signin">SignIn</button></div>
             <div class="f_col_w" style="height:10px;">&nbsp;</div>
		   </div>
		 </form> 
		 
</body>
<script>
	$(document).ready(function() {
		test_login();
	});
	
	function test_login(){
		$("#fm").on('submit',function(e){
		   var formData = $(this).serialize();
		   $(".loading").html('<div class="loader"></div>');
		   $.ajax({
			  type : "POST",
			  url : "<?php echo base_url('index.php/test/signin');?>",
			  data : formData,
			  dataType : "json"
		   }).done(function(response){  
				$(".loading").html('');
			   if((response.success) == false){
				  alert('error');
			    } else {
				  alert('correct');
				}
				$(".loading").html('SignIn');
			  }
		   )
		  e.preventDefault();
	  });
   }; 
</script>

if you want to try these code please use smartphone.

I did test this code on LG K8 with chrome browser.

Q : Is there any errors of my code?

Note I create my application on Codeigniter 3 framework,

please help me

Thanks

Share this post


Link to post
Share on other sites

@justsomeguy

Thanks for reply before, here the rest of code :

<!DOCTYPE HTML>
<head>
<title>Form Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<?php include('inc/link.php');?>
<script src="<?php echo base_url('assets/admin/js/jquery-1.10.2.js');?>"></script>

<style>

body{
  font-family:arial;
  font-size:13px;
}

.admin_panel {
  background-color:#B70531;
  width:auto;
  color:#FFF;
  text-align:center;
  padding:10px 0px; 
  }

.f_wrapper {min-width:270px; width:25%; margin:10% auto; padding:5px 5px 0px 5px;border:1px solid #C9C9C9;background:white}
.f_col {padding:3px;float:left;width:40%}
.f_col_w {width:auto; margin:0px; padding:0px 2px 0px 50%;clear:left;}
.number, .number p {color:#E4292F;}

.inbox{
  width : 135%;
  height: 30px;
}

@media (max-width: 1242px){
  body{
    font-size:11px;
  }
}


</style>
</head>
<body>
        <form id="fm" role="form"> 
		   <div class="f_wrapper">
		     <div align="center" class="number warn"><!-- WARN --></div>
		     <div align="center" class="number notify"><!-- WARN --></div>
		    <div class="admin_panel">Backoffice Template Media</div>
			 <div>&nbsp;</div>
		     <div class="f_col">Admin Username</div><div class="f_col"><input name="l_username" type="text" class="inbox form-control"></div>
			 <div class="f_col_w"><span class="number user"></span></div>
			 
			 <div class="f_col">Password</div><div class="f_col"><input name="l_password" type="password" class="inbox form-control"></div>
			 <div class="f_col_w"><span class="number pass"></span></div>
			 <div class="f_col">&nbsp;</div><div class="f_col"><button class="btn btn-default loading" id="signin">SignIn</button></div>
             <div class="f_col_w" style="height:10px;">&nbsp;</div>
		   </div>
		 </form> 
		 
</body>
<script>
	$(document).ready(function() {
		test_login();
	});
	
	function test_login(){
		$("#fm").on('submit',function(e){
		   var formData = $(this).serialize();
		   $(".loading").html('<div class="loader"></div>');
		   $.ajax({
			  type : "POST",
			  url : "<?php echo base_url('index.php/test/signin');?>",
			  data : formData,
			  dataType : "json"
		   }).done(function(response){  
				$(".loading").html('');
			   if((response.success) == false){
				  alert('error');
			    } else {
				  alert('correct');
				}
				$(".loading").html('SignIn');
			  }
		   )
		  e.preventDefault();
	  });
   }; 
</script>
	<!-- BOOTSTRAP SCRIPTS -->
    <script src="<?php echo base_url('assets/admin/js/bootstrap.min.js');?>"></script>
    <!-- METISMENU SCRIPTS -->
    <script src="<?php echo base_url('assets/admin/js/jquery.metisMenu.js');?>"></script>
     <!-- CUSTOM SCRIPTS -->
    <script src="<?php echo base_url('assets/admin/js/custom.js');?>"></script>  
    <script src="<?php echo base_url('assets/admin/js/mix.js');?>"></script>  
	<!-- DATA TABLES -->
    <script src="<?php echo base_url('assets/admin/js/dataTables/jquery.dataTables.js');?>"></script>
    <script src="<?php echo base_url('assets/admin/js/dataTables/dataTables.bootstrap.js');?>"></script>
    <!-- LIGHTBOX -->
	<script src="<?php echo base_url('assets/js/lightbox/jquery.popupoverlay.js');?>"></script>
</html>

Please help me

Thanks

Share this post


Link to post
Share on other sites

@justsomeguy

Hello thanks for reply,

Well, in PC it would be display alert, but in mobile alert won't displayed.

if you leave both of forms blank or either, it will shown alert with message "error", but if you fill both (whatever) it will shown "correct".

My actual problem / block is only why it didn't work on android mobile browser.

please help

Thanks

Share this post


Link to post
Share on other sites

So you don't see either alert on Android devices?  You should add some logging to PHP that you can check to verify that it's getting the ajax request and what data was sent and start verifying that way.

Share this post


Link to post
Share on other sites

Yes, I didn't see alert on android device entirely .This why I asked you to test my code via smartphone (android device).

I had debug (inspect element) it via network xhr in PC, everything were fine,

Q : do you know how to debug on android device?

please help

Thanks

Edited by gongpex
add some words

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×