Home > ADX, CRM > Web Development – Useful jQuery Syntax’s

Web Development – Useful jQuery Syntax’s

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));

🙂

  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: