Advanced Ajax and Javascript: Using The Jquery Library
Advanced Ajax and Javascript: Using The Jquery Library
http://jquery.com
Get jQuery
http://jquery.com
http://docs.jquery.com
• API documentation
• Examples
• Tutorials
Using jQuery: in your web page
<head>
. . .
<script type="text/javascript"
src="jquery.js"></script>
. . .
</head>
Using jQuery: in your JS
$(document).ready(function(){
// Your code here . . .
});
• http://docs.jquery.com/Events
http://cloud.cs50.net/~jbolduc/jquery/button.html
Ajax
$.get(url, [data], [callback], [type]);
$.post(url, [data], [callback], [type]);
• url: the URL to access
• data: data to send, as key/value pairs or as query
string
• callback: function to call on success
– Parameters: data, textStatus = success
– $.get() and $.post() don’t support error
callbacks
• type: format of data
Ajax
• $.ajax(options);
– Lower-level access (error callbacks, HTTP
authentication, and more)
• …
• http://docs.jquery.com/Ajax
JSON
• JavaScript Object Notation
• Concise data-interchange format
• http://json.org
JSON
echo json_encode($data);
Output:
{"key":"value","key2":"value2"}
JSON and PHP
class Data
{
public $key;
public $key2;
}
echo json_encode($data);
$.getJSON()
$.getJSON(url, [data], [callback]);
$.getJSON(url, {'poll_id': poll_id},
poll_display);
• Equivalent to:
$.get(url, data, callback, "json");
Putting it all Together
http://cloud.cs50.net/~jbolduc/jquery/poll.{php,phps}
http://cloud.cs50.net/~jbolduc/jquery/poll.js
http://cloud.cs50.net/~jbolduc/jquery/pollhandler.{php,phps}
Compatibility
• What if the user has intentionally disabled
JavaScript? Or if the browser doesn’t support
it?
• We’d like to retain as much functionality as
possible, as transparently as possible
lynx http://cloud.cs50.net/~jbolduc/jquery/poll.php
http://cloud.cs50.net/~jbolduc/jquery/poll.{php,phps}
jQuery UI
• http://ui.jquery.com
• Separate library, designed to be used with jQuery
• Download: http://ui.jquery.com/download
– Build it with the features you want
• Docs: http://docs.jquery.com/UI
• Demos
– http://ui.jquery.com/demos
– http://dev.jquery.com/view/trunk/ui/demos/functional
(some slightly buggy)
jQuery UI
• Interactions
• Widgets
• Effects
Interactions
• Draggable
– $("#dragImage").draggable();
– $("#dragImage").draggable({
opacity: 0.40
});
http://dev.jquery.com/view/trunk/ui/demos/functional/#ui.draggable
Interactions
• Droppable
– $(".drop").droppable({
accept: ".block",
drop: function(ev, ui) {
$(this).append("Dropped! ");
}
});
http://dev.jquery.com/view/trunk/ui/demos/functional/#ui.droppable
More Interactions
• Resizable
• Selectable
• Sortable
Widgets
• Accordion
http://dev.jquery.com/view/trunk/ui/demos/functional/#ui.accordion
Widgets
• Dialog
• $("#dialog").dialog();
http://dev.jquery.com/view/trunk/ui/demos/functional/#ui.dialog
More Widgets
• Datepicker
• Progressbar
• Slider
• Tabs
Effects
• $("#id").effect(effect, options,
[speed], [callback]);
• Bounce
• Highlight
• Explode
• Fold
• Pulsate
• …
• http://docs.jquery.com/UI/Effects
Advanced Ajax and JavaScript