Jiansen Lu's Computing Blog: May 2015

Sunday, May 31, 2015

jQuery autocomplete in PHP and force to pickup

jQuery autocomplete introduction
https://jqueryui.com/autocomplete/

My example: autocomplete data from php
Input box values force to come from autocomplete dropdown

Two files: jquery_autocomplete.php, tags.php
jquery_autocomplete.php
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {

    $( "#tags" ).autocomplete({
      source: 'tags.php',
    minLength : 0,

      select : function(event, ui) {
             newname = ui.item.label;
             var url = '';
            $.post(url, ui.item.label, function(data) {
                    //alert(ui.item.label);

                });
            },
     change : function() {
            curname = $("#tags").val();
            if(curname.trim()!= newname) {
            alert("You need to pick a tag from the tag list.");
            $("#tags").val(oldname);
            }

       }
    }).focus(function(){
        $(this).autocomplete('search');
        oldname=$(this).val();
    });

});

</script>
</head>
<body>
<form onsubmit="return false" id="editContractInfo">
<div class="ui-widget">
<label for="tags">Tags: </label>
<input type="text" id="tags" name="tags">
</div>
</form>

</body>
</html>

tags.php
<?php
$availableTags = array(
     array("label"=>".Tbd", "value"=>".Tbd"),
    array("label"=>"ActionScript", "value"=>"ActionScript"),
    array("label"=>"AppleScript", "value"=>"AppleScript"),
    array("label"=>"Asp", "value"=>"Asp")
    );
echo json_encode($availableTags);
?>
Video: jQuery autocomplete in PHP and force to pickup

Saturday, May 30, 2015

Bootstrap Modal Dialog Example in PHP

This article is to show how to popup a dialog in Modal and post in PHP.
Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. Bootstrap can be downloaded from:
http://getbootstrap.com/
Two files for this demo:
modal_dialog.php, mydialogexample.js
modal_dialog.php
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="mydialogexample.js"></script>
</head>
<body>
<div class="container">
<h2>Modal Dialog Example</h2>

<h4>Student Number: <input type="text" name="student_number">
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" id="searchBtn_studentNum">Search Student</button> </h4>
<div class="modal fade" id="universalModal" tabindex="-1" role="dialog" aria-labelledby="universalModalLabel" aria-hidden="true">
<div class="modal-dialog" style="width:1000px;">
    <div class="modal-content">
      <form role="form" id="universalModalForm">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only"> Close</span></button>
          <h4 class="modal-title"><span class="glyphicon glyphicon-pencil"></span> Edit<span class="modal-title">.model-title</span></h4>
        </div>
        <div class="alert alert-danger fade in" id="universalModal-alert" style="display: none;">
          <span class="alert-body"></span>
        </div>
        <div class="modal-body">.modal-body</div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-primary" id="submitBtn"></button>
        </div>
      </form>
    </div>
</div>
</div>

<textarea id="searchResultForm" style="display:none">
<table class="table table-striped table-hover" >
    <tbody>
        <tr>
            <td><b>Last Name: </b></td>
            <td> <input type="text" name="lname">
            </td>

            <td><b>First Name:</b> </td>
            <td> <input type="text" name="fname"></td>

        </tr>   </tr>
    </tbody>
</table>
</textarea>

</div>
</body>
</html>
mydialogexample.js
$(document).ready(function(){

   $('#universalModal form').submit(function (event){
       event.preventDefault();

       var formObj = {};
       var inputs = $(this).serializeArray();
       var url = '';
       $.each(inputs, function(i, input) {
           formObj[input.name] = input.value;
       });
        var len = inputs.length;
        var dataObj = {};
        for (i=0; i<len; i++) {
                 dataObj[inputs[i].name] = inputs[i].value;
         }
            //inputs['lname'];
                  $.post(url, inputs, function(data) {
                   $('#universalModal').modal('hide');

               });

   });

   $('#searchBtn_studentNum').off('click').click(function(){
       var student_num = $('input[name="student_number"]').val();

       $('#universalModal').modal('show');
       $('#universalModal .modal-title').html('<b>Enter Student Info</b>');
       $('#universalModal .modal-body').html($('#searchResultForm').val());
       $('#universalModal .modal-footer button#submitBtn').html('Save and Exit');
   });
});
Video:Bootstrap Modal Dialog Example in PHP

Jiansen Lu's Computing Blog

Pages

Adsense

Popular Posts

Sunday, May 31, 2015

jQuery autocomplete in PHP and force to pickup

Saturday, May 30, 2015

Bootstrap Modal Dialog Example in PHP