If I understand the docs correctly it allows
<div>
<div id="alert"></div>
<button hx-get="/info"
hx-select="#info-details"
hx-swap="outerHTML"
hx-select-oob="#alert">
Get Info!
</button>
</div>
replace the whole <button> due to the hx-swap directive with the content of #info-details - via hx-select="#info-details" - from the response sent.
define a 2nd target hx-select-oob="#alert" which takes the content from #alert from the response sent.
Is there any way hx-select-oob can have multiple targets?
Like hx-select-oob="#alert,#second-target"?
Or how to manage updating multiple targets at once?
If your goal is to return html content and copy the same content to multiple targets - you simply use class selector instead of ID.
If you have multiple content returned, then you need to use htmx-swap-oob
Related
The framework I am using is .NET 6.
Previously, the src attribute of the image element like this:
<img src="#ImageServer/images/BG.png" />
The variable of ImageServer stores the URL of the image server.
Recently, I need to add a token in it for anti-theft chain.
I tried it like this:
<img src="#ImageServer/images/BG.png#GetToken()" />
However, after the program is run, the src turns out to be this:
<img src="https://www.aaa.com/images/BG.png#GetToken()" />
What's wrong with my code and how can I render two variables in src attribute? Thank you.
The text just before the # is causing the render engine to not parse the # as a server-side code indicator.
Make the whole value server-side calculated, instead of outputting small pieces of server-side values into client-side values. For example:
<img src="#(ImageServer + "/images/BG.png" + GetToken())" />
This way the view engine sees everything within the #() as a server-side expression and outputs the result of that expression.
Similarly, with string interpolation:
<img src="#($"{ImageServer}/images/BG.png{GetToken()}")" />
Is there any reason why a repeat.for binding would remove attributes from elements inside the repeater?
<div repeat.for="i of model.someArray.length">
<label>Some Array - Index ${i + 1}</label>
<input value.bind="model.someArray[i]" some-custom-attribute="someArray[${i}]"/>
</div>
and that some-custom-attribute is not being output within the repeat, but if I were to remove the string interpolation within there then it outputs fine.
== Edit ==
I have put it in a comment but just to make sure everyone is on the same page, ideally this is the output I expect:
<input value.bind="model.someArray[i]" some-custom-attribute="someArray[0]"/>
The some-custom-attribute is not an aurelia attribute, its pure HTML that a 3rd party JS library uses, so the goal here is to get the textual value of the index into the textual attribute value.
model.someArray.length is a number, not an array. You need to iterate over the array. If you do need the current index, the repeater provides the $index property for you to use.
Your code should look like this:
<div repeat.for="item of model.someArray">
<label>Some Array - Index ${$index + 1}</label>
<input value.bind="item" some-custom-attribute.bind="item"/>
</div>
To answer your original question, doing some-custom-attribute="model.someArray[${i}]" makes Aurelia think you are trying to pass a string value to the custom attribute. You can see that in the following gist: https://gist.run/?id=eed8ac8623ff4749aa5bb93c82a7b1fb I've created a custom element that just pushes whatever value it is given in to an element on the page. Note!!! Don't ever do what I'm doing here! I just did this this way so you wouldn't have to open the js console. To actually get a value passed in, you would need to use some-custom-attribute.bind="item" or (to do things how you are doing things, some-custom-attribute.bind="someArray[i]"
Hi I want to hold element references in files somewhere. and then in run time search for elements withing referenced elements in Selenium how to do that.
For example- a Frame contains multiple text boxes -and multiple frames of similar properties exist where the textboxes are also duplicate. Something like I wanna reference the text box under a particular frame. But i wanna predefine the frame. and the specify that search under that frame[Something like Aliases in Testcomplete]
For Example - similar concept exist in Cheezy's Page-Objects. but not quite.
if you have a structure like this:
<div class='some class'>
<input class='input-button' value='submit'>Submit</input>
</div>
<div class='some class2'>
<input class='input-button' value='submit'>Submit</input>
</div>
and you want to find the first 'Submit' which is within the 'some class' div, you can do this:
parent_element = driver.find_element(:xpath, "//div[#class='some class']")
child_element = parent_element.find_element(:xpath, ".//input")
p.s. this is ruby code.
Only the content of the div is unique. So, in the following dynamically generated html, only "My Article-1245" is unique:
<div class="col-md-4 article">
<h2>
My Article-1245
Delete
Edit
</h2>
<p>O ephemeral text! Here today, gone tomorrow. Not terribly important, but necessary</p>
</div>
How do I select the edit/delete link of this specific div, using Selenium? assertText/verifyText requires an element locator, but I do not have any unique id/name (out of my control). There will be many such div blocks, with other content text, all dynamically generated.
Any help would be appreciated.
If text 'My Article' appears each time, you may use following:
//For Delete
driver.findElement(By.xpath("//h2[contains(text(),'My Article-')]/a[text()='Delete']"));
//For Edit
driver.findElement(By.xpath("//h2[contains(text(),'My Article-')]/a[text()='Edit']"));
Hope it meets your requirement :)
Matching by text is always a bad automated testing concept. If you want to keep clean and reliable test scripts, then :
Contact your web dev to add unique identifiers to the elements
Suck it up, and create selectors based on what's there.
You are able to create a CSS selector based on what you want.
What you should do is create the selector using parent-child relationships:
driver.findElement(By.cssSelector("div.article:nth-child(X) a[href^='delete']"));
As I am ignorant of your appp, this is also assuming that all of your article classes are under the same parent. You would substitute X with the number of the div you want to refer to. e.g.:
<div id="someparent">
<div class="...article" />
<div class="...article" />
...
</div>
I saw in Expression Engine I can use {embed:title} and {site_name} variables, but now I need a variable to pull an excerpt or description of the article itself. Is there such a variable/tag?
ExpressionEngine tags are based solely on custom fields which you yourself have defined. So in the field group for your "articles" channel, you'll have some fields, maybe {article_summary}, {article_body}, {article_image}, etc. To display your summary, just use {article_summary} in your template.
I'm assuming that you're coming from something like WordPress maybe, where every piece of content has the_content() and the_excerpt() ... aside from a handful of global variables, and some fields which are universal to all entries (like {title}, {entry_date}, etc), ExpressionEngine isn't like that. You define what fields you use for each channel - you have complete control.
Here is the actual code you have to include in your EE template.
{exp:channel:entries channel="article" limit="5" dynamic="no"}
<div class="home_thumb">
<h1>{title}</h1>
<div class="home_thumb_img">
<img src="{article_image}">
{if article_content}
<p>{article_content}</p>
{/if}
</div>
</div>
{/exp:channel:entries}