JQuery Code often required in Portal Development.


When we start development/customization of our PowerApps portal, we need to have a basic idea of HTML, CSS and JQuery to do the customization on client side.
So here in this blog I have added the most often used JQuery codes which will help you to speed up your development.

//All our JQuery code should be added once our main page loads
//So below line of code waits for the page to load and then trigger
//your line of  code as on-load

$(document).ready(function () {
//all your jquery code
})

In JQuery we have lot of ways of retrieving the element on which you want to perform the operation like retrieving the element value, setting a value to a element, show, hide, and other.
So to perform all these operations we first need to have the elements, I have added few of the basic ways of doing that.

//Fetch the element using element ID
$("#Element_ID")

//Fetch the element using class name
$(".Class_Name")

//Fetch the element using element type(like div,input,button,a,p,etc)
$("Element")

//Fetch the element using element ID and class name
$('#Element_ID .Class_Name')

//Fetch the element using class name and class name (here the element will have two classes)
$('.Class_Name.Class_Name')

//Fetch the element using class name and class name(here the first class name will be of parent element 
//and the second class name will be of the element to retrieve)
$('.Class_Name .Class_Name')

//Fetch the element using direct child method
$("#Element_ID>Element>Element")


Once you have the element you can perform multiple other operations on it
I’m adding all the operation you can perform and all these will be helpful for you during your Portal development.

//Get and Set value of an element
$("#Element_ID").val()
$("#Element_ID").val('1')

//Show, Hide, Remove(Delete) an element
$('#Element_ID').show();
$('#Element_ID').hide();
$('.Class_Name').remove();

Add HTML contact to an Element.
$("Element").html("Hello Sanket!");


//Get value of a element on a Parent page from a Child Page(Pop-Up, Model, Iframe)
//Code should be on child element
$("#Model_Element_ID").val($("#Element_ID", window.parent.document).val());
$("#Model_Element_ID")[0].checked = $("#Element_ID", window.parent.document)[0].checked;


//Check if the elements are Visible, Hidden or Disabled, will return true or False
$("#Element_ID").is(":visible");
$("#Element_ID").is(":disabled");
$("#Element_ID").is(":hidden");

//The :selector can also be used to fetch an element
$( "div:hidden" ).show()

//Get the parent element of a child element using Closest.
$("Element[Attribute_Name='Attribute_Value']").closest('.Class_Name').hide()

//Get the direct child element of a parent element using Children
$(.Class_Name).closest('Element').children('.Class_Name');

//Get the collection of child elements and its length 
$(.Class_Name).closest('Element').children().length 

//Get the collection of child elements using find 
$("Element .Class_Name").find(".Class_Name")



//Use .css to add an inline style property to an element
$('#Element_ID').css('color', '#CD163F')

//Use .attr to add an attribute to an element
$("#Element_ID").attr("href", attriburValue)

//Use .attr to fetch an attribute value of an element
$("#Element_ID").attr('id'); //get the value of attribute Id

//Use .addClass to add a class to an element
$('#Element_ID').closest('Element').addClass('required')

//Use .removeClass to remove a class from an element
$(.Class_Name).removeClass("col-md-8");


//Use after, before, append, prepend, appendTo to add new elements or an html to an elements

//To Add after the main element, here in the example the div will be added after the primary button
$('.btn.btn-primary.btn-line').after('<div class="col-md-12"><p>To show a comment after the element<p></div>')

//To Add before the main element, here in this example the div will be added before the element.
$(.Class_Name).before('<div class="col-md-12"><p>To show a comment before the element<p></div>')

//To Add inside the main element, here in this example the div will be added inside the element but will appear before the element.
$(.Class_Name).prepend('<div class="col-md-12"><p>To show a comment before the element<p></div>')

//To Add inside the main element, here in this example the div will be added inside the element but will appear after the element.
$(.Class_Name).append('<div class="col-md-12"><p>To show a comment before the element<p></div>')

//To move an element from one place to another
var elementname= $(.Class_Name);
$(#Element_ID).appendTo(elementname)


//To click an element using Jquery/code  automatically
$("#Element_ID").click();

//To capture a click event of an element an do some operation on it.
$("#Element_ID").click(function (index) {
        var id = $(this).attr('id');
});

//To capture a change event of an element(optionset) an do some operation on it.
$('#Element_ID').on("change", function (index) {
 var val= $(this).val();
});

//To capture a onload event of an subgrid an do some operation once the data loads in subgrid/table
  $('#notescontrol .entity-notes .notes').on("loaded", function () {
                if ($(".entity-notes .notes").children().length > 0) {
                    $(".addnote.btn.btn-default").hide();
                }
            });



These the are first few basic JQuery you need to have to start developing a custom portal page or customizing an OOB page.
I will be updating this sheet with new line of code, so do follow to the page.