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!
Table of Contents (17 chapters)
PHP jQuery Cookbook
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Debugging JavaScript


Firebug can also be used to debug JavaScript in a browser. You can place breakpoints and debug the code line by line. In addition to it you can also watch variables and DOM elements changing in real time.

How to do it...

  1. To put breakpoints in your JavaScript code, open Firebug either by clicking the icon in the status bar or by pressing F12.

  2. Then click on the Script button in the Firebug toolbar. This will show a list of all the available scripts for that page.

  3. Select a script among these and that file will be displayed in the Firebug content panel.

  4. After a file has been selected you can put breakpoints on a line by clicking just before the line number. A breakpoint is indicated by a dark brown colour circle.

  5. Now you are ready for debugging. In the example seen in the next screenshot—the tic-tac-toe game—place a breakpoint on line 18. It will execute whenever a column of the game is clicked upon.

  6. Click on a column and you will see that the execution has halted on that line.

  7. Now you can watch the code execution line by line. To go to the next line press F10 on your keyboard. If you encounter a function, you can press F11 and control step into it.

  8. You can also watch variables. In the right panel there is a line called New Watch Expression. You can write a variable name or an expression here and Firebug will evaluate its value.

  9. Pressing F8 will continue the code execution till another breakpoint is encountered.

There's more...

Debugging in a nutshell

  • F8: Continue.

  • F10: Step Over. It takes control to next line.

  • F11: Step Into. If you press F11 on a line where a function is defined, control will go inside the defined function.

  • F12: Open or close Firebug on a web page.

Inspecting AJAX requests

The console of Firebug logs all the AJAX requests sent from the browser. It also shows the response code for each request. For each request, the parameters sent, request and response headers, and server response can be seen.

Web developer toolbar

The Web developer toolbar is another handy tool, through which you can control behaviour of various elements on the page. It also provides a large set of tools that operate on web pages.

You can disable or enable JavaScript, images, view page structure, form info, and so on. It can be obtained from https://addons.mozilla.org/firefox/addon/60.