jQuery - Custom Attributes

Often you will need to update UI elements without wanting to make database calls back to the server each time. You can do this using custom data elements.  These typically are prefixed with "data-" and are custom html attributes. You can then use JQuery to pick these values out and update a page element. 

Remember: We are using the CSS Selector syntax to select elements with a custom attribute known as data-action=selectMovie instead selecting by an ID.

    $('a[data-action=selectCity]').click(function (e)
    {
        e.preventDefault();

        //grab the meta data
        let cityName = $(this).attr('data-name');
        let cityId = $(this).attr('data-cityid');
        let createdOn = $(this).attr('data-createdon');

        $('#city-label').html(cityName);
        $('#id-label').html(cityId);
        $('#created-label').html(createdOn);
    });