Okay then. Your basic page structure looks like this:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
You need all of these elements and they can appear only once.
Meta tags and style sheets should go in the head of the page.
Script includes at the bottom.
We’ll also get rid of the refresh function:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
</head>
<body>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</body>
</html>
Then add a <form> for your buttons, but style it using CSS (not the deprecated <center> tag):
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<style>
#myForm{ width:750px; margin: 0 auto; text-align: center;}
</style>
</head>
<body>
<div data-role="page" id="admin" data-theme="b">
<form id="myForm" method="post" action="submit.php">
<h2>SMS Display Admin</h2>
<div>
<a href="#newsms">
<button data-inline="true">New SMS Message</button>
</a>
<a href="#removesms">
<button data-inline="true">Remove a SMS</button>
</a>
</div>
<div>
<a href="#newadvert">
<button data-inline="true">New Advert Message</button>
</a>
<a href="#removeadvert">
<button data-inline="true">Remove a Advert</button>
</a>
</div>
<div>
<a href="#newbadword">
<button data-inline="true">New Bad Word</button>
</a>
<a href="#removebadword">
<button data-inline="true">Remove a badword</button>
</a>
</div>
</form>
<div id="results"></div>
</div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</body>
</html>
After that you can add the AJAX functionality:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<style>
#myForm, #result{ width:750px; margin: 0 auto; text-align: center; margin-bottom:25px;}
</style>
</head>
<body>
<div data-role="page" id="admin" data-theme="b">
<form id="myForm" method="post" action="submit.php">
<h2>SMS Display Admin</h2>
<div>
<a href="#newsms">
<button data-inline="true" name="action" value="New SMS">New SMS Message</button>
</a>
<a href="#removesms">
<button data-inline="true" name="action" value="Remove SMS">Remove a SMS</button>
</a>
</div>
<div>
<a href="#newadvert">
<button data-inline="true" name="action" value="New Advert">New Advert Message</button>
</a>
<a href="#removeadvert">
<button data-inline="true" name="action" value="Remove Advert">Remove a Advert</button>
</a>
</div>
<div>
<a href="#newbadword">
<button data-inline="true" name="action" value="New Bad Word">New Bad Word</button>
</a>
<a href="#removebadword">
<button data-inline="true" name="action" value="Remove Bad Word">Remove a badword</button>
</a>
</div>
</form>
<div id="result"></div>
</div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script>
$("button").on("click", function(e) {
e.preventDefault();
var action = this.value;
$.ajax({
type : "POST",
url : "submit.php",
data: "action=" + action,
success : function(res) {
$("#result").html(res);
}
});
});
</script>
</body>
</html>
Whenever any of the buttons are pressed, the form’s submit action is prevented and instead a POST request is sent to “submit.php”.
Whatever is returned by the PHP script is displayed within the “result” div.
<?php
// submit.php
$action = $_POST['action'];
echo("You pressed the '" . $action . "' button.");
Here’s a working demo.
Let me know if you have any questions.