In DotNetNuke, how can one make the search input box "search" when the user hits enter or return? The markup looks like this:
<div class="search">
<input type="text" placeholder="Search..." value="" name="q">
<a class="button" href="#">Search</a>
</div>
There's a button and it works when clicked, but the client is requesting that hitting enter on the keyboard do the same thing. The search feature works correctly and I'm worried about breaking it trying to implement this capability.
I'm backfilling for an employee who quit without notice. I'm a graphic designer, but have some familiarity with ASP.NET MVC. I have zero experience with DNN, tried reading the documentation on their site, but it seemed like it was written in another language. I'm hoping someone can explain this to me in layman's English.
Thanks!
PS - I checked this thread; didn't help: Submit Search on Enter Key?
I know I am a little late to the party, but I stumbled on this question and there is a particular DNN answer to this.
DotNetNuke.UI.Utilities.ClientAPI.RegisterKeyCapture(txtSearch, btnSearch, 13);
Place that in PageLoad, or PreInit, etc.
This isn't an MVC answer, those are already in this thread, and the controls would have to be standard webforms style controls with runat="server", etc.
DNN 6.2 does introduce the Service Framework, so you can do more MVC/MVVM style coding against it, but if you are running a version less than that, this code will come in handy.
Thanks.
jsFiddle link
Basically on keydown you wanna check for keycode 13 (which is the Enter button), then submit your form / whatever logic you have to Search!
$('.search').keydown(function (e) {
var code = (e.keyCode ? e.keyCode : e.which);
if (code === 13) { //Enter keycode
//whatever logic you have for submitting the actual form
alert('submit hit');
$('.button').trigger('click');
}
});
asp.net provides better way to easily do this:
<asp:panel id="pnlSearch" runat="server" cssclass="search" defaultbutton="btnSerach">
<input type="text" placeholder="Search..." value="" name="q">
<asp:linkbutton id="btnSerach" cssclass="button">Search</asp:linkbutton>
</div>
Notice the asp:panel has DefaultButton property which will do the trick.
Related
I'm looking to create a reusable, modularized component in Umbraco 9. I've never worked with any Umbraco before. The example I'll use is a text widget/component that has an image on the left and text on the right, with the ability to set whether you want to swap this to be image right, text left.
I come from the Sitecore world where creating a component like this would mean creating a definition with the fields in the back office, creating an MVC controller and an action, and pointing that back office definition at the controller/action combo. Then, anywhere I've deemed a component hot spot, I can click an "add component" and it'd display the available components I've created (Text + Image Block, in our example).
Our team has been researching how to do something like this in Umbraco. We've been using element types. I've got it working where I can create a list of element types, but we couldn't figure out how to add a controller/action/view to this process to really control what gets displayed.
We've looked into the Grid Type Editor. That requires some Angular work that wasn't exactly playing nice, for some reason it was seeing our image fields as null even though they had an image.
We also tried messing with the Block List editor, and are currently investigating macros.
We've been spinning our wheels and I'm hoping to get some assistance on how to do something like this in Umbraco. Perhaps I'm searching/using the wrong terminology?
Most of our components are super simple, and rather than create a reusable component, we can just use the grid editor. In our example above, we could create a 50/50 grid row and put an image in the left column and the text in the right. This would work, but we'd like to have a little more of a reusable package. Furthermore, a few of the components will require some controller functionality to be able to hit an API and massage some data before passing it to the presentation layer.
We will keep investigating, but ultimately I'm hoping someone can clear up if we're going down the wrong path, or just missing some crucial point here.
Sure! Two ways come to mind for me. One would be make a simple doctype like the screenshot below and let layout decide how to stack them
This sample uses bootstrap which of course you don't have to use, and in my case I have them in a nested content element so I basically just loop through them and alternate putting flex-row-reverse on the row.
#{
var i = 0
foreach(var contentBlock in Model.ContentBlocks)
{
<div class="d-flex flex-wrap align-items-center #(i %2 != 0 ? "flex-row-reverse" : null)">
<div class="block-left col-sm-7">
<h5>#contentBlock.SectionHeading</h5>
#Html.Raw(contentBlock.SectionDescription.ToString())
</div>
#if(contentBlock.HasValue("sectionImage") && contentBlock.SectionImage != null)
{
<div class="block1-right col-sm-5 ml-auto">
<figure class="hover">
<img id="#contentBlock.SectionImage.Name.Trim().Replace(" ", "-")" src="#contentBlock.SectionImage.Url">
</figure>
</div>
}
</div>
i++;
}
}
The other way (as you asked for) is to give the content editor the choice with a toggle, add a toggle to the doctype
and instead of this line
<div class="d-flex flex-wrap align-items-center #(i %2 != 0 ? "flex-row-reverse" : null)">
you could use this line
<div class="d-flex flex-wrap align-items-center #(contentBlock.SectionAlignment == true ? "flex-row-reverse":null)">
Or even something like this where you just assign your own class and write the CSS separately
<div class="d-flex flex-wrap align-items-center #(contentBlock.SectionAlignment == true ? "block-right":"block-left")">
Hope that helps get you going in the right direction. I'm sure you'll have to adapt this for your situation and this code is not tested.
Happy to help if you have any issues.
So i've ran into an issue, im trying to click a button...which unfortunately has the same text (IE there are 2 buttons on the page which the same text, basically a save button)
Lets pretend the button text is just "Save".
I did notice that they had different classes.
<button data-action="submit" class="btn btn-primary btn-save">Save</button>
whereas the other button is:
<button name="button" type="submit" class="btn btn-primary set-right">
<i class="glyphicon glyphicon-floppy-disk"></i> Save
</button>
I know glypicon is just an icon set....but they both seem to belong to the same class? but have different class names? (Sorry im not familiar with Rails)
It doesn't honestly matter which one I select as they both have the same function. I've seen where you can use xpath? but aren't we supposed to use css selectors or something now? (As in thats the newest way?) I may be wrong....
Could I use something like:
find(:xpath, '//button[#class="btn-save"]').click
Im trying to avoid "rails" only solutions, as not all the websites I test on are rails based.
You have various possibilities:
1) Find the button by its class
find(button.btn.btn-primary.btn-save).click
2) Find the button by its css selector or xpath (you can copy them using Google Chrome: right click -> Inspect -> right click on your element -> copy css or xpath)
find(:css, "your button css selector").click
find(:xpath, "your button xpath").click
If both buttons really do the same thing then you could always just do
first(:button, 'Save', minimum: 1).click
which will be less prone to breakage as your page structure changes than using an xpath selector. The minimum:1 option will just make #first wait a bit until at least one button is on the page (like find would) - it may not be necessary depending on your test structure
On my jsf page at some point I send a message to the growl component.
<p:growl id="growlLong" for="growlLong" showDetail="true" life="10000" sticky="false"/>
Once the 10sec is over, or dismissed by clicking the X, the issue that occurs is the element below the growl is not selectable. By inspecting the components on the page, looks like the actual div stayed there and blocks the content below it.
<?xml version="1.0" encoding="UTF-8"?>
<div class="ui-growl-item">
<div class="ui-growl-icon-close ui-icon ui-icon-closethick" style="display: none;" />
<span class="ui-growl-image ui-growl-image-info" />
<div class="ui-growl-message">
<span class="ui-growl-title">Success!</span>
<p>Configuration successfully saved.</p>
</div>
<div style="clear: both;" />
</div>
So, the question is - how do I make this to go away and keep the content below still usable?
Here is the screenshot of the issue, as seen with "inspect element", blue boxes are existing links, red box is the dismissed growl. Inside the blue box, we can't click the part that is covered by the red box.
This topic might be older but I just recently stumbled upon it:
The reason that the showcase is working but my version was not was that I gave the .ui-growl CSS class a height AND a width. In the showcase, the size of the container is only defined by its content and thus 0 if there are no items to display.
I moved my height definition to .ui-growl-item (which is more appropriate anyhow) and now it's working like a charm.
While the it would be desirable to be able to tell growl to not leave behind the <div id="growlLong_container"> structure in the DOM, the simple solution is to just select it and remove it using your favorite method to manipulate the DOM.
The ID appears to be the ID you passed to growl: id="growlLong" + "_container". With a DOM ID it is a simple matter of selecting it and removing it.
Yes, it would be nice to be able to get growl to not leave it in there. However, there is a point of diminishing returns vs. the amount of effort you spend trying to find a solution. It appears to be well past the point where you should just use a hack and remove it. Make a note about it, move on. Leave a comment in the code that this is why you are making the DOM manipulation. A possibility rather than removing teh <div> is to adjust the z-index such that it is below that of the UI elements. Another possibility is to add display:none; to the style. Obviously, code it such that if the <div> is not there nothing goes wrong. Verify that the next use of growl still performs correctly.
Ask on the Growl discussion group. Submit it as a bug with growl. If a way surfaces to make growl not leave something like this in the DOM revisit the code and apply it.
As to removing it, if you have JavaScript available it is as simple as:
document.getElementById("growlLong_container").remove();
To be more specific we really need more information about your code and the environment in which you are running.
A "solution" that should remove the <div>:
Hopefully you will receive an answer which allows the elements to be hidden/removed by growl. However, there does not appear to be one at present.
The following script should wait around checking every 250ms to see if the <div id="growlLong_container"> has been entered into the DOM. Once the <div> has been entered into the DOM, the script will wait 10s. If the <div> exists after the 10s it will be removed. The script is a hack. But it should work.
You will need to place it such that it makes it onto the page, either enclosed in tags (as are here), or in a file without the first line:<script class="code" type="text/javascript"> and the last line: </script> removed. If you use a separate file you will need to have it included in a similar manner as you do jquery.js, foundation.js, foundation.topbar.js and foundation.tooltip.js.
<script class="code" type="text/javascript">
(function () {
"use strict";
const maxGrowlTime = 10000; //In milliseconds
const checkFrequency = 250; //In milliseconds
var intervalTimer=0;
var foundGrowl=false;
function dismissGrowl() {
var growlId;
growlId = document.getElementById("growlLong_container");
if(growlId) {
growlId.parentNode.removeChild(growlId);
}
foundGrowl=false;
setGrowlCheckInterval();
}
function checkForGrowl() {
var growlId;
if(foundGrowl) {
return;
}
growlId = document.getElementById("growlLong_container");
if(growlId) {
foundGrowl=true;
clearInterval(intervalTimer);
setTimeout(dismissGrowl, maxGrowlTime );
}
}
function setGrowlCheckInterval() {
intervalTimer = setInterval(checkForGrowl, checkFrequency );
}
setGrowlCheckInterval();
})();
</script>
My hope is that you find an answer that does not require a hack such as this. However, this should solve your problem, at least to an extent. With the script, the prevention of using those controls will last for at least the entire 10s up to 10.25s even if the user dismisses the growl early. With the two screenshots mentioned in the comments it would probably be possible to change the script such that it detects if the user dismisses the grow and then remove the <div> immediately. This would make it more responsive to user input.
This solution assumes that the <div id="growlLong_container"> does not exist in the DOM prior to your issuing the <p:growl id="growlLong" and that it is not needed afterwards. This is very likely because the ID of the dive appears to be composed of the ID you pass the growl.
Mainly, this issue looks like a bug or incompatibility issue between components.
I use LifeRay 6.1.2. And it have built-in Alloy UI 1.5. framework. So I try to reproduce this form validation example (I copied all code), but it don't work as expected (error labels in DOM, but they are don't visible in form (see EDIT1)):
Expected result is (you can try yourself live example using link provided above):
Where is problem? How to solve it? Thanks.
EDIT1:
After some research, I realized that if I delete aui-form-validator-message CSS class from error message's DIV tag (it generated by LifeRay, I'm not adding it), then error message become visible. Strange..
You should post your own code, or it's difficult to answer.
Anyway if you want you could try the aui validator tag for example:
<aui:input name="name" value="${name}" label="name">
<aui:validator name="required" errorMessage="your-message-here"></aui:validator>
</aui:input>
learn more # http://drewblessing.com/blog/-/blogs/34509
Hope it helps!
I think you have not used the tag in your code.
<script src="http://cdn.alloyui.com/2.0.0/aui/aui-min.js"></script>
Paste this and check.
I'm not able to click on text link 'Add' using watir:
PAGE:
<div id="divAdd" style="float: right">
<a onclick="SwitchView('2')" style="color: #1B56A7; cursor: pointer;">Add</a>
</div>
Watir CODE:
browser.link(:text =>"Add").click
EXCEPTION:
Unable to locate element, using {:tag_name=>["a"], :text=>"Add"}
Please help me how to handle this?
If the page has a lot of ajax and javascript going on, you may just have to wait a little bit for the client side code to finish rendering the page after it has been loaded from the browser.
Try this
browser.link(:text =>"Add").when_present.click
If that does not work, then make sure the item is not in a frame or something..
btw, if there is more than one link on the page with the text 'Add' then you may have to specify a container outside the link that lets you identify which link you want. eg.
browser.div(id: => "divAdd").link.when_present.click
If
This would be my way of doing it.
while browser.div(:class, 'containerDIV').a(:text, 'Add').exists? do
browser.div(:class, 'containerDIV').a(:text, 'Add').click
end