Support Center

jQuery

Last Updated: Aug 30, 2017 03:38PM PDT

Build

jQuery Selectors


jQuery is a Javascript library can be used to manipulate a page of HTML. jQuery selectors allows you to identify elements in the HTML structure based on their characteristics such as id, class, type, attributes, or values of attributes. In certain circumstances, jQuery selectors as an alternative to the WalkMe Algorithm (Capture Mode) to identify elements to enhance precision, optimize performance, and grab specific values.
 

Article Contents

 

The Short Version

A jQuery selector can quickly find an element in the current window based on criteria we provide. They are most commonly used jQuery selectors are used in the WalkMe Editor to:
  • Create Onboarding Goals - Create Onboarding goals based on On Screen Element. Onboarding Goals are constantly checked and using jQuery will reduce strain on your site.
  • Add Strong Pin Launchers - Add the jQuery Selector into the Precision tab of a Launcher to optimize performance.
  • Grab Values - Grab a value from a user variable or a text on the screen to be incorporated into a dynamic announcement or use it in a rule
  • Check Page Conditions - Direct WalkMe to analyze the attributes of an element on screen to use as a Rule Type in the Rule Engine
  • Capture Difficult or Changing Elements - Select an element that may change its attributes such as its position on the website or the text it contains. Alternatively, use Precision to fine-tune the WalkMe algorithm
 

How It Works

Find the element in the HTML by right clicking on the element and selecting Inspect Element. The element will be highlighted on the screen and in the developer panel. Identify the element's unique characteristics (such as location, class, id, or style) in order to build your jQuery selector. Elements can be identified by their location or attributes (class, ID and style)
 
Step 1: Build the jQuery Selector
The basic syntax for using jQuery elements in WalkMe is: Element - Selector - Value. After identifying the element, build a jQuery Selector that will look at specifically what you are interested in. Here are some examples of jQuery Selectors:
  • ul element with id create-account: ul#create-account
  • ul elements with class nav: ul.nav
  • ul elements with class nav and class fl type: ul.nav.fl
See below for a list of useful jQuery Selectors.
 
Step 2: Test Your Selector in the Console
  1. Type wmjQuery(“”) in the command line in the developer panel with your jQuery selector between the “” and hit Enter
  2. If your query returns the desired value, your selector is working! To see the selected elements on the screen, click the "More…" link
  3. Hover over the returned objects to see the highlighted element
 
Step 3: Use jQuery Selectors in WalkMe
Depending on how you would like to use the jQuery element, jQuery can be used in WalkMe in the following locations:
  • Use the jQuery element to identify an element for a step or strong pin a Launcher in the Precision tab of the Options Menu
  • Use the jQuery element to trigger the next step in a Walk-Thru when clicked or hovered in the Additional Step Triggers Menu 
  • Use the jQuery element to grab a value on screen to use as Dynamic Text in the Rich Text Editor in a step balloon or ShoutOut
  • Use the jQuery element to build a Goal in the Goal tab
  • Use the jQuery Selector in the Rule Engine Rule Engine as a Rule Type (similar to jQuery is used similarly to On Screen Element Rule Type) Available Operators are:
    • True - Means that at least one element was found
    • False - Means that no elements were found
    • Visible - Means that the element is visible
    • Text Is / Is Not - Means text is equal to text input. When the selector returns more than one element, all elements' text are combined as one element.
    • Greater Than / Less Than - Means value is above or below a whole number
    • Like / Not Like - Means a complicated text syntax
    • Length Is / Is Not / Greater Than / Less Than - Means equal to, above or below a whole number. Used when to query how many elements the query returns. Discover exact query length in the console: wmjQuery(“element.value”).length
WalkMe supports up to jQuery 1.8.3. If a more recent version of jQuery is loaded on a webpage, conflicts may occur. Please contact support@walkme.com for further assistance.
 

Useful jQuery Selectors

Query Description
element Query an element
element[attribute] Query an attribute of an element
element[attribute][attribute] Query multiple attributes of an element
element[attribute="attribute value"] Query an attribute of an element and its value
element[attribute^="text"] Query text at the beginning of an attribute
element[attribute*="text"] Query text contained in an attribute
element[attribute!="text"] Query text excluded from an attribute 
element child-element Query the child of an element (space indicates that the first element is the parent of the second)
element:checked Query the status of a check box (checked or unchecked)
[element='']:mt_visible Query if an element is visible
element:contains(Text) Query is element contains text
element:eq(#) Query specific result in order (count starts from 0)

 

Try it Out

Try building Goals for your Walk-Thrus based on jQuery elements.
  1. Identify an element that will represent completion of a process (Main Goal) or stage in a process (Milestone Goal).
  2. Open the Console and identify the element Build a Goal based on the jQuery element.
  3. Preview your work and check for Goal completion in the Flow Tracker

 

Related Resources

Contact Us

  • Email Us
  • FAQ
  • Call Us

    Toll Free (US Number) 1-855-4-WalkMe (1-855-492-5563)
http://assets2.desk.com/
false
desk
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
false
Invalid characters found
/customer/en/portal/articles/autocomplete