I have a php page located at http://www.ems-complete.com/peasi/dispatcher/dispatcher.php
I have set a php form that you can see at in at the bottom page under upcoming incidents section.
This code here is dispatcher.php which is the main page.
[php]
<head>
<link href="dispatch.css" rel="stylesheet" type="text/css">
<script src="dispatch.js"></script>
<script src="//code.jquery.com/jquery.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="dispatch.js"></script>
<script>
$(function() {
$(".button").click(function() {
// validate and process form here
});
});
var dataString = 'id=' + name + '&unit_status=' + email + '&phone=' + phone;
//alert (dataString);return false;
$.ajax({
type : "POST",
url : "dispatch.php",
data : dataString,
success : function() {
$('#dispatch').html("<div id='upcoming'></div>");
$('#message').html("<h2>Dispatch Complete</h2>").append("<p>We will be in touch soon.</p>").hide().fadeIn(1500, function() {
$('#message').append("<img id='checkmark' src='images/check.png' />");
});
}
});
return false;
</script>
<?php
include 'dispatch_mysql.php';
?>
</head>
<body>
<div class="container">
<div id="header" class="header">
<div class="Active">
<div style="color: #FFF; background:#00C; height:20px">
Active Incidents
</div>
<div id="active" class="active">
</div>
</div>
<script>
var $results = $('#active'), loadInterval = 60000;
(function loader() {
$.get('active_incidents.php', function(html) {
$results.hide(200, function() {
$results.empty();
$results.html(html);
$results.show(200, function() {
setTimeout(loader, loadInterval);
});
});
});
})();
</script>
<div class="Available Units">
<div style="color: #FFF; background:#00C; height:20px">
Available Units
</div>
<div id="available" class="available">
</div>
</div>
<script>
var $available = $('#available'), loadInterval = 60000;
(function loader() {
$.get('available_units.php', function(html) {
$available.hide(200, function() {
$available.empty();
$available.html(html);
$available.show(200, function() {
setTimeout(loader, loadInterval);
});
});
});
})();
</script>
<div class="Upcoming">
<div style="color: #FFF; background:#00C; height:20px">
Upcoming Incidents
</div>
<div id="upcoming" class="upcoming">
</div>
</div>
<script>
var $upcoming = $('#upcoming'), loadInterval = 60000;
(function loader() {
$.get('upcoming_incidents.php', function(html) {
$upcoming.hide(200, function() {
$upcoming.empty();
$upcoming.html(html);
$upcoming.show(200, function() {
setTimeout(loader, loadInterval);
});
});
});
})();
</script>
</div>
</div>
</body>
This here is the upcoming_incidents.php
[php]
<?php
include ("dispatch_mysql.php");
$option = '';
while ($row = mysql_fetch_assoc($resultavailable)) {
$option .= '<option value = "' . $row['id'] . '">' . $row['unit'] . '</option>';
}
?>
<table id="upcoming" width="100%" border="1">
<tr>
<th width="20%" >Available Units</th>
<th width="10%" >Recommended Station</th>
<th width="20%" >Incident Type</th>
<th width="40%" >Address/Location</th>
<th width="5%" >P/U Time</th>
<th width="5%" >Apt Time</th>
</tr>
<?php while ($fetchselupcoming = mysql_fetch_assoc($resultupcoming)) { ?>
<tr>
<?php
//**start pickup time conversion**//
$pickup = $fetchselupcoming['pu'];
$pickuptime = new DateTime($pickup, new DateTimeZone('EST'));
$pickuptime -> setTimezone(new DateTimeZone('America/Detroit'));
//**end pickup time conversion**//
//**start appointment time conversion**//
$apttime = date('H:i', strtotime($fetchselupcoming['at']));
$appointtime = new DateTime($apttime, new DateTimeZone('EST'));
$appointtime -> setTimezone(new DateTimeZone('America/Detroit'));
//** end appointment time conversion**//
if ($fetchselupcoming['type'] == 1) {
echo "<td>".
"<form id=\"dispatch\" >" .
"<select name=\"unit\">" . $option . "</select>" .
"<input type=\"hidden\" name=\"id\" value=".$fetchselupcoming['id']." >".
"<input type=\"hidden\" name=\"unit_status\" value=\"3\">" .
"<input type=\"hidden\" name=\"status\" value=\"3\">".
"<input class=\"button\" type=\"submit\" value=\"Dispatch\">".
"</form>" .
"</td>" .
"<td>" .$fetchselupcoming['station']. "</td>" .
"<td style=\"background-color:#CC0000 \">" . $fetchselupcoming['name'] . "</td>" .
"<td>" . $fetchselupcoming['full_address_2'] . "</td>" .
"<td>" . $pickuptime -> format('H:i') . "</td>" .
"<td>" . $appointtime -> format('H:i') . "</td>";
}
else if ($fetchselupcoming['type'] == 2) {
echo "<td>".
"<form id=\"dispatch\">" .
"<select name=\"unit\">" . $option . "</select>" .
"<input type=\"hidden\" name=\"id\" value=".$fetchselupcoming['id']." >".
"<input type=\"hidden\" name=\"unit_status\" value=\"3\">" .
"<input type=\"hidden\" name=\"status\" value=\"3\">".
"<input class=\"button\" type=\"submit\" value=\"Dispatch\">".
"</form>" .
"</td>" .
"<td>" .$fetchselupcoming['station']. "</td>" .
"<td style=\"background-color:#CC0000 \">" . $fetchselupcoming['name'] . "</td>" .
"<td>" . $fetchselupcoming['full_address_2'] . "</td>" .
"<td>" . $pickuptime -> format('H:i') . "</td>" .
"<td>" . $appointtime -> format('H:i') . "</td>";
}
else if ($fetchselupcoming['type'] == 3) {
echo "<td>".
"<form id=\"dispatch\">" .
"<select name=\"unit\">" . $option . "</select>" .
"<input type=\"hidden\" name=\"id\" value=".$fetchselupcoming['id']." >".
"<input type=\"hidden\" name=\"unit_status\" value=\"3\">" .
"<input type=\"hidden\" name=\"status\" value=\"3\">".
"<input class=\"button\" type=\"submit\" value=\"Dispatch\">".
"</form>" .
"</td>" .
"<td>" .$fetchselupcoming['station']. "</td>" .
"<td style=\"background-color:#CC0000 \">" . $fetchselupcoming['name'] . "</td>" .
"<td>" . $fetchselupcoming['full_address_2'] . "</td>" .
"<td>" . $pickuptime -> format('H:i') . "</td>" .
"<td>" . $appointtime -> format('H:i') . "</td>";
}
?>
</tr>
<?php }; ?>
</table>
[/php]
Problems is when I click the Dispatch submit button nothing happens with the JS if I set this up as a standard form it does work.