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>

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/

Friday, 23 January 2015

NameSpace in Javascript :

NameSpace in Javascript :
=======================

In order to reduce the number of objects and functions that are added to the global scope in our applications,

using namespaces in JavaScript is definitely a recommended practice. Just like static members,

namespaces don’t have any dedicated syntax built into the language either.

But we’re able to get the same benefits by creating a single global object and adding all our objects and functions to this object.

var AppSpace = AppSpace || {};

AppSpace.Podcast = function {
    this.title = 'Astronomy Cast';
    this.description = 'A fact-based journey through the galaxy.';
    this.link = 'http://www.astronomycast.com';
};

AppSpace.Podcast.prototype.toString = function() {
    return 'Title: ' + this.title;
}

This way we lower the possibility of naming collisions when using our code in conjunction with other JavaScript libraries.

We can also use the same naming conventions for namespaces as in any other programming language that does provide syntactical support.

Suppose we want to use a namespace like “MyCompany.MyApplication.Model”.

We can accomplish this by using the same approach as shown earlier:

var MyCompany = MyCompany || {};
MyCompany.MyApplication = {};
MyCompany.MyApplication.Model = {};

or something like the following:

var MyCompany = MyCompany || {
    MyApplication: {
        Model: {}
    }      
};

However, this approach can become very cumbersome and hard to maintain when our code expands over time.

In order to overcome this issue we can use a general purpose namespace function to achieve the same thing using a single line of code.

var model = namespace('MyCompany.MyApplication.Model');

model.Podcast = function {
    this.title = 'Astronomy Cast';
    this.description = 'A fact-based journey through the galaxy.';
    this.link = 'http://www.astronomycast.com';
};

model.Podcast.prototype.toString = function() {
    return 'Title: ' + this.title;
}

Here’s an example of how we can implement such a namespace function.

function namespace(namespaceString) {
    var parts = namespaceString.split('.'),
        parent = window,
        currentPart = '';  
       
    for(var i = 0, length = parts.length; i < length; i++) {
        currentPart = parts[i];
        parent[currentPart] = parent[currentPart] || {};
        parent = parent[currentPart];
    }
   
    return parent;
}

Using this approach requires less typing and the resulting code also looks less verbose. Some JavaScript libraries,

like YUI and the Dojo Toolkit, provide their own implementations for such a namespace utility function.

I encourage you to take a look at their implementations as well.

Android USB Driver Update

Android USB Driver Update:

Nexus 7 can’t be recognized by MS-Windows via USB
1.Connect your Nexus 7 to your computer's USB port.

2.Right-click on Computer from your desktop or Windows Explorer, and select [Manage].
 http://kmpic.asus.com/images/2013/09/23/96034148-472b-4260-addd-ccfc0a229d81.png

3.Select [Device Manager] in the left pane of the Computer Management window.
4.Locate and expand [ASUS Android Device] in the right pane.
5.Right-click Android Composite ADB Interface and select [Update Driver Software].
http://kmpic.asus.com/images/2013/09/23/06996354-6745-4aed-a697-824625469d33.jpg

6.Click [Browse my computer for driver software] to specify a location. 
http://kmpic.asus.com/images/2013/09/23/8fe2dcc7-94b9-4501-a9ee-2badd775c74b.png       
NOTE : Some time it’s located in Other devices. We have to right click & process follg steps.
7.Click[Let me pick from a list of device drivers on my computer to specify the driver file.
NOTE :
First we have to downlaod USB Driver from http://dottech.org/26188/usb-adb-and-fastboot-drivers-for-windows-for-all-android-phones/#all
Or Nexuz product here Asus. So, I get driver from asus site.
( i.e )relavent Nexux 7 or category. I will enhance this for my blog too. Thanks for your feture post.
http://kmpic.asus.com/images/2013/09/23/3ffde5f9-6752-4011-b648-a8bc4a6d2e18.png

8.Click [USB Composite Device] option and Click on [Next].
http://kmpic.asus.com/images/2013/09/23/c323ff48-fa78-4395-b667-873250ccfa61.png

9.Click [Close] when the update is finished.
http://kmpic.asus.com/images/2013/09/23/fa3025b9-5246-4dd8-bb77-36675d7ff73c.png



Step to install APK in Android Emulator :

Step to install APK in Android Emulator :
=========================================
Step 1-> Run the emulator ( While I created new emulator Now )

step 2-> Paste the apk in SDK manager tools and platform-tools folders.
( To avoid some issues/ error)

Step 3-> Run this command adb CMD:\>install AppName.APK (open eun->cmd)

step 4-> Wait for 2 min it's show Success Message.
Sometimes App icon closed unfortunately.

step 5->But App will run continuous Try

Load an External JavaScript file dynamically calling:

Load an External Javascript file dyanamically calling:
======================================================

<script>

var oHead = document.getElementsByTagName('HEAD').item(0);
var oScript= document.createElement("script");
oScript.type = "text/javascript";
oScript.src="other.js";    // we can pass even folder level js files too. (i.e) foldernamee+"mainjs.js";
oHead.appendChild( oScript);

</script>


For Further Ref:
Thanks for Sharing :
http://ntt.cc/2008/02/10/4-ways-to-dynamically-load-external-javascriptwith-source.html

PHP - How to call external host from local host - Cross Domain Call

How to call external host from local host / (cross domain call from PHP WAMP)
===================================================================

In the JS file have this request :

var request = new XMLHttpRequest();
request.open("POST", endpoint + "/api/version/authedication/userlogin", true);


Here endpoint is external IP / URL for hosted Domain address

So, Make the following changes in WAMP -> Apache -> config -> http.config gile

Below this virtual host:

# Virtual hosts


#Include conf/extra/httpd-vhosts.conf


# Oauth ESA server
ProxyPassMatch ^/(api)(.*) http://23.543.34.34:8480/$1$2
  -> $1 is (api),$2 is http://....

ProxyPassReverse /api/ http://23.543.34.34:8490/$1$2

Exp: => when call link start with api redirect to follwing URL and follwed folder

Uncommand this modules in the same file

LoadModule vhost_alias_module modules/mod_vhost_alias.so

LoadModule proxy_http_module modules/mod_proxy_http.so

LoadModule proxy_scgi_module modules/mod_proxy_scgi.so

etc....

Load / Add JS Dynamically :

Load / Add JS Dynamically :
-----------------------------------

addElement JavaScript Function
==============================
function addElement() {

  var ni = document.getElementById('myDiv');

  var numi = document.getElementById('theValue');

  var num = (document.getElementById('theValue').value -1)+ 2;

  numi.value = num;

  var newdiv = document.createElement('div');

  var divIdName = 'my'+num+'Div';

  newdiv.setAttribute('id',divIdName);

  newdiv.innerHTML = 'Element Number '+num+' has been added! <a href=\'#\' onclick=\'removeElement('+divIdName+')\'>Remove the div "'+divIdName+'"</a>';

  ni.appendChild(newdiv);

}

removeElement JavaScript Function
=================================

function removeElement(divNum) {

  var d = document.getElementById('myDiv');

  var olddiv = document.getElementById(divNum);

  d.removeChild(olddiv);

}

Input value change by Number Picker based on left right side of text box:

Input value change by Number Picker based on left right side of text box:
========================================================================

Javascript Arithamatic Operation :


Javascript addion word if both the varaible are in Numeric datatype;

when try to make addiona operation in javscript function,

It's consider as string concationation in var + number.


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Spinner Control in HTML5 by Mobile DON</title>
<script>
function inc()
{

var inc= document.getElementById('age').value;

inc++;
console.log(inc);
document.getElementById('age').value=inc;
}

function dec()
{

var dec= document.getElementById('age').value;
dec= dec-1;
console.log(dec);
document.getElementById('age').value=dec;
}

</script>
</head>
<body>
   <form>
     <label for="age" >
      <i value="dec" onclick="dec()" >   Minus </i>
      <input type="number" name="age" id="age"  />
      <i value="inc" onclick="inc()" > Plus</i>
     </label>
    </form>
</body>
</html>

Dynamically Load JS/CSS using Javascript Function:

Dynamically Load JS/CSS using Javascript Function:
-----------------------------------------------------------------

<input type="button" onclick="helper()" value="Helper">

   <script language="JavaScript">
   function helper()
   {
      var head= document.getElementsByTagName('head')[0];
      var script= document.createElement('script');
      script.type= 'text/javascript';
      script.src= 'helper.js';
      head.appendChild(script);
   }
   </script>

Load xml data in Javascript

Load xml data in Javascript 
load_xml_data.html:
=====================

<html>

<body>
    <h1>W3Schools Internal Note</h1>
    <div>
        <b>To:</b>  <span id="to"></span>
        <br />
        <b>From:</b>  <span id="from"></span>
        <br />
        <b>Message:</b>  <span id="message"></span>
    </div>

    <script>
        if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else { // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.open("GET", "node.xml", false);
        xmlhttp.send();
        xmlDoc = xmlhttp.responseXML;
       
        document.getElementById("to").innerHTML = xmlDoc.getElementsByTagName("exitButtonText")[0].childNodes[0].nodeValue;
        document.getElementById("from").innerHTML = xmlDoc.getElementsByTagName("balanceButtonText")[0].childNodes[0].nodeValue;
       // document.getElementById("message").innerHTML = xmlDoc.getElementsByTagName("body")[0].childNodes[0].nodeValue;
    </script>

</body>

</html>


node.xml:
==========

<?xml version="1.0" encoding="UTF-8" ?>
<node>
    <to>Tove</to>
    <from>Jani</from>
    <heading>Reminder</heading>

    <body>Don't forget me this weekend!</body>
</node>




Redux vs Redux Toolkit vs React Context

  These are often confused. Feature Redux Redux Toolkit Context API Purpose State management Simplifies Redux Shares values in Rea...