Rajeev Pentyala – Microsoft Power Platform

In this article, I am compiling the useful jQuery syntax’s which comes handy during your Dynmaics/ADX portal development or any other web development.

Prerequisite

• Add jQuery library to your web page using <script> tag.

• You can get the jQuery CDN here

Get Operations:

• Get HTML element by Id

$(“#HTMLelementId“)

• Get element by Class name

$(“.ClassName“)

• Get element by ‘partial’ Id name.
  • As an example, if you want to get a Checkbox control which has ID ‘myChkBox‘, you can either get the element using full id with $(“#myChkBox”) or use partial id $(“[id$=’ChkBox‘]”).

$(“[id$=’PartialId‘]”)

• Get Value

$(“#HTMLelementId“).val()

• Get selected drop down text

$(“#DropdownId option:selected”).text()

Set Operations:

• Set Text box

$(“#HTMLelementId“).val(“Hello World”);

• Set Checkbox

$(“#checkboxId“).prop(“checked”, true); //true is checked; false is unchecked.

Add or Remove CSS Class

• $(“#HTMLelementId“).addClass(“YourClassName“); // Add Class
• $(“#HTMLelementId“).removeClass(“YourClassName“); // Remove Class

Hide/Show Element

• Hide element

$(“#HTMLelementId“).hide();

• To hide Parent
  • This is useful to hide a control along with Label.

$(“#HTMLelementId“).parent().hide()

• Show element

$(“#HTMLelementId“).show();

Check if element exists on page

if ($(“#HTMLelementId“).length > 0){}

Iteration syntax

• Loop through all Radio boxes which set to False.

$(“input[id][type=’radio’][value=’0′]”).each(function () {
var radioBox = this;
});

Attach events to HTML elements

• To add ‘keypress’ event to Text box

$(“#HTMLelementId“).on(“keypress”, keyPressHandler);

function keyPressHandler(){
// Read the textbox value
var controlValue = this.val();
}

Remove event handler

• To remove ‘onChange’ event from a control use ‘unbind’ method.

$(“#dropDownID“).unbind(“change”);

Trigger event

• To trigger button ‘Click’ event

$(“#ButtonId“).click();

Remove option from Drop down:

• Below script, removes ‘Mango’ from the Drop down control.

jQuery(“#dropdownId option:contains(‘Mango’)”).remove();

Read Query String Parameter

• To read ‘country’ param value from current URL http://helloworld?country=India, call getParamValue(‘country’)
• Function will return false, if no matching param found.

function getParamValue(paramName) {
var results = new RegExp(‘[\?&]’ + paramName + ‘=([^&#]*)’)
.exec(window.location.search);

return (results !== null) ? results[1] || 0 : false;
}

Get/Set elements in IFrame

• To Get or Set the values of elements in IFrame, below is the syntax.

$(“#YourIframeID“).contents().find(‘#txtBoxId‘).val(); // Get the value

$(“#YourIframeID“).contents().find(‘#txtBoxId‘).val(“Hello World”); // Set the value

• To access IFrame with in another IFrame

$(“#Iframe1ID“).contents().find(“#Iframe2ID“).contents().find(‘#txtBoxId‘).val(“Hello World”);

Create a new element:

• Below is the snippet to create HTML button and add that next to an existing HTML element.

$(‘<input type=”button” id=”newBtn” class=”Your class name” value=”My New Button”/>’).insertAfter($(“#existingHTMLElementId“));
$(“#newBtn”).click(function () {

// Write your onclick script here
});

File Upload Control – Clear selected file:

• We cannot clear the selected file from ‘File Upload’ control, by using $(“#fileuploadcontrolID”).val(“”).
• We have to create a new element and replace the existing one.
• Below statement clones the existing element, with blank file name and replaces the existing element.

$(“#fileuploadcontrolID“).replaceWith($(“#fileuploadcontrolID“).val(”).clone(true));

🙂