I have two ContentPanes inside an AccordionView. When a button is clicked on the first one I want to set the href on the second one and then set it as selected. To do this I run this code:
searchResultsContentPane.set("href", "modules/content_panes/test_module.html");
searchAccordionContainer.selectChild(searchResultsContentPane, true);
For some reason though the ContentPane will animate it halfway opening and then it will just pop closed with nothing loaded into it.
Here is the ContentPane declaration:
<!-- Search Results Accordian View -->
<div class="searchAccordianPane" id="searchResultsContentPane" title="Search Results" dojoType="dijit.layout.ContentPane" data-dojo-props='refreshOnShow:true'></div>
If I set the href inside the declartion as a data-dojo-props value it will show it but eventually I will need to add GET values to the URL so I can't have it static.
Thanks for the help
Related
I have a table like structure in my page and each row has data-hx-get attribute pointing to a url where django returns details for that row. But also in the same row I have an edit button where django returns the edit form for that item. I would like the entire row to be clickable and when clicked shows replaces itself with the details and also the edit button to replace the row with the form. It works fine for the users but when the edit button inside the row is clicked, in the console I get htmx:swapError as the row also receives the click event and does what it was supposed to do. The event on the button takes precedence and before the row it changes the content of the row and when the row gets the response, the data-hx-target for that is no more in the page. So, my question is, is there a way to tell htmx, when a nested element has data-hx-get, ignore the parent's hx directive.
<div
class="row item-row"
id="item-row-{{item.pk|unlocalize}}"
data-hx-get="{% url 'some url' item.pk %}
data-hx-swap="outerHTML"
data-hx-trigger="click"
data-hx-target="this">
...
<button
data-hx-get="{% url 'editurl' item.pk %}"
data-hx-swap="outerHTML"
data-hx-trigger="click"></button>
</div>
You can use the consume modifier for hx-trigger https://htmx.org/attributes/hx-trigger/. This will prevent the click event from bubbling up to the parent row.
<div
class="row item-row"
id="item-row-{{item.pk|unlocalize}}"
data-hx-get="{% url 'some url' item.pk %}"
data-hx-swap="outerHTML"
data-hx-trigger="click"
data-hx-target="this">
...
<button
data-hx-get="{% url 'editurl' item.pk %}"
data-hx-swap="outerHTML"
data-hx-trigger="click consume"></button>
</div>
Using Selenium and Chrome, I'm attempting to check a box located within a table. The table contains 2 checkboxes but they act as radio buttons, in that if I click one, the other will uncheck.
I've tried a variety of methods, which include the following:
Const CHECKED_STATE As String = "Ag-icon ag-icon-checkbox-checked"
findElementByClassName("ag-selection-checkbox").fireEvent("CHECKED_STATE")
findElementbyXPath("//span[#class=ag-icon ag-icon-checkbox-checked'])[1]").Click
findElementbyXPath(".//div[#class='ag-body-container']").Click
I'm not sure how to click the checkbox when the HTML code doesn't even have a checkbox type or an Id.
The HTML reads:
<span class="ag-icon-checkbox">
<span class = "ag-icon ag-icon checkbox-checked ag-hidden">
<span class = "ag-icon ag-icon checkbox-unchecked">
<span class = "ag-icon ag-icon checkbox-undeterminate ag-hidden"></span>
When I click on the checkbox, the unchecked and hidden lines of HTML will flip. So I'm guessing it's some sort of event that I have to trigger.
The following, depending on the rest of the html, should work to select the unchecked item and thereby toggle off the other item. It targets the class checkbox-unchecked:
driver.FindElementByCss(".ag-icon-checkbox .checkbox-unchecked").click
I am having a WebBrowser control and loaded a local image into an IMG tag and set the DocumentText of the WebBrowser as below
<!DOCTYPE HTML>
<meta http-equiv='X-UA-Compatible' content='IE=10' />
<html lang='en'>
<body style='margin: 0; overflow: hidden;'>
<img Width = 1269 Height = 1600 src='C:\Users\ADMIN\Desktop\p41.png'></img>
</body>
</html>
It is loading perfectly fine. For some reason, I want to invoke the context menu of the image and click one of the context menu items programmatically (say for example "Copy" - though I don't want this - I can choose any item in the menu). I don't know how to achieve this. When I tried to iterate the context menu of the browser control, I am getting System.NullReferenceException: 'Object reference not set to an instance of an object.' as I have not placed any ContextMenu control in the form, since I wanted to access the WebBrowser's inbuilt context menu. Is this achievable ?
Or is there a way to get the code (which IE does) for each of its menu item, so I can directly call that - atleast for "Save picture as..." and "Copy"
Please Note: I do not want to use the "SRC" attribute to be part of any solution as I do not want that as you see I am the one forming the HTML tag with that. Hence I know that.
Please find the screenshot below
I am using a frontend library called Element UI to create some accordions on my website. I got an array of objects that I like to create accordions for. FYI, from the element ui website: the v-model used on the accordion specifies the currently active panel. The name attribute is the unique identification of the panel. That means I can do:
<el-collapse v-model="activeName" accordion>
<el-collapse-item title="Consistency" name="1">
<div>content content content</div>
</el-collapse-item>
<el-collapse-item title="Consistency" name="2">
<div>more content more content more content</div>
</el-collapse-item>
</el-collapse>
One this loads, the first accordion will open since in the data object, activeName is set to 1:
data() {
return {
activeName: '1',
}
}
Now I thought I'd just loop through the array and create accordions for the items in my array, and binding the name attribute to the index + 1, so that the first item will have the name attribute equal to 1, the second to 2 etc. So:
<el-collapse v-model="activeName" accordion>
<el-collapse-item
v-for="(item, index) in experience"
:title="item.company"
:name="index + 1"
:key="index"
>
<div> content content content </div>
</el-collapse-item>
</el-collapse>
But for some reason, when the page loads, the first item in the accordion won't open automatically. They're all closed by default. I created a codesandbox with the problem that you can see for yourself here: codesandbox
The problem is that when you run a for loop and assign name, it's a number and not a string.
:name="index+1" <---- This is a number
But, activeName is a string. So, the values don't match and that's why the accordian does not open on page load.
Here's an updated sandbox: https://codesandbox.io/s/vue-template-ysm79
I changed activeName to a number. The for loop accordian will now open and the normal HTML accordians won't.
I have multiple title panes:
<div class="classname" data-dojo-props="title: 'Title Here', open: false" data-dojo-type="dijit.TitlePane">..</div>
Right now I have written this
<a onclick="dojo.forEach(dijit.registry.toArray(), function(item){ if (item.get('declaredClass')=='dijit.TitlePane'){item.set('open',true)};});">Expand All </a>
<a onclick="dojo.forEach(dijit.registry.toArray(), function(item){ if (item.get('declaredClass')=='dijit.TitlePane'){item.set('open',false)};});">Collapse All</a>
this successfully opens and closes all the title panes, but there is another title pane used in the page that I don't want affected by this. I tried using dojo.query('.classname').attr('open',false); but that didn't work.
I'm not experienced with dojo/dijits, how can I set open to true or false based on a class attribute?
You need the widget to do this not the dom object,
and that is what query is giving you the dom object.
dojo.query('.classname').forEach(function(node){
dijit.getEnclosingWidget(node).set('open',false);
})