smartcode: JQuery

Showing posts with label JQuery. Show all posts

Friday, December 5, 2014

How to checkbox value assign in Phonegap using Jquery

I want to assign the default value true in checkbox using jquery. I tried some of the way to assign using like javascript

document.getElementById("checkbox-1").value()=true;

and

$("#checkbox-1").checked(true);
$("#checkbox-1").attr("checked","checked");

the checkbox value i does not assign the value.

Finally i tried this I fixed. Its working

 $("#checkbox-1").attr("checked",true).checkbox("refresh");

Tuesday, November 25, 2014

Check value exist or Not (AND) Insert the values in Sqlite database using Phonegap

I have written a code that I id not exist insert values of a record in sqlite database.
If already exist just update or do something else. Its just easy way to do.
I have followed this code and written some phonegap application. easy to bind from the sqlite table further use to display the page.

function insertIndustry(industryID,industry)
{
    db = window.openDatabase("mydb","0.1","InsuranceDb", 500000);
    
    var selectQuery ="SELECT COUNT(*) AS MyCount FROM industrymaster WHERE industryId="+industryID;
    db.transaction(function selectQueryDB(tx){tx.executeSql(selectQuery,[],function txSuccessResult(tx,results) {
                          
                              var messageid = results.rows.item(0)['MyCount'];
                               if(messageid == 1)
                                {
                                 console.log("exist");
                                }
                                else
                                {
                                 tx.executeSql("INSERT INTO industrymaster(industryId, industry) VALUES ("+industryID+",'"+industry+"')");
                                }
                              
                             },errorCB);  }, errorDB);
}

function errorCB(err) {
     console.log("Error processing SQL 1: "+err.code);
}

function errorDB(error) {
    console.log(error +"Error processing SQL 1: ");   
}

Tuesday, November 18, 2014

Get Jquery mobile dropdown selected Item in Phonegap

I want to get the jquery mobile dropdown selected value and selected text.
this script get the selected text value in phonegap.

$("#yourdropdown option:selected").text();

this script get the dropdown selected value in phonegap.

$("#yourdropdown").val();

Friday, November 14, 2014

Json Parse using javascript

I am working in phone gap application i want to get the json value and display in web page using javascript while when i hot code my json format value.

I can able to get the all the values when i try to get dynamically. I can't get the values so. I have tried the json parse. Its working correctly because the dainamic url values all getting string format. so i can't get correctly.

var json = '{"result":true,"count":1}',
    obj = JSON.parse(json);

alert(obj.count);

Thursday, October 30, 2014

Image convert to String using Javascript

I am working as phonegap developer past 1 year. I want to save the image in my database. so i want to convert image to string .

Create a canvas, load your image into it and then use toDataURL() to get the base64 representation (actually, it's a data: URL but it contains the base64-encoded image)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>File Transfer Example</title>
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
   </head>
<body>
  <input type="file" id="file" />
<div id="imgTest"></div>
<div id="testing"></div>
<script type='text/javascript'>
var _URL = window.URL || window.webkitURL;

$("#file").change(function(e) {
    var file, img;


    if ((file = this.files[0])) {
        img = new Image();
        img.onload = function() {
if(this.width > 150 && this.height > 150 )
            {
            alert("please upload image size 150 X 100");
            }
            else{
            var filesSelected = document.getElementById("file").files;
    if (filesSelected.length > 0)
    {
        var fileToLoad = filesSelected[0];

        var fileReader = new FileReader();

        fileReader.onload = function(fileLoadedEvent) {
            var srcData = fileLoadedEvent.target.result; // <--- data: base64

            var newImage = document.createElement('img');
            newImage.src = srcData;

            document.getElementById("imgTest").innerHTML = newImage.outerHTML;
            alert("Converted Base64 version is "+document.getElementById("imgTest").innerHTML);
            console.log("Converted Base64 version is "+document.getElementById("imgTest").innerHTML);
   document.getElementById("testing").innerHTML = srcData;
        }
        fileReader.readAsDataURL(fileToLoad);
    }
            }
        };
        img.onerror = function() {
            alert( "not a valid file: " + file.type);
        };
        img.src = _URL.createObjectURL(file);


    }

});
</script>
</body>
</html>

Jquery mobile datepicker for Phonegap

I am working us a phonegap developer past 1 year. i used pickerview for datepicker. when i update ios 8. the pickerview bug. so i changed the jquery mobile theme based date picker.

Its very easy to call the date picker popup using the jquery mobile theme base date picker without jquery theme cannot be work.

Some ios pickerview not working in ios 8 but this date picker work all the platform.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQueryMobile - DateBox Demos</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css" />
    <link rel="stylesheet" href="http://cdn.jtsage.com/datebox/1.4.4/jqm-datebox-1.4.4.min.css" />
    <link type="text/css" href="css/demos.css" rel="stylesheet" />
    <!-- NOTE: Script load order is significant! -->
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>
    
    
    <script type="text/javascript" src="http://cdn.jtsage.com/datebox/1.4.4/jqm-datebox-1.4.4.core.min.js"></script>
    
    
    <script type="text/javascript" src="http://cdn.jtsage.com/datebox/1.4.4/jqm-datebox-1.4.4.mode.flipbox.min.js"></script>
    
    <script type="text/javascript">
    jQuery.extend(jQuery.mobile,
    {
      ajaxEnabled: false
    });
 
    </script> 
  </head>
  <body>
  
    <div data-role="page" id="main" align="center" style="width:100px;" >     
    
      <center>
          
            <label for="mode7">TimeFlipBox</label>
            <input name="mode7" id="mode7" type="text" data-role="datebox" data-options='{&quot;mode&quot;:&quot;flipbox&quot;}' readonly=true />
         </center>
       
    </div>
</html>

Jquery mobile Time Picker for Phonegap

I am working us a phonegap developer past 1 year. i used pickerview for timepicker. when i update ios 8. the pickerview bug. so i changed the jquery mobile theme based time picker.

Its very easy to call the time picker popup using the jquery mobile theme base time picker without jquery theme cannot be work.

Some ios pickerview not working in ios 8 but this time picker work all the platform.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQueryMobile - DateBox Demos</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css" />
    <link rel="stylesheet" href="http://cdn.jtsage.com/datebox/1.4.4/jqm-datebox-1.4.4.min.css" />
    <link type="text/css" href="css/demos.css" rel="stylesheet" />
    <!-- NOTE: Script load order is significant! -->
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>
    
    
    <script type="text/javascript" src="http://cdn.jtsage.com/datebox/1.4.4/jqm-datebox-1.4.4.core.min.js"></script>
    
    
    <script type="text/javascript" src="http://cdn.jtsage.com/datebox/1.4.4/jqm-datebox-1.4.4.mode.flipbox.min.js"></script>
    
    <script type="text/javascript">
    jQuery.extend(jQuery.mobile,
    {
      ajaxEnabled: false
    });
 
    </script>
 <style>
 .ui-datebox-flipcenter{width:160px;}
 </style>
  </head>
  <body>
  
    <div data-role="page" id="main" align="center" style="width:100px;" >     
    
      <center>
          
            <label for="mode7">TimeFlipBox</label>
            <input name="mode7" id="mode7" type="text" data-role="datebox" data-options='{"mode": "timeflipbox", "useNewStyle":true,"overrideTimeFormat": 24}' />
         </center>
       
    </div>
</html>

Tuesday, June 17, 2014

Load more dynamic website content while Scroll down

This loads dynamic content while scroll down using javascript and ajax post. Its very simple to implement the website and jquery mobile application also Below is the sample code that pop up an message when user reaches end of the page.

 <script>
    $(window).scroll(function () {
        if ($(document).height() <= $(window).scrollTop() + $(window).height()) {
            alert("End Of The Page");
        }
    });</script>

Steps:
User scroll down the page and reached to end of the page.
Scroll end event fire.
Show loader image and make an ajax request to the server (call handler or WCF Services or Rest Services ).
Get the response and append the data to data container and hide loader image.

 <script type="text/javascript">
    var sIndex = 11, offSet = 10, isPreviousEventComplete = true, isDataAvailable = true;
  
    $(window).scroll(function () {
     if ($(document).height() - 50 <= $(window).scrollTop() + $(window).height()) {
      if (isPreviousEventComplete && isDataAvailable) {
       
        isPreviousEventComplete = false;
        $(".LoaderImage").css("display", "block");

        $.ajax({
          type: "GET",
          url: 'getMorePosts.ashx?startIndex=' + sIndex + '&offset=' + offSet + '',
          success: function (result) {
            $(".divContent").append(result);

            sIndex = sIndex + offSet;
            isPreviousEventComplete = true;

            if (result == '') //When data is not available
                isDataAvailable = false;

            $(".LoaderImage").css("display", "none");
          },
          error: function (error) {
              alert(error);
          }
        });

      }
     }
    });
</script>

Saturday, October 6, 2012

Sum of two Textbox values into third Textbox using JQuery

A script that sums up two textbox values using jQuery. **Note that I am not using any validation for textbox values. its very simple.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
var textBox1 = $('input:text[id$=TextBox1]').keyup(foo);
           var textBox2 = $('input:text[id$=TextBox2]').keyup(foo);
            function foo() {

                var value1 = textBox1.val();
                var value2 = textBox2.val();
                var sum = add(value1, value2);

                $('input:text[id$=TextBox3]').val(sum);
            }
            function add() {

                var sum = 0;
                for (var i = 0, j = arguments.length; i < j; i++) {
                    if (IsNumeric(arguments[i])) {
                        sum += parseFloat(arguments[i]);
                    }
                }
                return sum;
            }
            function IsNumeric(input) {
                return (input - 0) == input && input.length > 0;
            }
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <table width="300px" border="1" style="border-collapse:collapse;background-color:#E8DCFF">
    <tr>
        <td>Butter</td>
        <td> <asp:TextBox runat="server" ID="TextBox1"></asp:TextBox></td>
    </tr>
    <tr>
        <td>Cheese</td>
        <td>
    <asp:TextBox runat="server" ID="TextBox2"></asp:TextBox>
        </td>
    </tr>
    <tr>
        <td>Total</td>
        <td>
    <asp:TextBox runat="server" ID="TextBox3"></asp:TextBox>
        </td>
    </tr>
    </table>
    </div>
    </form>
</body>
</html>

Output:

Pages