Ajax load with swipe gesture on touch screen phones

by nolovelust 21. July 2011 15:26

There is a nice jQuery plugin called TouchWipe to obtain touch gestures from iPhone, iPod Touch and iPad and Android phones. Simple example below shows how to trigger an ajax load with left or right swipe on certain element

<!DOCTYPE html>
<html>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script src="http://www.netcu.de/templates/netcu/js/jquery.touchwipe.min.js"  type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#list").touchwipe({
                wipeLeft: function () { loadData(); },
                wipeRight: function () { loadData(); },
                preventDefaultEvents: true
            });
        });  
		
		function loadData() {
		$.ajax({
			type: "GET",
			url: "AjaxLoad.htm",
			dataType: "html",
			success: function (result) { $('#listul').html(result); },
			error: function (err) {  }
		});
	}

    </script>
</head>
<body>
<div id="list" class="list" title="Swipe your finger left or right on the thumbnails below to load next set video set.">
<ul id="listul"></ul>
</div>
</body>
</html>

Tags: , , , , , , ,

Mobile web | Useful

Permalink | Comments (0)

Display and Hide Ajax loading icon on every ajax request with jQuery

by nolovelust 28. April 2011 10:28

I've had my eureka moment while viewing source of a site last night.

I usually create a show and hide functions and call them with ajax.load function. But last nigh I've realised I could just listen ajaxStart and Stop events. Well It may be normal way of life for you but it never came to my mind. Anyways, here is the code to listen start/stop events and show/hide loading animation with jQuery

$(document).ready(function () {
    $(document).ajaxStart(function () { showProgress() }).ajaxStop(function () { hideProgress() });
});
function showProgress() {
    $('body').append('<div id="progress"><img src="/assets/images/loading.gif" alt="" width="16" height="11" /> Loading...</div>');
    $('#progress').center();
}
function hideProgress() {
    $('#progress').remove();
}
jQuery.fn.center = function () {
    this.css("position", "absolute");
    this.css("top", ($(window).height() - this.height()) / 2 + $(window).scrollTop() + "px");
    this.css("left", ($(window).width() - this.width()) / 2 + $(window).scrollLeft() + "px");
    return this;
}

Tags: , , , ,

Useful

Permalink | Comments (1)

simple mobile ajax

by nolovelust 30. November 2010 18:57

When designing a modern mobile site your obvious choice for ajax enabled site is jQuery. Although latest mobile phones are quite capable of javascript and ajax; unfortunatelly jQuery or jQuery Mobile does not work on many of them yet. I'm not talking about iPhone or Android phones but non-smart phones or feature phones without advanced operating sytems. You need simpler version of ajax scripts.

After some tests on my site I came up with below ajax functions that usually works on javascript enabled phones

 

var ajaxRequest;
var loading;
loading = new Image();
loading.src = "pathtoyourloadinganimation.gif";

function checkXMLHttpRequest() {
    if (window.XMLHttpRequest) {
        ajaxRequest = new XMLHttpRequest();
        return true;
    }
    else try {
        ajaxRequest = new ActiveXObject('Msxml2.XMLHTTP');
        return true;
    } catch (e) {
        try {
            ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            return true;
        } catch (e) {
            ajaxRequest = false;
            return false;
        }
    }
}
function ajaxPost(mydiv, url, params) {
    if (checkXMLHttpRequest()) {
        ajaxRequest.open('POST', url, true);
        ajaxRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        ajaxRequest.setRequestHeader("Content-length", params.length);
        ajaxRequest.setRequestHeader("Connection", "close");
        ajaxRequest.onreadystatechange = function () {
            if (ajaxRequest.readyState == 4) {
                if (ajaxRequest.status == 200) {
                    document.getElementById(mydiv).innerHTML = ajaxRequest.responseText;
                }
                else {
                    document.getElementById(mydiv).innerHTML = 'Could not retrieve data';
                }
            }
            else {
                document.getElementById(mydiv).innerHTML = 'Loading...';

            }
        }
        ajaxRequest.send(params);
        return true;
    }
    else {
        return false;
    }
}

function ajaxGet(mydiv, url) {
    if (checkXMLHttpRequest()) {
        ajaxRequest.open('GET', url, true);
        ajaxRequest.setRequestHeader('Content-Type', 'text/html');
        ajaxRequest.onreadystatechange = function () {
            if (ajaxRequest.readyState == 4) {
                if (ajaxRequest.status == 200) {
                    document.getElementById(mydiv).innerHTML = ajaxRequest.responseText;
                }
                else {
                    document.getElementById(mydiv).innerHTML = 'Could not retrieve data';
                }
            }
            else {
                document.getElementById(mydiv).innerHTML = 'Loading...';

            }
        }
        ajaxRequest.send();
        return true;
    }
    else {
        return false;
    }
}

 

Ajax get sample

 

function getdemo(loadingdiv) {
    var url = '/get.aspx';
    if (!ajaxGet(loadingdiv, url)) {
        alert('Unable to load reviews!');
    }
}

 

Ajax post sample

 

function postdemo(param1, param2, loadingdiv) {
        var url = '/post.aspx';
        var params = 'param1=' + param1 + '&param2=' + param2;
        if (!ajaxPost(loadingdiv, url, params)) {
            alert('Unable to post your vote!');
        }
    }
}

 

Tags:

Mobile web | Useful

Permalink | Comments (0)

Mobile Ajax and Some Samsung phones

by nolovelust 30. September 2010 10:54

See my log below. It seems some Samsung mobile phones does not send user agent to the server when making an Ajax post request.

 

SAMSUNG-GT-S3100
normal request   GET /Assets/starr.png - - 149.254.217.248 HTTP/1.1 SAMSUNG-GT-S3100/S3100XXIK1+NetFront/3.5+Profile/MIDP-2.0+Configuration/CLDC-1.1 http://xxxxxxx.com 200 1015

ajax request     POST /AjaxCommentPost.aspx r=1182033581967.974 - 149.254.217.248 HTTP/1.1 - - 200 341



SAMSUNG-SGH-F480
normal request GET /securityimage.aspx - - 82.132.138.162 HTTP/1.1 SAMSUNG-SGH-F480/F480ADIA1+SHP/VPP/R5+NetFront/3.4+Qtv5.3+SMM-MMS/1.2.0+profile/MIDP-2.0+configuration/CLDC-1.1 http://xxxxxxx.com 200 1770
ajax request   POST /AjaxCommentPost.aspx r=1219635488243.6 - 82.132.138.162 HTTP/1.1 - - 200 341

Tags: , , ,

Mobile web

Permalink | Comments (0)

Add li in to first place of ul with jQuery Ajax

by nolovelust 29. April 2010 15:15

Here is the simple JavaScript code to alter DOM with jQuery and add Ajax request result to the first place in a ul.

First add latest JQuery  reference to your page and create Ajax response page. In my case it is live.ashx which outputs data like below

<li>li1</li>

<li>li 2</li>

Than create an ul in your page like below

<ul id="LiveTraffic"></ul>

Then add below JavaScript and you are good to go 

 

var lastdata = null;
    var liCount = 0;
    $(document).ready(function () {
        $.get('live.ashx?' + Math.random(), function (data) {

            if (lastdata != data) {
                $("#LiveTraffic").prepend(data).slideDown('slow');
                lastdata = data;
                liCount += 1;
               }
        })

        if (liCount > 10) {
            $('#LiveTraffic li:not(:first)').remove();
            liCount = 0;
        }
        setTimeout(arguments.callee, 10000);
    });

Tags: , , ,

Useful

Permalink | Comments (0)

Tag cloud

Month List