I have been fiddling with a few lines of code for two days now and for some reason I cannot get it running.
What I want:
A user selects a relation from a combobox and subsequently must select a person from a list of persons filtered by the first combobox. If there is only one person, it must be selected outright. If it has more than one, I want the combobox to expand and of course show the list of retrieved persons. Sounds pretty simple.
The onRelationContactSelect() is code which is normally executed when a person is selected. Since the select event isn't triggered when setting a value manually, I simply call it by hand. I have the code in the callback of the load event to ensure the data is retrieved from the server. That is required to expand in the first place or select a record.
The problem:
When I have one record (records.length == 1) everything works like a charm. When I have more than 1 record, the combobox contactCombo fails to expand. I debugged quite a bit through the ExtJs internal code and the reason is that is has no focus. No matter what I try with calling contactCombo.focus(), it does not focus. Therefore it won't expand. To make it even more annoying I can expand another combobox with the following code:
function onRelationContactSelect() {
categorieStore.load({ callback: function(r, options, success) {
//debugger;
//categorieCombo.focus();
//categorieCombo.expand();
}});
categorieCombo.focus();
categorieCombo.expand();
}
As can be seen I call focus() and expand() outside of the callback but the mode of categorieStore is 'local'. The data in categorieStore is static but still retrieved from the server.
The code:
function onRelatieSelect() {
contactStore.baseParams = {"relatieId": relatieCombo.value };
contactStore.load({callback: function(records, options, success) {
if(records.length == 1) {
contactCombo.setValue(records[0].get('Id'));
onRelationContactSelect();
} else {
contactCombo.clearValue();
contactCombo.focus();
contactCombo.expand();
}
}});
openTicketRelationLabel.show();
gridTicketRelatie.show();
ticketRelatieStore.load({ params: {relatieId:relatieCombo.value}});
SetRelatieInfo();
SetContractsInfo();
setSfHoursOsab();
showRelationNotifications(relatieCombo.value);
}
I have tried for ages, but it seems I simply cannot focus a combobox from within the callback handler and outside of the callback handler I have no data yet.
Can anybody please help me out?
After sandboxing two different comboboxes I found the solution.
The solution turned out to be weird but simple:
categorieCombo.on('select', function() {
subcategorieCombo.focus();
subcategorieStore.load({ callback: function(r, options, success) {
subcategorieCombo.focus();
subcategorieCombo.expand();
} });
Focus before the load.
Focus again in the callback of the load.
The only dissatisfying about this solution except from needing to focus twice is that I have no clue whatsoever why this works, but it solved the problem for me.
Related
I have a table of rows where are dynamically added, but for some reason the on() event doesn't seem to fire when I change the value of a select.
For simplicity, I wrote the following jsFiddle. This is a VERY simplistic example of what I am doing. I do have to note that I was unable to verify if the jsFiddle failed the same way in IE7 because jsFiddle does not seem to work in IE7 at all.
The basics of my code are this...
First, the page loads with 1 or more of these rows, which represent a complex "subform" to be posted to Spring MVC. The subform has a group of 5 SELECT tags that have an event handler attached at the top TABLE as such:
$('#parentTable').on('change', 'div.additional div[class^="additional"] select', function() {
// ...enable/disable siblings according to value
}
At the bottom of the table is an Add button. When the user clicks it, I take the last visible row, clone it, use regex to fix the index on the name/id, and set all the fields blank and disables except one field, which is used to do a lookup. This all has the appearance of working.
The user enters a value in the lookup field, clicks Lookup, which performs an AJAX call, filling in the subform then calling the change on the selects to set their default state like so:
$subTable.find(':input:not(:button)').change();
This fires the above on() as expected. However, if I physically click on the resulting SELECTs and change their values the on() event handler is not called.
I have verified that the resulting cloned table row looks/smells/feels correct, at least from using IE8's Developer Tools (I have IE8 in IE7 compatibility mode for testing, because IE7 has VERY limited testing and the problem seems to be present there too). When I run this in Chrome it works perfectly fine, however I am aware the clone is technically working differently.
Any help would be appreciated.
Update
I tried swapping the selector to drop the class attr as suggested below:
$('#parentTable').on('change', 'div.additional div select', function() {
// ...enable/disable siblings according to value
}
And I tried all caps like the referenced post:
$('#parentTable').on('change', 'div.additional div[class^="ADDITIONAL"] select', function() {
// ...enable/disable siblings according to value
}
The first worked the same way, the second did nothing at all (disabled all on() change handling).
Will continue to play with this until I get it working. There has to be something simple going wrong here.
Update 2
I tried adding a class to all the `SELECT`s, and added the following two:
$('select.addedClass').on('change', function() {
alert("Select change:" + $(this).val());
});
$('#parentTable').on('change', 'select.addedClass', function() {
alert("Select change 2:" + $(this).val());
});
Here is the process I performed:
Reloaded page, both alerts fire for the single row there
Added a row
Performed AJAX lookup, which calls $addedTable.find(':input:not(:button)').change(); as described above, both events fire
Change the value of one of the selects, neither alert fires.
I would expect the first to fail, since the event listener is connected directly to the SELECT and not a higher level parent, but the second one fails the same way. So, in the Developer Tools, I tried to run the following:
$('#order.itemList1.additionalLine1').change()
Which is the ID of one of the selects I added, and still nothing fired. It's as if the event handler is ignoring all added SELECTs.
To make sure the select was working on the on(), I did this in the console after I added the new row:
$('#parentTable').find('div.additional div[class^="additional"] select').each(function() {
alert($(this).attr('name') + '(' + $(this).prop('id') + ')' + ' : ' + $(this).val());
});
Update 3
I ended up putting in a horrible hack that, for IE7 only, drops and re-adds the change handler directly on the SELECTs. It's ugly, but I have to support IE7, so...
I am leaving this open to see if anyone has a better solution, or might know why it's not working.
The problem isn't the change event, or the delegation on select elements.
It's the attribute selector:
div[class^="additional"]
IE7 and below don't do attribute selectors.
I've done a bit of searching and a few people seem to think this can be solved using case-specific syntax.
(Follow on questions from Placeholder Hidden)
I'd like my form to validate existing data when it is loaded. I can't seem to get that to happen
I jQuery.each of my controls and call focus() and blur(), is there a better way than this? I tried to call ctrl.checkValidity(), but it wasn't always defined yet. When it was, it still didn't mark the controls.
I seem to have a timing issue too, while the focus and blur() fire, the UI does not update. It's as if the Webshims are not fully loaded yet, even though this fires in the $.webshims.ready event.
I also tried to call $('#form').submit(), but this doesn't fire the events as I expected. The only way I could make that happen was to include an input type='submit'. How can I pragmatically case a form validation like clicking a submit button would?
Here's a jsFiddle that demonstrates the problem. When the form loads, I want the invalid email to be marked as such. If you click the add button it will be marked then, but not when initially loaded. Why?
Focus and blur in the control will cause it to be marked.
BUT, clicking ADD will too (which runs the same method that ran when it was loaded). Why does it work the 2nd time, but not when initially loaded?
updateValidation : function () {
this.$el.find('[placeholder]').each(function (index, ctrl) {
var $ctrl = $(ctrl);
if( $ctrl.val() !== "" && (ctrl.checkValidity && !ctrl.checkValidity()) ) {
// alert('Do validity check!');
$ctrl.focus();
$ctrl.blur();
}
});
}
I see this in FF 17.0.5. The problem is worse in IE9, sometimes taking 2 or 3 clicks of ADD before the fields show in error. However, I get errors on some of the js files I've liked 'due to mime type mismatch'.
This has to do with the fact, that you are trying to reuse the .user-error class, which is a "shim" for the CSS4 :user-error and shouldn't be triggered from script. The user-error scripts are loaded after onload or as soon as a user seems to interact with an invalid from.
From my point of view, you shouldn't use user-error and instead create your own class. You can simply check for validity using the ':invalid' selector:
$(this)[ $(this).is(':invalid') ? 'addClass' : 'removeClass']('invalid-value');
Simply write a function with similar code and bind them to events like change, input and so on and call it on start.
In case you still want to use user-error, you could do the following, but I would not recommend:
$.webshims.polyfill('forms');
//force webshims to load form-validation module as soon as possible
$.webshims.loader.loadList(['form-validation']);
//wait until form-validation is loaded
$.webshims.ready('DOM form-validation', function(){
$('input:invalid')
.filter(function(){
return !!$(this).val();
})
.trigger('refreshvalidityui')
;
});
I have a text field that is apparently successfully calling delegate methods as the following method fires when I tap on the test field, but no keyboard shows.
- (BOOL)textFieldShouldBeginEditing:(UITextField *)textField
{
NSLog(#"should begin editing");
return YES;
}
Any ideas as to why?
A couple of details: This text field happens to be in a view controller in a storyboard. The first time I segue to this view the text field works fine. The subsequent times I segue to this view it does not work. I imagine this is a big clue to why I am getting the described behavior, but I have not been able to figure it out yet.
I fixed the issue by adding the code below to the prepareForSegue: method. Seems to work.
if (_textField.isFirstResponder) {
[_textTextField resignFirstResponder];
}
I'm using an html select element as an active menu. When you select an item from it, it does an action and then in some cases, a side effect of the action is resetting the value of the menu to something else.
function onMenuChangeHandler() {
var menu = $('#menu');
var menuChoice = menu.val();
if (menuChoice == ...) {
...
menu.blur(); // ensure change handler doesn't get fired again
menu.val(OTHER_VALUE); // **
}
};
This works fine on the desktop in multiple browsers and works fine on iOS5. It inexplicably stopped working on iOS6. The result is that it acts as if the line marked ** above is not there.
It works fine in any case where I don't set the value.
FYI: There's another change in iOS6 which seems unrelated to this but mentioning it just in case. When the menu is selected, it now dismisses the picker immediately rather than leaving it open. This is how it works on every other platform. If you have more more than one select element, you still get the non-standard behavior.
I spent a lot of time trying to track this down and eventually discovered that the problem is that iOS6 sets the value of the control a second time after my change handler exits. If I put in alerts, I can clearly see that the control changes to the OTHER_VALUE (underneath the alert). Then when I dismiss the alert, the control reverts. (Without the alert, the change happens too fast to see.)
So here's a workaround:
function onMenuChangeHandler() {
var menu = $('#menu');
var menuChoice = menu.val();
if (menuChoice == ...) {
...
setTimeout(function() {
menu.blur(); // ensure change handler doesn't get fired again
menu.val(OTHER_VALUE);
}, 1);
}
};
Maybe someone else has a better answer or a better explanation.
I am using Jquery plugin http://timeago.yarp.com/ for showing time.
Issue is timeago will not take effect for dynamically generated items.
$(document).ready(function() {
$(".timeago").timeago(); // works perfectly fine for the items which are loaded on page load
//$(".timeago").live(timeago()); // gives me an error ie timeago is not defined
//$(".timeago").live($(".timeago").timeago()); // gives me an error too much recursion.
jQuery.timeago.settings.allowFuture = true;
});
From some google search I got to know something ie:
Using live is the same as using bind, except that it is limited only to the events click, dblclick, keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover, and mouseup.
Now how can do it cause I dont have any click event? How can I bind this?
.live() and .bind() assign callbacks to event. In your case, you don't have an event to assign the function to and so it fails.
You can, in theory, assign your callback to a custom event. You will however have to manually trigger the event (using .trigger()) whenever your item is generated. For example:
$("abbr.timeago").live("timeago", function() {
$(this).timeago();
});
// ... and in the bit that generates your item
$new_item.trigger("timeago")
Demo: http://jsfiddle.net/ZjuW4/9
Of course, using .live() in this situation is purely academic and does not really serve a good purpose.
If you do have access to the code that's generating the items, you can simply chain in the call to .timeago() as the items are generated, i.e. http://jsfiddle.net/ZjuW4/3/
take a look in this topic
here was discussed how to put timeago on dynamically loaded items
for example the results of an ajax request.
Activate timeago on newly added elements only
PS: allowFuture does not have anything to do with putting timeago on newly created items on your page. it just allows dates in the future (f.e. "in 3 days", "next week")