Solved

jquery mobile retrieve mysql results

Posted on 2011-09-28
6
1,498 Views
Last Modified: 2012-11-05
Hi Experts,

I am trying to retrieve the results of a mysql query and insert them into a page for a mobile app I am building using dreamweaver & phonegap. I am using html5 localstorage to hold the data used for the query.
If I output the contents of localstorage they appear, so no problems there.
If I output the php page in my webbrowser then they appear so the php is fine.
So I am guessing there must be something wrong with my javascript.

Can anyone please help?
Many thanks
Jim

My HTML
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=1;" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<title>Menu</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
  <script>
  function getResults() {
  	var polnost = localStorage.getItem('policyNoStored');
	var telnost = localStorage.getItem('telnoStored');
	var fullnamest = localStorage.getItem('fullnameStored');
   
        $.ajax({  
            type: "POST",  
            url: "http://quote-sys.co.uk/ClaimApp/previous-claims.php",  
            data: "telno="+ telnost +"&policyno="+ polnost +"&fullname="+ fullnamest,  
            success: function(){  
                	$('#results').html(data);
              }  
        }); 
  }
 </script>   
</head>

<body onload="getResults();">
<div data-role="page" id="page" style="min-height:450px;">
  <div data-role="header">
    <h1>Previous Claims</h1>
  </div>
  <div data-role="content">
  
<ul data-role="listview" data-inset="true" data-split-icon="arrow-r">
<div id="results"></div>
</ul>
  
</div>

</div>

</body>
</html>

Open in new window


My PHP

<?php
require_once('Connections/claimapp.php');

$telno = $_REQUEST['telno'];
$policyno = $_REQUEST['policyno'];
$clientname = $_REQUEST['fullname'];
mysql_select_db($database_claimapp, $claimapp);
$query_claims = "SELECT * FROM claims WHERE (PolicyNo = '$policyno' AND ClientName = '$clientname') OR (ClientName = '$clientname' AND TelNo = '$telno')";
$claims = mysql_query($query_claims, $claimapp) or die(mysql_error());
$row_claims = mysql_fetch_assoc($claims);
$totalRows_claims = mysql_num_rows($claims);

 do { ?>
      <li><a href="previousclaimform.php?id=<?php echo $row_claims['claimID']; ?>"><?php echo $row_claims['PolicyNo']; ?>, <?php $actualDate = explode("-",$row_claims['AccDate']); echo $actualDate[2]."/".$actualDate[1]."/".$actualDate[0]; ?></a><a href="previousclaimform.php?id=<?php echo $row_claims['claimID']; ?>">Default</a></li>
 <?php } while ($row_claims = mysql_fetch_assoc($claims)); ?>

Open in new window

0
Comment
Question by:dovercomputers
  • 4
  • 2
6 Comments
 
LVL 17

Expert Comment

by:sonawanekiran
ID: 36715152
Try this
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=1;" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<title>Menu</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
  <script>
   $(document).ready(function(){
  getResults();
});
  function getResults() {
  	var polnost = localStorage.getItem('policyNoStored');
	var telnost = localStorage.getItem('telnoStored');
	var fullnamest = localStorage.getItem('fullnameStored');
   
        $.ajax({  
            type: "POST",  
            url: "http://quote-sys.co.uk/ClaimApp/previous-claims.php",  
            data: "telno="+ telnost +"&policyno="+ polnost +"&fullname="+ fullnamest,  
            success: function(){  
                	$('#results').html(data);
              }  
        }); 
  }
 </script>   
</head>

<body>
<div data-role="page" id="page" style="min-height:450px;">
  <div data-role="header">
    <h1>Previous Claims</h1>
  </div>
  <div data-role="content">
  
<ul data-role="listview" data-inset="true" data-split-icon="arrow-r">
<div id="results"></div>
</ul>
  
</div>

</div>

</body>
</html>

Open in new window

0
 
LVL 17

Expert Comment

by:sonawanekiran
ID: 36715186
And also check whether you are getting the data from php file or not. Add below line above line no : 25

alert(data);

Open in new window

0
 

Author Comment

by:dovercomputers
ID: 36715475
Thanks for the reply.

I am getting nothing, not even the alert.

The php is working, the link below shows the result of calling the php page
http://quote-sys.co.uk/ClaimApp/previous-claims.php?telno=07515722106&policyno=A12345&fullname=jim%20clarke

If I output the contents of localstorage they appear on the device, so that data is there.

So this javascript must be screwed somewhere
  <script>
   $(document).ready(function(){
  getResults();
});
  function getResults() {
  	var polnost = localStorage.getItem('policyNoStored');
	var telnost = localStorage.getItem('telnoStored');
	var fullnamest = localStorage.getItem('fullnameStored');
   
        $.ajax({  
            type: "POST",  
            url: "http://quote-sys.co.uk/ClaimApp/previous-claims.php",  
            data: "telno="+ telnost +"&policyno="+ polnost +"&fullname="+ fullnamest,  
            success: function(){  
					alert(data);
                	$('#results').html(data);
              }  
        }); 
  }
 </script>   

Open in new window

0
Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 17

Expert Comment

by:sonawanekiran
ID: 36715494
Sorry my mistake Replace success with i.e pass argument data to success function

success: function(data){  
                  alert(data);
                  $('#results').html(data);
              }  
0
 
LVL 17

Accepted Solution

by:
sonawanekiran earned 500 total points
ID: 36715502
Below is html test page
<html>
<head>
<title>Kiran Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script>
  $(document).ready(function(){
  getResults();
});
  function getResults() {
   // var polnost = localStorage.getItem('policyNoStored');
  //var telnost = localStorage.getItem('telnoStored');
  //var fullnamest = localStorage.getItem('fullnameStored');
   
        $.ajax({  
            type: "POST",  
            url: "http://quote-sys.co.uk/ClaimApp/previous-claims.php",  
            data: "telno=07515722106&policyno=A12345&fullname=jim%20clarke",  
            success: function(data){  
                 alert(data);
                  $('#results').html(data);
              }  
        }); 
  }
</script>
</head>
<body>
<ul id="results"></ul>
</body>
</html>

Open in new window

0
 

Author Comment

by:dovercomputers
ID: 36715522
Yes, thats what it was, forgot to pass the data to the function.

Top man, thought I was going mad.

Thanks very much!
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

808 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question