Wednesday 25 March 2015

Numberic keyboard for my password - Phonegap - JQM

Android keyboard display numberic keyboard for my password Input feild :
=======================================================

 <input type="tel" pattern="[0-9]*" name="Password" id="Password" />

css:

<style type="text/css">
        #Password {
            -webkit-text-security: disc;
        }
</style>
at No comments:

Monday 23 March 2015

Submit a jQuery Mobile form via AJAX with PHP


 index.html:
=========

<html !doctype>
<html>
<head>
<title>Submit a form via AJAX</title>
      <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.css">
      <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
      <script src="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.js"></script>


    <script>
        function onSuccess(data, status)
        {
            data = $.trim(data);
            $("#notification").text(data);
        }
 
        function onError(data, status)
        {
            // handle an error
        }       
 
        $(document).ready(function() {
            $("#submit").click(function(){
                alert(1);
 
                var formData = $("#callAjaxForm").serialize();
                alert(formData);
 
                $.ajax({
                    type: "POST",
                    url: "http://localhost/pdm/callajax.php",
                    cache: false,
                    data: formData,
                    success: onSuccess,
                    error: onError
                });
 
                return false;
            });
        });
    </script>
    </head>
  <boby>
    <!-- call ajax page -->
    <div data-role="page" id="callAjaxPage" data-url="callAjaxPage" class="ui-page ui-body-c ui-page-active">
        <div data-role="header" class="ui-bar-a ui-header" role="banner">
            <h1 class="ui-title" tabindex="0" role="heading" aria-level="1">Call Ajax</h1>
        </div>
 
        <div data-role="content" class="ui-content" role="main">
            <form id="callAjaxForm">
                <div data-role="fieldcontain" class="ui-field-contain ui-body ui-br">
                    <label for="firstName" class="ui-input-text">First Name</label>
                    <input type="text" name="firstName" id="firstName" value="" class="ui-input-text ui-body-null ui-corner-all ui-shadow-inset ui-body-c">

                    <label for="lastName" class="ui-input-text">Last Name</label>
                    <input type="text" name="lastName" id="lastName" value="" class="ui-input-text ui-body-null ui-corner-all ui-shadow-inset ui-body-c">
                    <h3 id="notification"></h3>
                    <div data-theme="b" class="ui-btn ui-btn-up-b ui-btn-corner-all ui-shadow" aria-disabled="false"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Submit</span></span><button data-theme="b" id="submit" type="submit" class="ui-btn-hidden" aria-disabled="false">Submit</button></div>
                </div>
            </form>
        </div>
 
        <div data-role="footer" class="ui-bar-a ui-footer" role="contentinfo">
            <h1 class="ui-title" tabindex="0" role="heading" aria-level="1">GiantFlyingSaucer</h1>
        </div>
    </div>


<div class="ui-loader ui-body-a ui-corner-all" style="top: 326.5px;"><span class="ui-icon ui-icon-loading spin"></span><h1>loading</h1></div>v

</body>

</html>

 callajax.php :
=========
<?php
 $firstName = $_POST["firstName"];
    $lastName = $_POST["lastName"];
    
    echo("First Name: " . $firstName . " Last Name: " . $lastName);
    ?>

 Thanks for Ref:

 http://www.sitepoint.com/50-jquery-mobile-development/

at No comments:
Subscribe to: Posts (Atom)