{"id":1452,"date":"2010-07-06T03:45:33","date_gmt":"2010-07-06T08:45:33","guid":{"rendered":"http:\/\/www.mrc-productivity.com\/docs\/?page_id=1452"},"modified":"2025-03-11T12:11:27","modified_gmt":"2025-03-11T17:11:27","slug":"using-ajax-helpers","status":"publish","type":"ht_kb","link":"https:\/\/www.mrc-productivity.com\/docs\/knowledge-base\/using-ajax-helpers","title":{"rendered":"AJAX Input Helpers"},"content":{"rendered":"\n<p class=\"wp-block-ht-blocks-messages wp-block-hb-message wp-block-hb-message--withicon is-style-info\">Click <a href=\"https:\/\/www.mrc-productivity.com\/legacy\/m-painter-app-prop\/using-ajax-helpers\">here<\/a> to access legacy documentation for this feature<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"overview\">Overview<\/h2>\n\n\n\n<p>AJAX (<strong>A<\/strong>synchronous <strong>J<\/strong>avaScript <strong>A<\/strong>nd <strong>X<\/strong>ML) is often used for interacting with a data server through a browser page without needing to refresh.<\/p>\n\n\n\n<p>You have already seen AJAX in use with Multiple Row Data List Retrievals. As you enter text into a Selections input box, the page begins to suggest valid data for you! With AJAX m-Painter helpers, you can add similar functionality into all of your web applications.<\/p>\n\n\n\n<p>In m-Painter once you select an input, the Element Panel will open with an option for &#8220;Ajax Input Helpers&#8221;.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/docs\/vue-images\/ajaxInputHelperDropdown.jpg\" alt=\"\"\/><\/figure>\n\n\n\n<p>Each AJAX Helper feature will be discussed below:<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"ajax-suggest\">Type-ahead Suggest<\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"AJAX Type Ahead Suggest\" width=\"643\" height=\"362\" src=\"https:\/\/www.youtube.com\/embed\/nL3dy89f8Mc?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>Type-ahead Suggest (formerly called AJAX Suggest) can be implemented on any input text box. When configured, as your end-user begins typing, the server will return a list of valid values. Users can either continue typing, or select a value from the list. Behind-the-scenes, the logic is passing the values entered in by your end-user and comparing that text to the value of a pre-existing field in a pre-existing model\/application.<\/p>\n\n\n\n<p class=\"wp-block-ht-blocks-messages wp-block-hb-message wp-block-hb-message--withicon is-style-alert\">For this function to work, you must first build a <a href=\"https:\/\/www.mrc-productivity.com\/docs\/knowledge-base\/m-power-data-models\" target=\"_blank\" rel=\"noreferrer noopener\">Data Model<\/a> or a Multiple Row Data List Retrieval application to use as your AJAX querying list.<\/p>\n\n\n\n<p>When you first select the Type-ahead Suggest option, a modal will open prompting you to select your datasource. This will be either a Data Model or an m-Power Application.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"\/docs\/vue-images\/ajaxDatasource.jpg\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" src=\"\/docs\/vue-images\/ajaxDatasource.jpg\" alt=\"\"\/><\/a><\/figure>\n\n\n\n<p>Next, select the pre-existing model\/application to query the dataset.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"\/docs\/vue-images\/ajaxModelSelect.jpg\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" src=\"\/docs\/vue-images\/ajaxModelSelect.jpg\" alt=\"\"\/><\/a><\/figure>\n\n\n\n<p>Once the model\/application is selected, you can include any additional URL parameters in order to filter the dataset as needed.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"\/docs\/vue-images\/ajaxAddParms.jpg\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" src=\"\/docs\/vue-images\/ajaxAddParms.jpg\" alt=\"\"\/><\/a><\/figure>\n\n\n\n<p>Finally, select the field from the model\/application you want used as the &#8220;Suggest&#8221; field. <\/p>\n\n\n\n<p>Click &#8220;SAVE&#8221;.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"\/docs\/vue-images\/ajaxNameLookup.jpg\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" src=\"\/docs\/vue-images\/ajaxNameLookup.jpg\" alt=\"\"\/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-ht-blocks-messages wp-block-hb-message wp-block-hb-message--withicon is-style-info\">Only applications\/models from the current Data Dictionary will appear in this list. If you wish to use applications from other Data Dictionaries, use the available dropdown to &#8220;Select a dictionary&#8221;.<\/p>\n\n\n\n<p>At runtime, a list will appear with matching values as to what the end user is typing in the input.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"\/docs\/vue-images\/ajaxSuggestRuntime.jpg\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" src=\"\/docs\/vue-images\/ajaxSuggestRuntime.jpg\" alt=\"\"\/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"ajax-cascading-dropdown-list\">Ajax Cascading Dropdown List<\/h2>\n\n\n\n<p>One of the most popular and useful features in m-Power reports is the ability to create cascading dropdown lists. These dropdowns are designed so that the selection in one dropdown list dynamically influences the options available in subsequent lists. This functionality, powered by AJAX, is available across m-Power all reports and various maintainer templates.<\/p>\n\n\n\n<p>Implementing cascading dropdown lists not only enhances user experience by providing relevant options but also helps streamline data entry by making it context-sensitive.<\/p>\n\n\n\n<p>To add a cascading dropdown to your form, simply follow a few straightforward steps: start by selecting the initial dropdown, then configure subsequent fields to depend on it. Below, we\u2019ll guide you through the process of setting up cascading dropdown lists, from selecting your data source to linking the dependent fields.<\/p>\n\n\n\n<p class=\"wp-block-ht-blocks-messages wp-block-hb-message wp-block-hb-message--withicon is-style-info\">In addition to reports, the following maintainer templates support this feature: <br><br>-Data List with Web Form<br>-Single Row Web Form<br>-Calendar<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Example Walkthrough<\/h3>\n\n\n\n<p>Below is Regular Report, with several runtime value prompt filters.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>State (R001)<\/li>\n\n\n\n<li>County (R002)<\/li>\n\n\n\n<li>City (R003)<\/li>\n<\/ul>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69e1629991c5f&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69e1629991c5f\" class=\"wp-block-image size-large wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"\/docs\/vue-images\/ajaxCascadeReportPrompt.png\" alt=\"\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<p>The following is needed: A selection of State (R001) filters the list of counties (R002). Then, a selection of County (R002) will filter the list of cities (R003). To accomplish this setup, the filters will be configured as such:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>State (R001) will be configured as a standard option list.<\/li>\n\n\n\n<li>County (R002) will be configured as a cascading list.<\/li>\n\n\n\n<li>City (R003) will be configured as a cascading list. <\/li>\n<\/ul>\n\n\n\n<p>After the first dropdown has been added to State (R001), select the next filter&#8217;s input box. From the Element Panel, select the &#8220;Ajax Input Helpers&#8221; -&gt; &#8220;Cascading Dropdown&#8221;.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69e1629991f00&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69e1629991f00\" class=\"wp-block-image size-large wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"\/docs\/vue-images\/ajaxCascadeReportmPainter2.png\" alt=\"\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<p>A modal will open prompting you to select your datasource. This will be either a<strong> <a href=\"\/docs\/knowledge-base\/m-power-data-models\" data-type=\"ht_kb\" data-id=\"13738\" target=\"_blank\" rel=\"noreferrer noopener\">Data Model<\/a><\/strong> or an m-Power Application (a <a href=\"\/docs\/knowledge-base\/option-list-template\" data-type=\"ht_kb\" data-id=\"6713\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Web 2.0 Option List retrieval<\/strong><\/a>).<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69e16299920b2&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69e16299920b2\" class=\"wp-block-image size-large wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"\/docs\/vue-images\/ajaxCascadeDatasource.jpg\" alt=\"\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<p>Next, select the pre-existing model\/application to query the dataset.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69e1629992266&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69e1629992266\" class=\"wp-block-image size-large wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"\/docs\/vue-images\/ajaxModelSelect.jpg\" alt=\"\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<p>Once the model\/application is selected, you can include any additional URL parameters in order to filter the dataset as needed (typically, a developer will not need to include any additional parameters here).<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69e1629992406&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69e1629992406\" class=\"wp-block-image size-large wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"\/docs\/vue-images\/ajaxCascadeAddParms.jpg\" alt=\"\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<p>The last step is to set the &#8220;Cascading Drop-Down List Options&#8221;, where the necessary dependencies are mapped.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"\/docs\/vue-images\/ajaxCascadeDependent.jpg\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" src=\"\/docs\/vue-images\/ajaxCascadeDependent.jpg\" alt=\"\"\/><\/a><\/figure>\n\n\n\n<p>The following options are described in depth:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Field from selected application<\/strong><em> <\/em>(Left dropdown) &#8211; Shows fields from the data model or option list retrieval application.<\/li>\n\n\n\n<li><strong>Field from current application?<\/strong> (Right dropdown) &#8211; Shows fields from the current application; in this case a report.<\/li>\n\n\n\n<li><strong>Required?<\/strong> \n<ul class=\"wp-block-list\">\n<li>If set to &#8220;Required&#8221; &#8211; The mapped dependency <span style=\"text-decoration: underline;\"><strong>must<\/strong><\/span> be selected before the end-user can select a value for this cascading dropdown.<\/li>\n\n\n\n<li>If set to &#8220;Not Required&#8221; &#8211; The end-user can immediately select from this cascaded dropdown without having to make a selection from the mapped dependency.   <\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Add another dependency <\/strong>&#8211; click to specify another dependency that will filter the cascaded dropdown. <\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/docs\/vue-images\/ajaxCascadeDependentExpanded.jpg\" alt=\"\"\/><\/figure>\n\n\n\n<p>In this case a selection of a state from the previous dropdown needs to be passed to generate the appropriate list of counties. So that means the state field from the Web 2.0 Option List retrieval is mapped to its corresponding state filter in the report, R001. <\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69e16299927b0&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69e16299927b0\" class=\"wp-block-image size-large wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"\/docs\/vue-images\/ajaxCascadeDependencyMapped.jpg\" alt=\"\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<p class=\"wp-block-ht-blocks-messages wp-block-hb-message wp-block-hb-message--withicon is-style-info\"><strong>Tip: <\/strong>Often the above dropdowns will have the same field name selected.<\/p>\n\n\n\n<p>Once finish, press Apply.<\/p>\n\n\n\n<p>To showcase a cascaded dropdown with <strong>multiple dependencies<\/strong>, another cascaded dropdown will be inserted on the City filter (R003). The city filter will have two dependencies mapped, which looks like this:<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69e1629992b66&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69e1629992b66\" class=\"wp-block-image size-large wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"\/docs\/vue-images\/ajaxCascadeDependencyMultiple.jpg\" alt=\"\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<p>Both are set to &#8216;Required&#8217;, indicating a state AND county value must both be selected before a list of cities can be seen. <\/p>\n\n\n\n<p>Note that if wanting the list of cities to be immediately accessible with the selection of either the state OR county value, a developer can select the <em>One dependency must be selected at runtime<\/em> button.<\/p>\n\n\n\n<p>Click &#8220;Apply&#8221; once finished. <\/p>\n\n\n\n<p class=\"wp-block-ht-blocks-messages wp-block-hb-message wp-block-hb-message--withicon\">While this example shows only three levels, there is no physical limit to how many additional cascaded dropdowns or mapped dependencies can be assigned to a single cascaded dropdown. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Finished Example<\/h3>\n\n\n\n<p>At runtime, the county cascaded dropdown is not selectable until the first dropdown has been selected.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/docs\/vue-images\/ajaxCascadeRuntime1.jpg\" alt=\"\"\/><\/figure>\n\n\n\n<p>Once a state is selected, a county may be selected.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/docs\/vue-images\/ajaxCascadeRuntime2.jpg\" alt=\"\"\/><\/figure>\n\n\n\n<p>After which, the city list is filtered by the selection of the state and county:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/docs\/vue-images\/ajaxCascadeRuntime3.jpg\" alt=\"\"\/><\/figure>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\" id=\"return-data\"><a class=\"anchor\" name=\"Return\"><\/a>AJAX Return Data to Input<\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"AJAX Return Data to Input\" width=\"643\" height=\"362\" src=\"https:\/\/www.youtube.com\/embed\/xQ_nF_JlCLU?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>The AJAX Return Data feature will populate one or more inputs in a maintainer based on one key field.<\/p>\n\n\n\n<p>To implement, select the input box or dropdown where you would like to add your Ajax helper. From the Element Panel, select the &#8220;Ajax Input Helpers&#8221; -&gt; &#8220;Return Data to Input&#8221;.<\/p>\n\n\n\n<p class=\"wp-block-ht-blocks-messages wp-block-hb-message wp-block-hb-message--withicon is-style-info\">If you are attempting to add an AJAX Return Data Dropdown, don&#8217;t forget to first create a dropdown list via m-Painter, then implement the AJAX Return Data feature on the dropdown. <\/p>\n\n\n\n<p>A modal will open prompting you to select your datasource. This will be either a Data Model or an m-Power Application.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"\/docs\/vue-images\/ajaxReturnDatasource.jpg\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" src=\"\/docs\/vue-images\/ajaxReturnDatasource.jpg\" alt=\"\"\/><\/a><\/figure>\n\n\n\n<p>Next, select the pre-existing model\/application to query the dataset.<\/p>\n\n\n\n<p class=\"wp-block-ht-blocks-messages wp-block-hb-message wp-block-hb-message--withicon is-style-info\">Only applications\/models from the current Data Dictionary will appear in this list. If you wish to use applications from other Data Dictionaries, use the available dropdown to &#8220;Select a dictionary&#8221;.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"\/docs\/vue-images\/ajaxReturnAppSelect.jpg\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" src=\"\/docs\/vue-images\/ajaxReturnAppSelect.jpg\" alt=\"\"\/><\/a><\/figure>\n\n\n\n<p>Once the model\/application is selected, you can include any additional URL parameters in order to filter the dataset as needed.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"\/docs\/vue-images\/ajaxAddParms.jpg\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" src=\"\/docs\/vue-images\/ajaxReturnAddParms.jpg\" alt=\"\"\/><\/a><\/figure>\n\n\n\n<p>Next, use the &#8220;Field name to Look up&#8221; to choose the field you want used as the key field for your return data from your pre-defined app\/model.<\/p>\n\n\n\n<p class=\"wp-block-ht-blocks-messages wp-block-hb-message wp-block-hb-message--withicon is-style-info\">All returned data will be returned based on this first field. If multiple records are found for this key, the first record is the one that will be returned.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"\/docs\/vue-images\/ajaxReturnMapping.jpg\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" src=\"\/docs\/vue-images\/ajaxReturnMapping.jpg\" alt=\"\"\/><\/a><\/figure>\n\n\n\n<p>Map all fields that you wish to be returned by selecting the &#8220;Current App fields&#8221; on the left and the &#8220;Fields from selected app&#8221; on the right. Repeat as needed to fully map each field. <\/p>\n\n\n\n<p>Click &#8220;Save&#8221;.<\/p>\n\n\n\n<p>In the example screenshot below, after the Zip Code is entered and the user moves their focus away from the field (either by using tab, clicking on a different input, or selecting the value if using a dropdown), AJAX will go out to the inquiry, pull the relevant data, and return it to the inputs based on the field mappings made in the last step (City, State, Country).<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"\/docs\/vue-images\/ajaxReturnRuntime.jpg\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" src=\"\/docs\/vue-images\/ajaxReturnRuntime.jpg\" alt=\"\"\/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"remove-helper\"><a class=\"anchor\" name=\"RH\"><\/a>Remove Helper<\/h2>\n<\/div><\/div>\n\n\n\n<p>In the event that you create an AJAX Helper but later decide you want to revert back to a standard Input box, use this option to remove any AJAX Helper.<\/p>\n\n\n\n<p>To remove helpers, select the input box you wish to revert. From the blue context menu, select the &#8220;Quick Edit&#8221; option.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/docs\/vue-images\/ajaxRemove.jpg\" alt=\"\"\/><\/figure>\n\n\n\n<p>Select &#8220;Remove Ajax Feature&#8221; from the Configure Ajax Feature modal. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"\/docs\/vue-images\/ajaxRemove2.jpg\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" src=\"\/docs\/vue-images\/ajaxRemove2.jpg\" alt=\"\"\/><\/a><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Overview AJAX (Asynchronous JavaScript And XML) is often used for interacting with a data server through a browser page without needing to refresh. You have already seen AJAX in use with Multiple Row Data List Retrievals. As you enter text into a Selections input box, the page begins to suggest&#8230;<\/p>\n","protected":false},"author":1,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"footnotes":""},"ht-kb-category":[255],"ht-kb-tag":[],"class_list":["post-1452","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-mpainter"],"_links":{"self":[{"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb\/1452","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/comments?post=1452"}],"version-history":[{"count":57,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb\/1452\/revisions"}],"predecessor-version":[{"id":14563,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb\/1452\/revisions\/14563"}],"wp:attachment":[{"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/media?parent=1452"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb-category?post=1452"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb-tag?post=1452"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}