Morning - I'm having a little problem.
I have an autocomplete extender textbox where a user types in words and suggestions are provide. Should the term be rather generic, a list appears and the user can scroll up or down using the mouse wheel with no problems at all.
However, if the user attempts to click on the scroll bar and scroll through the list, it fires the textchanged event - which I don't want it to do.
This event should only fire once the user has actually selected the appropriate product from the list supplied.
I can set the autopost back of the text file off which has the desired effect but I do require the post back to be performed once the user selects a suggestion.
Does anyone know how I can get around this?
I managed to find a resolution.
Stick this in the page load event:
string contactPostBackFunction = null;
contactPostBackFunction = Page.ClientScript.GetPostBackEventReference(this.tbxProdAC, "", false);
string contactPostBackScript = null;
contactPostBackScript = string.Format("function postBackOnContactSelectedFromDropDown() {0} {1} {2}", "{", contactPostBackFunction, "}");
Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "contactPostBackScript", contactPostBackScript, true);
And have this in your Autocomplete extender properties:
OnClientItemSelected="postBackOnContactSelectedFromDropDown"
Related
I believe I have found a bug in the Vaadin Grid that can be replicated with the code below.
I would like to save the grid's sorting order whenever it's changed and then restore it when the grid is loaded. The main issue is that the GridSortOrder list just keeps incrementing in size for the event in the sort listener rather than replacing the sortorder list. I believe this is a bug within Vaadin 14-20 because it only happens if I call setColumnOrder() in the reset method below (removing that call it works as expected). In other words calling setColumnOrder() seems to add the list of GridSortOrder to the event in the sort listener when it should be replacing it. This is actually also true if you do grid.getSortOrder() in the listener, meaning it's not just the event but also the grid that is compromised.
This can be replicated consistently with the code below. You will first need to change the sort order of Description column by clicking on the column header. Then just click on Reset button 5-10 times. Once this is done click on the Description column header to change the sort order one more time. The System.out for the listener will show a size of a list of 20 GridSortOrder instead of the expected 2 GridSortOrder. There will be replications of columns over and over.
Grid<Car> grid = new Grid<>();
grid.addColumn(Car::getName)
.setSortable(true)
.setComparator(Car::getName)
.setKey("Name")
.setHeader("Name");
grid.addColumn(Car::getPrice)
.setSortable(true)
.setComparator(Car::getPrice)
.setKey("Price")
.setHeader("Price");
grid.addColumn(Car::getDescription)
.setSortable(true)
.setComparator(Car::getDescription)
.setKey("Description")
.setHeader("Description");
grid.setItems(listOfCars);
grid.setColumnReorderingAllowed(true);
grid.setMultiSort(true);
grid.addSortListener(event -> {
System.out.println("Event: " + event.getSortOrder().size() + " : " + event.isFromClient());
System.out.println("Grid: " + grid.getSortOrder().size() + " : " + event.isFromClient());
});
defaultSort(grid);
Button resetButton = new Button("Reset", click -> {
System.out.println("Reset: " + grid.getSortOrder().size());
defaultSort(grid);
grid.setColumnOrder(
grid.getColumnByKey("Name"),
grid.getColumnByKey("Price"),
grid.getColumnByKey("Description"));
});
add(grid, resetButton);
private void defaultSort(Grid grid) {
grid.sort(List.of(
new GridSortOrder<>(grid.getColumnByKey("Name"), SortDirection.ASCENDING),
new GridSortOrder<>(grid.getColumnByKey("Price"), SortDirection.ASCENDING)
));
}
If I remove grid.setColumnOrder() from the above then the List<GridSortOrder> works as expected and is two in the event listener. What's especially interesting is that event.getSortOrder().size() will increase by 2 every time the resetButton is clicked (but you'll only see it in the sort listener). It doesn't matter if the setColumnOrder() is before or after the call to defaultSort().
With that in mind if you debug grid.setColumnOrder() it seems to call updateClientSideSorterIndicators(sortOrder) which is what I believe is the cause and is where it's being added to the GridSortOrder list. That being said I'm not sure how to proceed from here so that I can reset the grid's setting when clicking on the Reset button.
FYI: This is an issue for me because I'm trying to save the state of the Grid to the database so that when the user reloads the screen (a very complex one) all their grid settings including the sorting order, the column order, and so on are preserved. However with this bug it's impossible to save the sorting order.
PS: This seems to be true in both Vaadin 14 and Vaadin 20.
I have the following:
$(document).on("pageinit", function (event) {
alert("pageinit called");
$('#logout').bind('click', function() {alert("clicked!");});
});
The first time the page runs you get a single alert 'pageinit called'. Clicking the element with id #logout fires the alert 'clicked!'. If I click any other links in this page I still get the 'pageinit called' alert (and I get it multiple times, apparently for each page I have previously navigated as well) but subsequently the handler for #logout is gone and never never re-established.
Can anyone tell me how I can get the handler for #logout to remain? I've tried:
$('#logout').die('click').live('click', function() {alert("clicked!");});
to no avail.
After looking more closely (and as commented by Omar), this problem is caused by a combination of the jquery mobile paging system AND trying to attach to a 'single' element by id.
In my case each time I clicked a link within the page it would load into the jqm paging system a separate page, each one containing its own #logout element. My solution was to query for all the buttons and attach handlers to each one:
var buttons = $("*[id='logout']");
buttons.each(function() {
// handle click or whatever here
});
Instead of:
var button = $('#logout'); // Only hooks into the first #logout element
I'm using AIR 2.0 (soon will be updating to 3.3 with Flash CS6) to create an iPad app. We have textfields (Classic, dynamic) which sometimes contain one or multiple htmlText links which need to be clickable. In the desktop version of the program, all text is selectable and the links are easily accessed. My problem is that it takes me mashing the link like 20 times on the iPad before it will recognize that there's a link and navigate to it in Safari. The other strange thing is that none of the text appears to be selectable - I can't get the iPad cursor, copy/paste menu, etc. to show up.
I think, from reading other threads, that the hit area for the URL is only the stroke on the text itself... if that's true, what can I do to increase the hit area? Or make text selectable? It was suggested elsewhere to put movieclips behind the URLs but that's not really possible as this is all dynamic text from XML files.
I've read about StageText but I gather this is only used for input fields, which is not the case here.
I'm reasonably advanced in AS3 but I'd prefer an easy solution over re-writing large chunks of code. At the moment the only thing I can think to do is get the URL and make it so that as soon as you touch anywhere on the textfield, it navigates to the link. But this would break down if there were more than 1 URL in a given textfield.
Any ideas?
I had this exact same issue, and it's had me flummoxed for a while.
Here's what I did to get the desired behaviour:
1) Instead of using a listener for TextEvent.LINK, listen for MouseEvent.CLICK (or TouchEvent.TAP) on the TextField.
eg.
var tf:TextField = new TextField();
tf.addEventListener(MouseEvent.CLICK, linkClicked);
2) In the linkClicked() handler, you use getCharIndexAtPoint() to determine the index of the character that was clicked, and then from that determine the URL from the TextFormat of the character. This is adapted from a post by Colin Holgate on the Adobe Forums (http://forums.adobe.com/thread/231754)
public function linkClicked(e:MouseEvent):void {
var idx:int = e.target.getCharIndexAtPoint(e.localX, e.localY);
trace("Tapped:",idx);
var tf:TextFormat = e.target.getTextFormat(idx);
if(tf.url != "" && tf.url != null) {
var linkURL:String = tf.url;
trace(linkURL);
// Hyperlink processing code here
dispatchEvent(new UIEvent(UIEvent.LINK_TAPPED,tf.url));
}
}
3) The last line (dispatchEvent()) is sending a custom event to another function to process the link, but you could easily inline your code here.
I've tested on an iPad 3 running iOS6.1, building with AIR3.5. Links are much more responsive, and I don't find myself mashing the screen trying to hit the stroke of the text!
I have a webpage with multiple jqgrids each with inline editing enabled, "action" column (edit icons) enabled and pager disabled. I need to handle the delete event for each row so that I can process the delete without reloading server-side data. I've looked at the approach mentioned in jqGrid Delete a Row and it's very helpful except I have two questions that are stumping me -
Are there more details around the rp_ge parameter in the delOptions.onClickSubmit event?
My column has the delOptions set as this -
delOptions: {onclickSubmit: function(rp_ge, rowid) {return onRowDelete(rp_ge,rowid);}},processing:true }},
Is there a way to get the grid id from within that event? I'd like to have a generic function that I can use to handle delete events from all the grids on the page. The rp_ge parameter has a gbox which sometimes contains the grid id appended? But I have no idea what it is since i'm not able to figure out when it's populated, when it's not.
function onRowDelete(rp_ge, rowid) {
//hardcoded grid id.. don't like it.
var gridid = '#Grid_X';
//what is this gbox?? can i get grid id predictable from it?
//var gridid = rp_ge.gbox.replace("#gbox_", "");
var grid = $('#Grid_X');
rp_ge.processing = true;
var result = grid.delRowData(rowid);
if (result) {
$("#delmod" + grid[0].id).hide();
}
return true;
}
In the jqGrid Delete a Row approach, the code $("#delmod"+grid[0].id).hide(); is hiding the popup delete confirmation dialog manually. What I noticed is that when the dialog pops-up, jqgrid de-emphasizes the background page (makes it light greyish). But after the popup is manually closed (hidden actually?), the background remains de-emphasized. So it looks like the page doesn't have focus (or even disabled). Any way this can be fixed? This can also be seen on the demo that Oleg wrote.
Any help would be appreciated.
(PS - I would've commented on the same post but I don't have enough points to comment on someone else's answer yet.)
In answer to your second point.
Several examples by Oleg such as this one have the following modification.
$("#delmod" + grid[0].id).hide();
is replaced with
$.jgrid.hideModal(
"#delmod"+grid_id,
{gb:"#gbox_"+grid_id,jqm:rp_ge.jqModal,onClose:rp_ge.onClose}
);
This will return focus after the delete operation.
I have two g:textfields
in the first one I should write a number lets say 12 and in the g:textfield next to it it should load the predetermined name for number 12.
The first one is named 'shipper' and the other 'shipperName'
Whenever I write the code 12 in the 'shipper' txtfield, it should return the name of the shipper in the 'shipperName' box.
Thanks in advance!
Examples:
If I write the number 12 it should return USPS
http://i53.tinypic.com/2i90mc.jpg
And every number should have a different 'shipperName'
Thanks again!
That's quite easy if you'll use jQuery. Check out the event handlers ("blur" is the one you want which occurs when the user leaves the numerical box).
For example:
$("#shipper").blur(function() {
$("#shipperName").load(
"${createLink(controller: 'shipper', action: 'resolveShipper')}?id=" +
$("#shipper").val()
);
});
The $(this).val() at the end is the value of the input field the user just left.
And the "ShipperController.resolveShipper" action would look something like this:
def resolveShipper = {
render text: Shipper.get(params.id).name, contentType: "text/plain"
}
There are other things you might want to do, like automatically filling in the shipperName field as the user types without leaving the edit field, probably after a delay. However the event handler stays the same, just the event is changing (from "blur" to "change" or something like this)
To relate two strings, it's easiest to use an object to create a dictionary/ map, as shown below;
$('#input1').bind('keyup',function() {
var map = {
"1":"One",
"2":"Fish",
"3":"Bar"
};
$('#input2').val(map[$(this).val()]);
});
You can see this in action here: http://www.jsfiddle.net/dCy6f/
If you want the second value only to update when the user has finished typing into the first input field, change "keyup" to "change".