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

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?

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

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

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

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

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

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

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

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

Resources PowerPoint slides are on http://schroederconsultingllc.com/ Project code https://github.com/carolynlschroeder//j QueryAjaxDemo Resources