htmx: hx-swap='outerHtml' gets ignored - htmx

This button should replace a <tr> but somehow "hx-swap" does replace the inner HTML, not the outer HTML:
<button hx-get="{url}" hx-target="#offer_{id}" hx-swap="outerHtml"
class="btn btn-secondary btn-sm">Edit</button>
See: hx-swap

The string is case-sensitive. it works if you write outerHTML instead of "outerHtml".

Related

how can i pass a value to inArray helper in handelbar template from object

i am using InArray helper to check weather a value is present in array or not and render the block according to result.
if i hardcode the value then its working fine like show below.
{{#inArray this.likes "5e20c3d45df5dc29e4a403c3"}}
<button class="btn btn-primary likebtn" value="{{this._id}}">unLike</button>
{{else}}
<button class="btn btn-primary likebtn" value="{{this._id}}">like</button>
{{/inArray}}
but i want the value from an object pass while rendering the template. my value is in user_data.user_id.
i tried the below code but its not working .
{{#inArray this.likes "{{user_data.user_id}}"}}
<button class="btn btn-primary likebtn" value="{{this._id}}">unLike</button>
{{else}}
<button class="btn btn-primary likebtn" value="{{this._id}}">like</button>
{{/inArray}}
Create custom hbs helpers.
hbs.registerHelper("in_array", function(key, arr, options) {
if (arr.includes(key)) return options.fn(this);
else return options.inverse(this);
});
And use it in your hbs file like this.
{{#in_array key arr}}
<h1>{{key}} is present</h1>
{{else}}
<h1>{{key}} is not present</h1>
{{/in_array}}

Confirm Element and go to next tag

I got some List with different Elements and every Element had it's one delete button. I want to delete a certain Element, so at first i need to confirm the Element (the Element contains: Test 1, Test2) and subsequently delete the Element
<div class="html-replace-container">
<form id="new_supplier_assignment" class="new_supplier_assignment" action="/supplier_assignments" accept-charset="UTF-8" method="post">
<h3 class="supplier-assignment-header progress-active">
Test 1
-
Test 2
</h3>
<a class="btn btn-danger btn-sm" data-replace-html-container="true" data-confirm="Sind Sie sich sicher?" style="float: right" rel="nofollow" data-method="delete" href="/supplier_assignments/122?owner=Customer">Löschen</a>
I've got this so fare :
<tr>
<td>click</td>
<td>xpath=//*[#id='new_supplier_assignment']/..//*[contains(text(), 'Test 1')]/../*[contains(text(), 'Test 2')]</td>
<td></td>
</tr>
I want to go to <a class="btn btn-danger ...> and click.
I can not use count() or indexof().
First find a h3 which first a is Test 1 and second a is Test 2, then use following-sibling::a to get the delete button
xpath: //h3[a[1][text()="Test 1"] and a[2][text()="Test 2"]]/following-sibling::a
In case you don't care which a is Test 1, it maybe the first or second a, If so, remove the index [1] and [2] , try below xpath:
//h3[a[text()="Test 1"] and a[text()="Test 2"]]/following-sibling::a
You can use the text as a locator:
driver.findelement(by.xpath("//a[contains(text(), 'YOUR TEXT')]")).click()
The different between the buttons is the text 'Test 1' 'Test 2' so you can locate the element and delete it by his text.

Selenium webElement property change

I am automating an application with selenium.There are no normal labels like id,tag by which I will be able to find an element. So I was using the xpath[driver.findElement(By.xpath())]. But now i find that some of the xpaths of the WebElement changing dynamically while runtime and so my test cases are failing.Even the relative xpath option is not available for the HTML.I am pasting a part of the html of the AUT. Please let me know how to handle this scenario .
<div>
<button class="btn btn-primary ng-hide" ng-click="unlockOrder('/content/boss/en/dashboard');" ng-show="enableUnlockButton" type="button">Unlock Order</button>
<button class="btn btn-primary" ng-click="discardOrder('/content/boss/en/create-order/pre-order-options');" type="button">Discard Order</button>
<button class="btn btn-primary" ng-click="saveOrder(showSaveButton && ban_search.$valid);" ng-disabled="showSaveButton==false || ban_search.$invalid" type="button" disabled="disabled">Save Order</button>
</div>
I would rely on the button text:
driver.findElement(By.xpath('//button[. = "Unlock Order"]'))
where . refers to button's text.

Twitter bootstrap : collapsible element in collapsible element

Disclaimers first :
1) First question ever, I hope I'm doing this right, apologies if it's not the case.
2) English is not my native language, so sorry for any mistakes.
3) Made a search and couldn't find an answer.
Trying to explain in words will mean many words while a bootply can say it all :
http://www.bootply.com/EBIMFQ5jEC
Basically, what I want is almost working except for this : I would like that clicking on "title 3" for instance (after you've clicked on "title 1" or "title 2") hides the "first/second column(s)" so that the "third column" is the only one shown (and vice-versa of course). I hope this is clear.
I tried a few things with data-parent (such as this: http://www.bootply.com/pgoT2IPG8D which has data-parent="#collapse1" added for the first three buttons) but couldn't achieve anything...
Thanks in advance for any help !
To get what you want you will indeed have to set the `data-parent', but also notice that this also require a '.panel' class. From the docs:
If a selector is provided, then all collapsible elements under the
specified parent will be closed when this collapsible item is shown.
(similar to traditional accordion behavior - this is dependent on the
panel class)
demo: http://www.bootply.com/qhs4dQbFZK
So you should wrap you collapsible item in a .panel class (or change the plugin). See also: https://github.com/twbs/bootstrap/issues/15341
Then a collapsible item will look that shown below:
<div class="panel">
<div class="col-md-2 collapse" id="collapse1">
<div class="btn-group-vertical btn-block" data-toggle="buttons">
<button class="btn btn-default btn-lg" href="">First subtitle column</button>
<button type="button" class="btn btn-default btn-lg" data-toggle="collapse" href="#collapse1-1"><input type="radio" name="subtitle" id="st11">Subtitle 1-1</button>
<button type="button" class="btn btn-default btn-lg" data-toggle="collapse" href="#collapse1-2"><input type="radio" name="subtitle" id="st12">Subtitle 1-2</button>
<button type="button" class="btn btn-default btn-lg" data-toggle="collapse" href="#collapse1-3"><input type="radio" name="subtitle" id="st13">Subtitle 1-3</button>
</div>
</div>
</div>
Your button should get a data-parent attribute:
<button type="button" class="btn btn-default btn-lg" data-toggle="collapse" data-parent="#menurow" href="#collapse1"><input type="radio" name="title" id="title1">Title 1</button>
And your items should be wrapped inside the id set before (#menurow):
<div class="row" id="menurow"></div>
Notice that the .panel class also set some style rules, which should be overrules (undo) for your situation, for instance: .panel {margin-bottom: 0;}

How to click on button "Submit Quote" its id="div_5_1_1-lnk" is dynamically changing in different pages of applications

<div id="Form_Scope1" class="Form_Scope topLevel CoachView CoachView_show" data-eventid="" data-viewid="Form_Scope1" data-config="config1" data-bindingtype="" data-binding="" data-type="com.ibm.bpm.coach.Snapshot_a30ea40f_cb24_4729_a02e_25dc8e12dcab.Form_Scope">
<div id="Action_Group2" class="Action_Group topLevel CoachView CoachView_show" data-eventid="" data-viewid="Action_Group2" data-config="config9" data-bindingtype="" data-binding="" data-type="com.ibm.bpm.coach.Snapshot_a30ea40f_cb24_4729_a02e_25dc8e12dcab.Action_Group">
<div id="div_5_1" class="ContentBox" data-view-managed="true" style="display: none;"> </div>
<div class="s-action-group clearfix sticky">
<div class="l-nodeId" style="">QTO001_N002A</div>
<div class="p-action-group">
<div id="div_5_1_1" class="Action CoachView CoachView_show" data-eventid="boundaryEvent_7" data-viewid="Action3" data-config="config15" data-bindingtype="" data-binding="" data-type="com.ibm.bpm.coach.Snapshot_a30ea40f_cb24_4729_a02e_25dc8e12dcab.Action">
<button id="div_5_1_1-lnk" class="p-primary-btn btn btn-primary" type="button" title="" data-original-title="" style="background-color: rgb(56, 168, 182);">
<i class="icon-indent-right"></i>
<span>Submit quote</span>
</button>
<a href="#action" style="display: none;">
</div>
How to click on button "Submit Quote" its
1.id="div_5_1_1-lnk" = one page of application
2.id ="div_9_1_1-lnk" = Another page of application
is dynamically changing in different pages of applications.
I have tried by xpath expression by position or relative path it is not working please let me know any other option available for this?
The following selector would work,
driver.findElement(By.cssSelector("div.Action button[id$='lnk']"));
Here '$' indicates that the id of button should end with value 'lnk'.
The equals sign in attribute selectors may be prefaced by other characters which alter the meaning a bit.
Remember that classes and ID's are attributes too, and can be used with attribute selectors.
Refer this for more info.
Try driver.findElement(By.cssSelector("button[id^='div_']"));
Click it using the class name
options=driver.find_elements_by_class_name("icon-indent-right")
for option in options:
if(option.text=="Submit quote"):
option.click()