I am currently utilizing the auto-complete feature from
The issue I am facing is that when I type "Ball", the auto-complete suggests "Balloon". Even though both "Balloon" and "Balloon" appear in the text field and the list, when I click elsewhere on the screen, it only displays "Balloon" in the text field. Strangely, when I submit the form, it reads "Ball" from the text field. Can someone explain why this is happening and provide a solution?
Best regards, Rhodarus
It is highly recommended to avoid using Struts Ajax tags moving forward, as there are valid reasons for this change:
The Dojo plugin is now deprecated
Starting from Struts 2.1, the usage of the Dojo plugin will be deprecated.
If you are beginning now, consider utilizing raw Dojo (currently at version 1.10) instead of the outdated 0.4.x version bundled with Struts2. Alternatively, migrating to jQuery, particularly with the assistance of Struts2-jQuery-plugin, may prove to be a smoother transition.
An example of the Autocompleter functionality can be found under the Widgets menu.
If, for some specific reason, you prefer to continue using the integrated Dojo version (e.g., in scenarios where minor corrections are needed in a large legacy project), ensure its correct implementation: return a valid Json object, subscribe and publish to the appropriate topics, etc., as detailed in the documentation:
<sx:autocompleter name="autocompleter1" href="%{jsonList}"/>
<s:autocompleter name="test" list="{'apple','banana','grape','pear'}" autoComplete="false"/>
<sx:autocompleter name="mvc" href="%{jsonList}" loadOnTextChange="true" loadMinimumCount="3"/>
The entered text on the autocompleter becomes a parameter passed to the specified url in "href", as demonstrated by (if "struts" is the text):
http://host/example/myaction.do?mvc=struts
<form id="selectForm">
<sx:autocompleter name="select" list="{'fruits','colors'}" valueNotifyTopics="/changed" />
</form>
<sx:autocompleter href="%{jsonList}" formId="selectForm" listenTopics="/changed"/>
<sx:autocompleter href="%{jsonList}" id="auto"/>
<script type="text/javascript">
function getValues() {
var autoCompleter = dojo.widget.byId("auto");
//key (in the states example above, "AL")
var key = autoCompleter.getSelectedKey();
alert(key);
//value (in the states example above, "Alabama")
var value = autoCompleter.getSelectedValue();
alert(value);
//text currently on the textbox (anything the user typed)
var text = autoCompleter.getText();
alert(text);
}
function setValues() {
var autoCompleter = dojo.widget.byId("auto");
//key (key will be set to "AL" and value to "Alabama")
autoCompleter.setSelectedKey("AL");
//value (key will be set to "AL" and value to "Alabama")
autoCompleter.setAllValues("AL", "Alabama");
}
</script>
<script type="text/javascript">
dojo.event.topic.subscribe("/before", function(event, widget){
alert('inside a topic event. before request');
//event: set event.cancel = true, to cancel request
//widget: widget that published the topic
});
</script>
<sx:autocompleter beforeNotifyTopics="/before" href="%{#ajaxTest} />
<script type="text/javascript">
dojo.event.topic.subscribe("/after", function(data, request, widget){
alert('inside a topic event. after request');
//data : JavaScript object from parsing response
//request: XMLHttpRequest object
//widget: widget that published the topic
});
</script>
<sx:autocompleter afterNotifyTopics="/after" href="%{#ajaxTest}" />
<script type="text/javascript">
dojo.event.topic.subscribe("/error", function(error, request, widget){
alert('inside a topic event. on error');
//error : error object (error.message has the error message)
//request: XMLHttpRequest object
//widget: widget that published the topic
});
</script>
<sx:autocompleter errorNotifyTopics="/error" href="%{#ajaxTest}" />
<script type="text/javascript">
dojo.event.topic.subscribe("/value", function(value, key, text, widget){
alert('inside a topic event. after value changed');
//value : selected value (like "Florida" in example above)
//key: selected key (like "FL" in example above)
//text: text typed into textbox
//widget: widget that published the topic
});
</script>
<sx:autocompleter valueNotifyTopics="/value" href="%{#ajaxTest}" />
Recently, I've been experimenting with uploading an image and converting it to a grayscale version on my webpage. Oddly enough, the javascript code works perfectly when tested locally but fails to generate the grayscale image once integrated onto the ...
I've been exploring the idea of cloning a webpage, such as Instagram's login page, along with its CSS elements and JavaScript, to use locally. Basically, I want to duplicate the login page and host it on my test server in a way that allows it to ...
I was reading an article about Angular 2 and came across a code snippet that uses <input type='text' #hobby>. This "#" symbol is being used to extract the value typed into the textbox without using ngModal. I am confused about what exactly ...
I have been working on implementing synchronized charts in my application by using the example code provided by Highcharts here. My layout consists of columns created with the Materialize framework, and I placed the charts side by side in a row. However, I ...
I have created an HttpInterceptor and I would like to print the stack trace of the functions involved in making the request for development purposes: import { Injectable } from '@angular/core'; import { HttpRequest, HttpHandler, HttpEvent, ...
I am trying to figure out how to create an opaque colored overlay on top of an image using Material-UI. While it is possible with plain HTML, CSS, and JavaScript, I am facing some challenges with Material-UI. <Card> <CardMedia> <im ...
Imagine having a function that yields a promise. The promise returned is scrutinized by other functions to determine how to manage the .fail() condition. function refreshTimeline() { var promise = ajaxMethod1() .then (function (data) ...
I need to store data from HTML table rows in a database. Each row contains 20 values, and there are about 200 rows that need to be inserted. I have two possible solutions: A. I can send the data for each row (20 values) through AJAX, repeating this proces ...
While working on a rock, paper, scissors game in JavaScript, I found it tedious to have to constantly reload the page after each play. To solve this issue, I attempted to add a button that would reset the game for a new round. However, I encountered an err ...
I am attempting to locate a span element with the class of main-tag within a nested div. However, I want to avoid using querySelector due to multiple elements in the HTML file sharing the same class and my preference against using IDs. I realize there mig ...
As I was creating a global JavaScript function and made some errors along the way, I finally got it to work after doing some research. However, while searching, I came across an example using (function($){ code here }(jQuery); My question is, what exact ...
I am looking to create a custom grid layout that represents the team's Players, separated by their positions (GK, Defense, Midfielders, and Forwards), similar to the image below. The layout should also be responsive like in image 1. Currently, the re ...
After coming across several similar questions, I realized none quite matched my issue. Specifically, I am attempting to style only the part of the search result that relates to the entered query. For instance, if the query is "Thi", I want the result to di ...
I am currently utilizing Bootstrap Vue to construct a dynamic Dropdown component that can render different elements such as item, title, and divider. Is there a method to accomplish this task effectively? The desired outcome for the Dropdown component wou ...
As a beginner in angularJS, I come with prior experience writing common functions for binding html controls in JS. However, I am looking to apply the same approach in angularJS. I understand the angular way of binding html controls, but my goal is to str ...
I encountered an issue with a button that disappears when clicked on. Additionally, clicking the button once does not trigger any actions associated with it. In order to execute the button actions, I have to click the area where the button was located afte ...
After reading through this informative article, I am attempting to dynamically load a Partial View using Ajax. However, I am encountering an issue where the partial view is not being loaded as expected. Important Points to Note: I am utilizing VS2015 wi ...
Issue with login form: Unable to provide second value after entering the first one. The text input field does not allow for entering more than one value before completing the existing entry. import React, { useCallback } from 'react'; import { Te ...
Is there a way to use a button onclick event to hide specific divs within a parent div? I've tried using .toggleClass('.AddCSSClassHere') but I'm not sure how to apply it to multiple divs. The jQuery snippet provided only allows me to h ...
I am looking to utilize python for logging into a website that utilizes javascript and https encryption. The specific site I'm referring to is: My goal is to create a python script that successfully logs in, with the intention of later translating th ...