We Keep Coding

Content added to DevExtreme dxPopup not working unless Popup has been shown already

I am using a DevExtreme Popup that will show whenever a user selects an option from a SelectBox. The Popup will identify placeholder values inside the selected value and present the user options to replace them with.
When the SelectBox value changes, I look for placeholders and append a dxSelectBox for each placeholder to a div valuesList inside the popup.
var matches = selectedValue.match(templateRegex);
if (matches.length > 0) {
matches.forEach(function (m) {
var newDiv = $("<div/>");
newDiv.dxSelectBox();
newDiv.appendTo("#valuesList");
});
$("#myPopup").dxPopup("instance").show();
}
The problem is the first time this runs, it doesn't append anything to the Popup content. Using the debugger I confirm that the code does run, but nothing gets added. The popup shows with no content. However, if I select the value again in the SelectBox, it runs and the popup gets new content appended to it as it should, as well as all subsequent changes. It's only the first time that doesn't work.
I confirmed this by adding this to the JavaScript:
$(document).ready(function () {
$("#myValuePopup").dxPopup("instance").show();
$("#myValuePopup").dxPopup("instance").hide();
});
With that added, content is correctly appending the first time I select a new value from the SelectBox, confirming that it only works if the Popup has already been shown. This seems to be a sloppy solution though, and it requires adding a bunch of checks to the onHidden event handler for the Popup since some variables it uses aren't initialized yet, so I'd rather not have to resort to it.
Is there another way to pre-initialize the dxPopup? I couldn't find anything going through the documentation. And the Popup's _initialized property is true even before being shown the first time.
Update:
The dxPopup is created using Razor inside my View:
#(Html.DevExtreme().Popup()
.ID("myPopup")
.OnHidden("myPopupClosed")
.ContentTemplate(
#<text>
<div id="valuesList">
</div>
</text>
)
)

Jquery: Trying to disable HTML select menu not working

On my HTML page I have a few select menus which all share the class name .iconDropDownMenu and when the page is generated with PHP some of the select menus will have been hidden by PHP adding another class to the select menu.
Anyway I then wanted to disable only the hidden .iconDropDownMenu which I have been trying to use the following:
$(".iconDropDownMenu:hidden").each(function()
{
$(this).prop('disabled', true);
});
This runs without no errors but the disabled attribute does not show up on my select menu, thus not disabling input. So I did some research and found that I could use $(this).multiselect('refresh'); inside my .each() above after the first line. However I get an error TypeError: $(...).multiselect is not a function and this is the weird part it actually works, I can see the disabled attribute in the HTML but the error stops the rest of the JavaScript to run...
I also tried using $(this).selectmenu("refresh"); but get the following: Error: cannot call methods on selectmenu prior to initialization; attempted to call method 'refresh' and this also produces the same result, being the disabled attribute to the select menu is added whereas without this it did not before.
I tried to initialize the select menu but it just adds a span to the HTML and messes up select menu by showing the first selection as text outside the select menu?
I also tried to use PHP to output the "disabled" attribute to the select menu HTML but when loaded in the browser it does not show and is removed :/

Sounds like your JS may need to go into a $(document).ready();, here is an example ... https://jsfiddle.net/kennethcss/vkuhm93s/.

Cant un-hide css element to choose an element value with selenium

Im automating something on some website and I have a dropdown menu that is customise, now the developer that developed it set the original dropdown to be hidden, it looks like this:
now I want to choose some value of the dropdown with selenium but I cant find the element since its hidden, so I want to use js to uncheck the hidden and choose a value.
this is my html block where you can see the web elements:

Remove the jcf-hidden class (or remove the class attribute completely) via "execute script".
Example in Python:
elm = driver.find_element_by_id("company_stage")
driver.execute_script("arguments[0].removeAttribute('class');", elm)
In ScalaTest, it should be:
val ele: Option[Element] = find(id("company_stage"))
executeScript("arguments[0].removeAttribute('class');", ele)

Click on <li> tag from a bootstrap select2 dropdown in internjs

I am writing some function test on a form and I am running into issues selecting values from a bootstrap-select2 drop-down.
If you are unfamiliar with Select2, here are some examples;
https://fk.github.io/select2-bootstrap-css/3.5.1.html
All the drop-downs are un-order list that appear when you click on the drop-down.
I click on the drop-down with;
.findById('select2-chosen-1').click().end()
The above lines makes the un-ordered list appear, but I am unsure how to select a specific selection.
if I do the following I can print out all the selections;
.findById('select2-results-1')
.getVisibleText()
.then(function(text) {
console.info(text);
})
I tried to get all the li tag names under that , .findAllByTagName('li'), but I am not sure what to do with that array.
Any help to point me in the right direction would be very helpful. Let me know if you need any more info.
Thanks!

Once you open the dropdown, you just need to find the particular item you want to select and click it. I generally use findByXpath, or a combination of findByCssSelector and findByXpath, when I'm trying to find something that contains text, like:
.findById('select2-chosen-1')
.click()
.end()
.findByCssSelector('.select2-drop-active .select2-results')
.findByXpath('.//li[div[text()="Alaska"]]')
.click()
.end(2)
The code above finds the Select2 and clicks it, then finds the dropdown result node. With the result node as the current reference, it uses an XPath expression to find the li that contains a div with text "Alaska", then clicks the li. The end(2) after the click handles both the findByXpath and findByCssSelector calls.

VBA .getElementbyID and passing value to an onchange javascript event

I have the following code which selects an item from the drop down by using the .getelementbyid method. The way the page works is once the item is selected, a new screen populates allowing to send a user a message to someone (the form uses an onchange event to handle when you select an item from the drop down list). When running this code, it selects the proper item but the page does not repopulate.
With HTMLDoc2
.getElementById("navbar1").setAttribute "value", "getaddr"
End With
How do you force the form to recognize that you have selected one of the drop down items and process the onchange event?

I was looking for a similar answer and found this that may be useful.
I have a SELECT element on a web page (which has an ID) that has an onchange javascript associated with it.
I accessed it as follows (using your example):-
dim objURLpage as MSHTML.HTMLdocument
dim appIE as InternetExplorer
dim objSELECTelement as MSHTML.HTMLSelectElement
'this type will depend on your HTML element type but usually dropdown lists are "OPTION" elements between "SELECT" elements
Set objURLpage = appIE.document 'I found this gives current web page that's open
set objSELECTelement = objURLpage.getElemebtById("navbar1")
objSELECTelement.selectedindex = 0
'number depends on position of item in dropdown list starting at "0"
objSELECTelement.FireEvent("onchange")