Thursday, March 16, 2017

Autocomplete with PHP, Jquery UI and Oracle - 1

searchUserUI.php
<?php

session_start();
date_default_timezone_set('EST');

echo "
<!doctype html>
<html>
<head>
<TITLE>jQuery AJAX Autocomplete - Country Example</TITLE>

";

echo '
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/css/autocomplete.css">
  <script src="//code.jquery.com/jquery-1.12.4.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
';

echo "
<script>
$(document).ready(function () {

$(\"#userName\").autocomplete({
            dataType: \"json\",
            minLength: 2,
            source: \"searchUser.php\",
            select: function(event,ui) {
                $(\"#userName\").val(ui.item.username);
            }
});

});

</script>
";
echo "
<script>

$(function(){

       $(document).on('click', \"#checkUserSessions\", function (e) {
                var user=$(\"#userName\").val();
                e.preventDefault();                $(\"#typeinUserName\").hide();

                var inputData=$(\":input\").serializeArray();


                        $.ajax({
                                type: \"POST\",
                                url: \"/oraoperation/showUserActiveSessions.php\",
                                dataType : 'html',
                                data: inputData,
                                success: function(data, textStatus, jQxhr ){
                                        $(\"#contentDiv\").html(data);
                                        },
                                error: function( jqXhr, textStatus, errorThrown ){
                                        $(\"#typeinUserName\").show();
                                        $(\"#messageDiv\").html(errorThrown);
                                            console.log( errorThrown );
                                        }
                        });
            });

});
</script>
";

echo "
</head>
<body>

";

                echo "<table border=0 id=\"outLineTable\" class=\"centretable\" width=\"100%\">";
                echo "<tbody id=\"typeinUserName\">";
                echo "<tr>";
                echo "<td align=\"center\">";

                echo "<table border=1 id=\"sessionContentTable\">";

                echo "<form id=\"chkDBSessions\" method=\"POST\">";
                echo "<tr>";
                echo "<td>Oracle User Name: </td> <td><input type=\"text\" id=\"userName\" name=\"userName\" class=\"search\"/>";
                echo "</td>";
                echo "</tr>";

                echo "</table>";
                echo "</td>";
                echo "</tr>";
                echo "<tr>";
                echo "<td align=\"center\">";
                echo "<input type=\"submit\" id=\"checkUserSessions\" name=\"checkUserSessions\" value=\"Check User Sessions\"/>";
                echo "</td>";
                echo "</tr>";
                echo "</form>";
                echo "</tbody>";
                echo "<tr>";
                echo "<td>";
                echo "<div id=\"messageDiv\" class=\"mssgDiv\">";
                echo "<md></md>";
                echo "</div>";
                echo "</td>";
                echo "</tr>";

                echo "</table>";
echo "</body>
</html>
";

 ?>

No comments:

Post a Comment