Book Image

PHP jQuery Cookbook

By : Vijay Joshi
Book Image

PHP jQuery Cookbook

By: Vijay Joshi

Overview of this book

As web technology evolves, the gap between desktop applications and web applications continues to vanish. And what better way to bridge that gap, for your own website, than using the best two open source technologies in the market: PHP and jQuery. The power-combo of these two is leading the way in revolutionizing the RIA world. Although they are easy to integrate, finding or figuring out how to do what you want to do is rather arduous.The PHP jQuery Cookbook will be your handy guide with walkthroughs of common integration tasks and problems that will help you master the possibilities available using the PHP and jQuery combo. You will learn quick solutions to necessary tasks to integrate the power of two of the best known and most widely used web technologies of today – PHP on the server side and jQuery on the client side. Glide through the basics and move to advanced topics to create dynamic and interactive web applications with this book in hand.This book covers a wide array of technical aspects of creating an interactive website. Apart from basics of PHP and jQuery, you will go through advanced topics like creating plugins, validating controls, and useful utilities that you will be able to use as stand-alone tools. AJAX, the key technique of browser-server communication is covered in detail. You will also learn to use JSON, which is becoming preferred as a mode of data interchange over XML, both in web applications and web services.The book also covers database interaction, which is an important part of any dynamic web application. You will also gain expertise in debugging JavaScript with the help of useful tools that will save you hours of tedious manual debugging.Most importantly, by using jQuery and PHP together, you will be able to develop applications that are compatible with all major browsers, with no need to write code targeted at specific browsers!

Related Content you might be interested in

Current Title:

Small book image
PHP jQuery Cookbook
Vijay Joshi
Dec, 2010 | 332 pages
No titles found
Table of Contents (17 chapters)
PHP jQuery Cookbook
PHP jQuery Cookbook
Credits
Credits
About the Author
About the Author
About the Reviewers
About the Reviewers
www.PacktPub.com
www.PacktPub.com
Preface
Preface
Free Chapter
1
Handling Events with jQuery
Handling Events with jQuery
Introduction
Executing functions when page has loaded
Binding and unbinding elements
Adding events to elements that will be created later
Submitting a form with jQuery
Checking for missing images
Creating the select/unselect all checkboxes functionality
Capturing mouse events
Creating keyboard shortcuts
Displaying user selected text
Dragging elements on a page
2
Combining PHP and jQuery
Combining PHP and jQuery
Introduction
Fetching data from PHP using jQuery
Creating a query string automatically for all form elements
Detecting an AJAX request in PHP
Sending data to PHP
Aborting AJAX requests
Creating an empty page and loading it in parts
Handling errors in AJAX requests
Preventing browser from caching AJAX requests
Loading JavaScript on demand to reduce page load time
3
Working with XML Documents
Working with XML Documents
Introduction
Loading XML from files and strings using SimpleXML
Accessing elements and attributes using SimpleXML
Searching elements using XPath
Reading an XML using DOM extension
Creating an XML using DOM extension
Modifying an XML using DOM extension
Parsing XML with jQuery
4
Working with JSON
Working with JSON
Introduction
Creating JSON in PHP
Reading JSON in PHP
Catching JSON parsing errors
Accessing data from a JSON in jQuery
5
Working with Forms
Working with Forms
Introduction
Adding input fields dynamically in a form
Searching for user-inputted string in a page
Checking for empty fields using jQuery
Validating numbers using jQuery
Validating e-mail and website addresses using regular expressions
Displaying errors as user types: Performing live validation
Strengthening validation: validating again in PHP
Creating a voting system
Allowing HTML inside text areas and limiting HTML tags that can be used
6
Adding Visual Effects to Forms
Adding Visual Effects to Forms
Introduction
Creating a Tic-Tac-Toe game with effects
Informing a user while an AJAX request is in progress
Creating expandable and collapsible boxes (accordion)
Fading an element after updating it
Floating box on demand
Updating items in a shopping cart
7
Creating Cool Navigation Menus
Creating Cool Navigation Menus
Introduction
Creating a basic drop-down menu
Creating a menu that changes background on mouse-over
Creating an accordion style menu
Creating a floating menu
Creating an interface for tabbed navigation
Adding more tabs
Creating a wizard using tabs
8
Data Binding with PHP and jQuery
Data Binding with PHP and jQuery
Introduction
Fetching data from a database and displaying it in a table format
Collecting data from a form and saving to a database
Filling chained combo boxes that depend upon each other
Checking username availability from database
Paginating data for large record sets
Adding auto-suggest functionality to a textbox
Creating a tag cloud
9
Enhancing your Site with PHP and jQuery
Enhancing your Site with PHP and jQuery
Introduction
Sending cross-domain requests using server proxy
Making cross-domain requests with jQuery
Creating an endless scrolling page
Creating a jQuery plugin
Displaying RSS feeds with jQuery and PHP
Firebug
Firebug
Introduction
Inspecting elements
Editing HTML and CSS
Debugging JavaScript
Index
Index

Capturing mouse events

jQuery can be used to determine the position of the mouse pointer on screen. This recipe explains the technique for getting the mouse pointer position on screen. You will learn how to create a tooltip that will appear at current mouse pointer position on a particular element.

Getting ready

Keep the jQuery file ready to use with this recipe.

How to do it...

  1. Open a new file in your text editor and save it in chapter1 directory as mouse.html.

  2. Create a DIV with the ID tip and display set to none. This DIV will be displayed as tooltip. Create three more DIV elements and assign class hoverMe to the first and the last DIV. Write CSS styles for the DIV elements. The DIV that will be displayed as the tooltip must have position set to absolute.

    <html>
  <head>
    <title>Mouse Movements</title>
    <style type="text/css">
      div
      {
        border:1px solid black;
        float:left;
        width:200px;
        height:200px;
        margin:10px;
        font-family:verdana,arial;
        font-size:14px;
      }

      div#tip 
      { 
        position:absolute;
        width:100px;
        height:auto;
      }
    </style>
  </head>
  <body>
  
    <div id="tip" style="display:none;">YaY! I am a tooltip</div>
    
    <div class="hoverMe">Hover me for a tooltip.</div>
    <div>This div will not display a tooltip</div>
    <div class="hoverMe">Hover me for a tooltip.</div>

  </body>
</html>

  3. Write the jQuery code that will display the tooltip when hovering over the DIV with class hoverMe. Two functions will be required for this. The first one will take care of showing and hiding the tooltip on hover with fade effect. The second function will actually set the position of tooltip and will move it as the mouse pointer moves.

    <script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
  $(document).ready(function ()
  {
    $('.hoverMe').hover(
    function()
    {
      $('#tip').fadeIn('slow');
    },
    function()
    {
      $('#tip').fadeOut('slow');
    });
    
    $('.hoverMe').mousemove(function(e)
    {
      var topPosition = e.pageY+5;
      var leftPosition = e.pageX+5;
      $('#tip').css(
      {
        'top' :  topPosition+ 'px',
        'left' : leftPosition +'px'
      });
    });
  });
</script>

  4. Open your browser and run the mouse.html file. Hovering over the first and last DIV elements will display a tooltip with fade effect. The tooltip will also follow the mouse pointer as it moves.

How it works...

We have used the hover() method on the DIV elements to show and hide the tooltip. This method attaches two event handlers to the specified element. The first event handler gets executed when the mouse pointer enters the element and the second one executes when the mouse pointer leaves that element. We have used the fadeIn() method to display the tooltip when a mouse pointer enters a DIV and the fadeout() method to hide the DIV as soon as the mouse pointer leaves it.

The most important thing now is to position the tooltip where the mouse pointer is. For this we attached an event handler mousemove on the DIV. As the name indicates, the handler function will execute when the mouse pointer is moving over the DIV. jQuery makes an event object available to the handler function, using which we can get the current mouse pointer position. The pageX property of the event gives us the cursor position relative to the left corner of the document. Similarly, the pageY property gets the mouse pointer position relative to the top of the window.

We have the mouse pointer coordinates with us now. We then assign the value of pageX and pageY to the CSS properties left and top of the tooltip DIV respectively.The value 5 has been added to each value to avoid the cursor from hiding part of the tooltip.

Previous Section
End of Section 9
Next Section