• jQuery with AJAX in PHP

    The Artical jQuery with AJAX in PHP, We are learning how to work with the most famous JavaScript libraries and frameworks with capabilities of AJAX functionality.

    jQuery Framework

    jQuery is a development framework with AJAX that allows us to use JavaScript in HTML document. we will build a simple Menu Navigation using the basic jQuery features.

    Before we start, we need to include the latest jQuery library. We can download it from the download section at www.jquery.com. We will save it in our JavaScript folder named “js”, in the root of our PHP document, for example, “JQueryPractical01”.

    jQuery Website Download Image

    jQuery Website Download Image

    After downloading copy/paste both file in c:\wamp\www\JQueryPractical01\js folder.

    Adding jQuery Library Image

    Adding jQuery Library Image

    Download Source Code

    Now in “Index.php” file write down the following code.

    Index.php

    <!DOCTYPE html>

    <html>
    <head>
    <meta charset=”UTF-8″>
    <title>jQuery Practical-01</title>

    <script src=”js/jquery-1.11.3.min.js”></script>
    <script>
    $(document).ready(function(){
    $(‘#navigation li a’).each(function(){
    var $item = $(this);
    $item.bind(‘click’,function(event){
    event.preventDefault();
    var title = $item.html();
    var html = title + ‘ was selected.’;
    $(‘#placeHolder’).html(html);
    });
    });
    });
    </script>

    </head>
    <body>
    <ul id=”navigation”>
    <li id=”Home”><a href=”#”>Home</a></li>
    <li class=”active”><a href=”#”>jQuery Books</a></li>
    <li><a href=”#”>Shop</a></li>
    <li><a href=”#”>Blog</a></li>
    </ul>
    <div id=”placeHolder”>
    <!– Menu displays here… –>
    </div>
    </body>
    </html>

    The dollar sign $() represents as alias to the jQuery() factory function. In this function programmer can use all the CSS selectors like ID, class, or exact tag names. For Example,

    • $(‘a’): Selects all hyperlinks in our document
    • $(‘#myID’): Selects the element with this ID
    • $(‘.myID’): Selects all elements with this class

    In Above practical, I need to select all hyperlinks in the navigation <div> and defining their own functionality with an event handler for “click” events:

    $item.bind(‘click’,function(event){

    // prevent default functionality

    event.preventDefault();

    // here goes the rest

    });

    And the last part of above practical is creating the “title” VAR and HTML string, which goes to the placeholder:

    var title = $(this).html();

    var html = title + ‘ was selected.’;

    $(‘#placeHolder’).html(html);

    jQuery also covers all possible events (click, blur, focus, dblclick, and so on), visual effects (hide, show, toggle, fadeIn, fadeOut, and so on), or DOM manipulations (appendTo, prependTo, and so on). It has a full suite of AJAX capabilities, which are really easy to use.

    Appreciate my work :Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on PinterestShare on RedditShare on StumbleUponShare on TumblrDigg thisShare on YummlyShare on VKFlattr the authorBuffer this page

Leave a Reply

Your email address will not be published. Required fields are marked *