Connect With WRD
feed via e-mail
feed via e-mail

Posts Tagged ‘Ajax’

JavaScript frameworks simplify sending Ajax requests so much by wrapping all the stuff into a cross-browser function.

AjaxML, a jQuery plugin, simplifies it even more for basic Ajax requests and can also handle any complex ones.

It works by defining the "details of the requests" inside HTML attributes like <a href="say_hello.html" into="divName"> ends up in hello.html being loaded inside the #divName HTML element.

AjaxML

Attributes exists for sending parameters, request method (GET, POST), validation, history and more.

AjaxML has both pros and cons. Defining requests in HTML and not being able to view/organize them in a single JS file is a minus (this can be so hard to maintain in large projects) while the ability to send requests "not-like JavaScript but HTML" can be  huge "plus" for many (specially web designers who are not good at JavaScript)

APEAPE (Ajax Push Engine) is an open source solution which is designed to push real-time data with only JavaScript on the client side.

The core of APE is an epoll-driven HTTP server, entirely written in C, which provides patterns such as XHR long-polling (cross browser), forever frame and many more.

The other part of APE is the Javascript Framework based on MooTools which deals with the APE protocol. On the other hand, users can decide what Javascript framework they want to develop with.

Ajax Push Engine

APE only uses web standards, no plugins are needed to be installed on the browsers & it works with all browsers.

It is possible to create various multi-user applications with APE as it can broadcast to hundreds of users with ease.

With a module support (currently with C but PHP support is on the way) the application can be extended & customized more.

  • Tags:
  • Filed under: Extras, Tools
  • 4 Comments
  • After publishing ScheduledTweets yesterday, I received e-mails asking "how the drag'n drop & saving the new positions to the database was working".

    Drag'n drop generally looks hard-to-apply but it is definitely not by using JavaScript frameworks. Here is, how it is done by using jQuery & jQuery UI:

    jQuery Drag'n DropjQuery Drag'n Drop DemoDownload

    The Database:

    We create a simple database as below:

    jQuery Drag'n Drop Database

    The most important column in the database is recordListingID which shows us the order of the records.

    This feature can be applied to any table by adding such a column to it.

    The HTML:

    We'll be using an unordered list that is generated from a PHP query that lists the items according to the recordListingID value mentioned above.

    Here it is:

    <div id="contentLeft">
    	<ul>
    		<li id="recordsArray_&lt;?php echo $row['recordID']; ?&gt;">&nbsp;</li>
    	</ul>
    </div>
    <p>

     

    The JavaScript:

    We will be using jQuery UI's sortable plugin.

     <script type="text/javascript">
    $(document).ready(function(){ 
    
    	$(function() {
    		$("#contentLeft ul").sortable({ opacity: 0.6, cursor: 'move', update: function() {
    			var order = $(this).sortable("serialize") + '&action=updateRecordsListings';
    			$.post("updateDB.php", order, function(theResponse){
    				$("#contentRight").html(theResponse);
    			});
    		}
    		});
    	});
    
    });
    </script>

    We made the unordered list inside #contentLeft a sortable item, used the serialize function of jQuery to create the array and posted it to updateDB.php.

    The PHP:

    After posting the array of "new order of the items" to updateDB.php, we must run a query to update our database that will reflect the last positions of every item:

    <?php
    require("db.php");
    
    $action 				= mysql_real_escape_string($_POST['action']);
    $updateRecordsArray 	= $_POST['recordsArray'];
    
    if ($action == "updateRecordsListings"){
    
    	$listingCounter = 1;
    	foreach ($updateRecordsArray as $recordIDValue) {
    
    		$query = "UPDATE records SET recordListingID = " . $listingCounter . " WHERE recordID = " . $recordIDValue;
    		mysql_query($query) or die('Error, insert query failed');
    		$listingCounter = $listingCounter + 1;
    	}
    
    	echo '<pre>';
    	print_r($updateRecordsArray);
    	echo '</pre>';
    	echo 'If you refresh the page, you will see that records will stay just as you modified.';
    }
    ?>
    

    You can see that this is the easiest part. We handled the array as $updateRecordsArray and used it inside a for each statement.

    With a new variable named $listingCounter, while the for each statement runs, we have updated the values of recordListingID column of every item in the database with $listingCounter values. And that's it.

    This is a free Ajax newsletter script that is built with PHP & jQuery.

    With a very simple interface, it enables you to:

    • Create categories (lists)
    • Add e-mails to categories
    • Send e-mails to any category and/or e-mail
    • View the previously sent e-mails

    Free Ajax Newsletter Script

    It uses 1 PHP file & comes with a .SQL file for creating the necessary tables in MySQL.

    To mention, the script is only the admin interface. If needed, you can create a front-end for users who want to subscribe to a newsletter by inserting their e-mails to the related categories.

    BeautyTips is a jQuery plugin which draws tooltips in realtime using the canvas element.

    The tooltips are very flexible and can be triggered in various ways.

    jQuery Tooltips

    Every tooltip, by default is displayed at the side of an element where there is more space. But the position can also be forced.

    Content can be hard-coded, called from an attribute or with an Ajax request.

    The look & feel of the tooltips can be totally customized considering they are canvas elements.

    BeautyTips works in all major browsers, including iPhone (requires ExplorerCanvas for IE).

    JPolite is a lightweight portal framework, built with jQuery, for creating Netvibes-like interfaces.

    It is a powerful base for creating complex / customizable websites quickly.

    JPolite

    JPolite seperates content, appearance and behavior. And, it makes turning a content module into tabbed or accordion presentations very easy.

    Some examples of the ease it provides:

    • A form with class="ajaxform1 will automatically turned into an Ajaxed form.
    • Any link with class="thickbox" will be displayed in Thickbox & more.

    To check this interesting project, click here.

    NyroModal is a very flexible & customizable jQuery plugin for creating modal windows easily.

    It can display any type of HTML objects:

    • with Ajax requests
    • by showing a hidden DOM element
    • as a gallery
    • forms, iframes..

    jQuery Modal Windows: NyroModal

    Besides the features mentioned, you can target the content inside an Ajax request or a form, resize the modal window from an Ajax request & more.

    On every event, like showing or hiding the modal box, any animation can be defined too.

    The plugin is very well-documented & presents various examples.

  • Tags:
  • Filed under: Browsing, Goodies, MIT License
  • 0 Comments
  • Simpletip is a fresh & lightweight jQuery plugin for creating flexible tooltips.

    Tooltips can be attached to any element & easily styled in means of presentation & positioning.

    jQuery Simpletip Tooltip Plugin

    The tooltips can be static, dynamic or loaded via Ajax. And, any combination of effects can be applied to make them more attractive.

    Simpletip provides various options for max. customization. The plugin is well-documented & provides examples.

    Preloaders.net is a free web-based service for creating Ajax preloader images.

    It offers a wide-selection of preloaders. Besides the most popular images there are fresh ones, including 3D preloaders.

    Ajax Preloader

    You can mention:

    • background colors (transparent support)
    • foreground colors
    • sizes
    • speed of the animation

    for creating a customized Ajax preloader image.

    AJAX APIs Playground, a web-based application that runs on Google’s App. engine, enables you to learn & test APIs of Google products.

    APIs included are:

    • Visualization
    • Search
    • Language
    • Blogger Data
    • Maps
    • Earth
    • Feeds
    • Calendar Data

    AJAX APIs Playground

    All functions of the APIs have well-commented examples that you can modify & run.

    Besides playing with the codes, you can login with a Google account & save the code you created for future use.

  • Tags:
  • Filed under: Extras, Info, No License
  • 0 Comments
  • Uptime Robot
    feed-holder
    FeedBurner
    PSD2HTML.com