I have implemented a panel where user can post their thoughts with images. For every post there is a reply box similar to the facebook timeline. User can mention any user while replying to any post and I tried to make this mentioning easier. I have used a JQuery UI(JS and CSS) autocomplete dropdown to suggest the username when # sign and some other letters are typed(similar to FB or Skype ).As expected, the reply box are dynamically generated. I have made a single autocomplete dropdown and attached it with a reply box which get focused. For this I used this function to set the position -
$("#hidden-autocomplete").autocomplete("option", "position", { of: "#" + currentReplyBoxId } );
Everything is working fine except the dropdown position. The dropdown appears over the input field so user can't see what he has typed so far. See the image -
Here I've made a reproducible example.
But I want this like below -
Now dropdown is below the input field , the height is fixed and scrollable. Am I doing something wrong? Could you please help me to get the desired results? TIA
Looks like you need to set all 3 jQuery UI position properties:
my: "left top",
at: "left bottom",
of: "#" + currentId
Here is the working fiddle https://jsfiddle.net/yg5sdxw6/2/
Related
I’m using Oberon forms version 2019.2 CE.
In my form I have Dynamic Dropdown (with search) with country select (required field) and Text field with display code of selected country:
When I select country, in text field appears selected country code:
Now I can click ‘x’ sign to remove value form drop down:
Value in field 'code' has not been deleted. When I click Validate button no error is detected. It seems that when I use 'x' sign to remove value from dropdown, I remove only label, not value.
My question is whether it is possible to remove both label and value, when I click 'x' sign?
I am unable to reproduce this with Orbeon Forms CE 2019.2. This is what I am seeing when running this form. If this doesn't help, I'd recommend you update your question to include a link to a minimal form that you are using to reproduce this, with steps to reproduce (and then post a comment, for notification).
It looks like the problem occurs when I use ‘Service performs search’ option set to ‘Yes’. Below you can see how it looks like in my form:
Source code of the form: here
I have a listview that I only want filtered on the server-side. I have implemented code very similar to this example:
http://demos.jquerymobile.com/1.4.0/listview-autocomplete-remote/
The problem is, I do not want jQuery Mobile to filter the results after I have already filtered them on the server because it will hide valid results from the user.
For example my requirement is that '%' (percent sign) is a wild card in the search text. So if I entered '%PP%', an item with the name "APPLE" will be returned in the results. BUT, jQuery Mobile comes after me and says, "No-no-no, APPLE is filtered out because it does not contain the percent signs!"
I've thought about removing the data-filter="true" and placing my own filter bar on top of the listview myself. But, that seems like overkill if I could find a way to make this work.
Bottom line: How do I stop jQuery Mobile from re-filtering the results that I have already filtered?
You could use the filtercallback option and just always return false:
$(".selector").filterable('option', 'filterCallback', function(idx, searchValue){
return false;
});
I am implementing a “have not yet viewed” list where the user sees a list of items in a ul and those the user has not viewed have a data theme applied to highlight them. When the user clicks on the item it is displayed, and I need to remove the data theme so the item is no longer highlighted.
I have the logic correct to actually remove the attribute as I can see in the Elements section of Chrome’s Developer Tools the attribute is no longer in the li. But the highlight is still visible in the rendered page.
I’ve searched and have seen a number of suggestions involving refreshing the page, list, etc., all to no avail. You can see some of the attempts as follows (in the function "this" is the li):
$(this).removeAttr("data-theme");
//$(this).closest("ul").listview("refresh");
//$(this).closest("ul").listview();
//$('#mylist').listview();
//$("#content-notifications").page();
//$("#content-notifications").page("destroy").page();
//if ( $("#content-notifications").data("page") ) {
// $(this).closest("ul").listview("refresh");
//};
Anyone have the correct solution, because I can’t find it!
Thanks-
Matt
You have to manually remove the class for the old theme in li and add the class for new theme.
$(document).on("click","li",function(){
$(this).attr("data-theme","b").removeClass("ui-btn-up-a").addClass("ui-btn-up-b")
});
Demo here - http://jsfiddle.net/ENYxw/
I have a messaging function in my site that when a user clicks on a reply button they get redirected to the message and have the textarea focus based from the anchor link.
so the link structure is like this:
view_message/4fad37da1df#reply
thanks
Try:
if (window.location.hash) {
$(window.location.hash).attr("tabindex", -1).focus();
}
It should check if the url has a hash in it, and if it does, give the target the tabindex attribute with a value of -1 and apply focus.
See https://stackoverflow.com/a/6188217/430191 for the reason for the tabindex attribute (a related issue about keyboard focus in IE/Chrome/Safari)
I have a select option list and im using jQuery Mobile. My list is very long so Id like to give users the option of searching the list by typing in text.
Is there some native / jQuery Mobile way of adding a text search when you focus on the list? If not I guess instead on an input ill need to create a link to a new page with a filter list, and use javascript to populate the 'input' with the value selected.
http://jquerymobile.com/test/docs/lists/lists-search.html
The short answer is no, unless you want to go nuts editing the JQM code to add that feature to the select box. That being said, I also had this problem (with the select menus being way too long), and here's what I did:
For one scenario, I used an autocomplete search box (that had results drop down: http://jqueryui.com/demos/autocomplete/) in addition to the select menu, populated with the data in the select menu. That way the user could choose whether to use the select menu or search.
For a second scenario, I allowed the user to search for something, then brought up a menu (really a dialog plugin) with only the results that matched what they searched for.
Hope this helps.
Personally, I could not get the jqueryui autocomplete to work well with jQuery Mobile. But this autocomplete code from Andy Matthews worked well:
http://www.andymatthews.net/code/autocomplete/
Used in conjection with an input text field, it provides a way for users to type in a few characters and see a list of choices to select.