BrainCoding: December 2015

Livesearch php and ajax

  <!doctype html>
<html>
<head>
 <meta charset="UTF-8">
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> //ur getting the jquery via online
 <script>
 $(document).ready(function(){
    $("#textBoxId").change(function() //triggers when you change the value in your textbox
    {
       var value = $(this).val(); //gets the value of your textbox
       $.post("search.php", {id:value},function(data)
           $("#results").append(data);
        }); 
    }
 });
</script>
</head>
<body>
 <input type="text" id="textBoxId"/>
<br>
<div id="results"></div>
</body>
</html>

And in your php:

<?php
mysqli_connect("localhost", "#", "#") or die(mysqli_connect_errno());
mysql_select_db("#") or die(mysql_error());
$search = $_POST['id'];
$returnData = ""; 
$players = mysql_query("SELECT firstname FROM players WHERE firstname LIKE '%search%'");
while($player = mysql_fetch_array($players)) {
    $returnData .= "<div>" . $players["firstname"] . "</div>";
}
echo $returnData;

Measuring PHP Page Load Time

Put the following code at the very top of your PHP page (if you measure the time needed for particular part of the code put this right before that PHP code part)

<?php

$time = microtime();

$time = explode(' ', $time);

$time = $time[1] + $time[0];

$start = $time;

?>

The following code has to be put at the very end of the web page (or the end of the PHP code part)

<?php

$time = microtime();

$time = explode(' ', $time);

$time = $time[1] + $time[0];

$finish = $time;

$total_time = round(($finish - $start), 4);

echo 'Page generated in '.$total_time.' seconds.';

?>

Dynamically Add and Remove HTML Elements using JQuery append(), after() and remove() Methods

The Markup

<html>
<head>
    <title>Create Elements Dynamically using JQuery</title>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js">
            </script>
    <style>
        body {
            font: 13px verdana;
            font-weight: normal;
        }
    </style>
</head>
<body>
    <div id="main">
        <input type="button" id="btAdd" value="Add Element" class="bt" />
        <input type="button" id="btRemove" value="Remove Element" class="bt" />
        <input type="button" id="btRemoveAll" value="Remove All" class="bt" /><br />
    </div>
</body>

The Script

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

        var iCnt = 0;
        // CREATE A "DIV" ELEMENT AND DESIGN IT USING JQUERY ".css()" CLASS.
        var container = $(document.createElement('div')).css({
            padding: '5px', margin: '20px', width: '170px', border: '1px dashed',
            borderTopColor: '#999', borderBottomColor: '#999',
            borderLeftColor: '#999', borderRightColor: '#999'
        });

        $('#btAdd').click(function() {
            if (iCnt <= 19) {

                iCnt = iCnt + 1;

                // ADD TEXTBOX.
                $(container).append('<input type=text class="input" id=tb' + iCnt + ' ' +
                            'value="Text Element ' + iCnt + '" />');

                // SHOW SUBMIT BUTTON IF ATLEAST "1" ELEMENT HAS BEEN CREATED.
                if (iCnt == 1) {

                    var divSubmit = $(document.createElement('div'));
                    $(divSubmit).append('<input type=button class="bt" 
                        onclick="GetTextValue()"' + 
                            'id=btSubmit value=Submit />');

                }

                // ADD BOTH THE DIV ELEMENTS TO THE "main" CONTAINER.
                $('#main').after(container, divSubmit);
            }
            // AFTER REACHING THE SPECIFIED LIMIT, DISABLE THE "ADD" BUTTON.
            // (20 IS THE LIMIT WE HAVE SET)
            else {      
                $(container).append('<label>Reached the limit</label>'); 
                $('#btAdd').attr('class', 'bt-disable'); 
                $('#btAdd').attr('disabled', 'disabled');
            }
        });

        // REMOVE ELEMENTS ONE PER CLICK.
        $('#btRemove').click(function() {
            if (iCnt != 0) { $('#tb' + iCnt).remove(); iCnt = iCnt - 1; }
        
            if (iCnt == 0) { 
                $(container).
                    .empty() 
                    .remove(); 

                $('#btSubmit').remove(); 
                $('#btAdd')
                    .removeAttr('disabled') 
                    .attr('class', 'bt') 

            }
        });

        // REMOVE ALL THE ELEMENTS IN THE CONTAINER.
        $('#btRemoveAll').click(function() {
            $(container)
                .empty()
                .remove(); 

            $('#btSubmit').remove(); 
            iCnt = 0; 
            
            $('#btAdd')
                .removeAttr('disabled') 
                .attr('class', 'bt');
        });
    });

    // PICK THE VALUES FROM EACH TEXTBOX WHEN "SUBMIT" BUTTON IS CLICKED.
    var divValue, values = '';

    function GetTextValue() {

        $(divValue) 
            .empty() 
            .remove(); 
        
        values = '';

        $('.input').each(function() {
            divValue = $(document.createElement('div')).css({
                padding:'5px', width:'200px'
            });
            values += this.value + '<br />'
        });

        $(divValue).append('<p><b>Your selected values</b></p>' + values);
        $('body').append(divValue);
    }
</script>
</html>

Friday, December 11, 2015

Livesearch php and ajax

Measuring PHP Page Load Time

Dynamically Add and Remove HTML Elements using JQuery append(), after() and remove() Methods