1. Building an App with Jquery and Ajax
Carolyn Schroeder, May 21, 2018

2. What is jQuery? jQuery is a JavaScript library
DOM element selections, traversal and manipulation are enabled by its selector engine
jQuery also provides a pattern for event handling that goes beyond basic DOM element selection and manipulation
What is jQuery?

3. jQuery Selectors #Selector Example Selects #id $("#lastname")
The element with id="lastname"
.class
$(".intro")
All elements with class="intro"
.class,.class
$(".intro,.demo")
All elements with the class "intro" or "demo"
element
$("p")
All <p> elements
el1,el2,el3
$("h1,div,p")
All <h1>, <div> and <p> elements
parent > child
$("div > p")
All <p> elements that are a direct child of a <div> element
jQuery Selectors

4. jQuery Traversing $("div").children();
var imageId = $(this).siblings("input.imageId:hidden").val();
var dTime = $(this).find('input[type="hidden"]').val();
jQuery Traversing

5. Each $('input.sel:checkbox:checked') .each(function() {
var row = $(this).parent().parent();
var hidden = row.find('input[type="hidden"]');
var publicationId = hidden.val();
publicationIds.push(publicationId);
});
Each

6. The ready event occurs when the DOM (document object model) has been loaded. Because this event occurs after the document is ready, it is a good place to have jQuery functions
$(function () { …
});
jQuery Ready

7. Jquery Events $("#btnSubmit") .click(function(e) { SendData(); });
$("#datepicker").change(function () {
SetDateTimes();
Jquery Events

8. An Ajax call is an asynchronous request initiated by the browser that does not directly result in a page transition.
Ajax Call

9. Client side call $.ajax({ dataType: "json", data: {
userid: $("#userId").val(),
imageid: imageId },
url: "/Gallery/AddLike",
success: function (data) {
window.location.href = "/Gallery/Index"; }
});
Client side call

10. Handling ajax Server Side
public JsonResult AddLike(string userId, Guid imageId) {
var userLike = new UserLike
Id = userId,
ImageId = imageId };
_context.UserLikes.Add(userLike);
_context.SaveChanges();
return Json(new { Message = string.Empty }, JsonRequestBehavior.AllowGet); }
Handling ajax Server Side

11. Resources PowerPoint slides are on http://schroederconsultingllc.com/
Project code QueryAjaxDemo
Resources