I'm using Kendo UI and using declarative bindings to binda element on a form. It uses the combo box widget to search for a list of options. The widget is actually performing as expected, however the search is only requested when the value has changed (this makes sense). The issue I have is the change event is only firing when the user blurs the combo box (e.g. by clicking outside the input).
This is to be expected due to the DOM change event firing after blurring, however the Kendo UI docs state that by using the 'data-value-update' parameter you can specify the event to fire on 'keyup'.
Unfortunately I cannot get this to work, here is the combobox HTML
<input data-role='combobox' data-bind="value: comboBoxValue, events: { change: methodToDoSearch}" data-value-update="keyup" type="text" data-text-field='Text' data-value-field='Id' />
This is being created as part of a kendo ui template (although I have tested outside of the template so this should not make a difference)
Thanks in advance.
The data-value-update attribute is supported only for vanilla textboxes (<input type="text" />). Kendo ComboBox raises its change event only when it loses focus.
Specifically, the data-value-update is only meant to update the bound object the widget is applied to (when you enter something into the widget, the observable is updated with the value on the given event. In this case, keyup).
I.E., because the combobox widget can only be set to one of the combobox datasource values, it doesn't make sense for the observable to bind to a temporary non-combobox-value.
I haven't tried this, but what events can you bind to via the events binding? The Kendo demos show mouseover, click, etc. Perhaps try something like this:
<input data-role='combobox' data-bind="value: comboBoxValue, events: { change: methodToDoSearch, keyup: methodToDoSearch}" type="text" data-text-field='Text' data-value-field='Id' />
In general, what event do you want to fire on keyup? If you'd like to do some manual searching to change the datasource of the combobox on keyup, that's what I'd look in to.
Related
In polymer I'm trying to manually submit a form. My form looks like this:
<form id="myForm" on-submit="{{ submitForm }}">
<input class="text" value="{{ someValue}}">
<button type="submit">Submit</button>
</form>
And in the polymer object I have:
submitForm: function(e) {
e.preventDefault();
}
Whenever I try to do the following:
document.getElementById('myForm').submit();
the form totally ignores the on-submit attribute and posts the form to a new page.
I'm building a on-screen keyboard for anyone wondering why I would want to do this. I need to submit the form whenever someone hits the enter key on the on-screen keyboard.
Does anyone know why this happens?
A JSBin example to show you the exact problem (see the alerts): http://jsbin.com/wadihija/2/
From the MDN page about submit:
The form's onsubmit event handler will not be triggered when invoking this
method ... it is not guaranteed to be invoked by HTML user agents.
However, calling click on a submit type button seems to work. See here:
http://jsbin.com/tuxac/2/edit
Here is a modification of your jsbin that I believe does what you want:
http://jsbin.com/wadihija/6/edit
Is this along the lines of what you're trying to do? This is a result of a key feature of Shadow DOM: Encapsulation. The elements in your polymer-element's template are not in the main document, and as such, are not available via document.getElementById() and the like.
You could instead call this.shadowRoot.getElementById() and it would work because this inside of your polymer-element's prototype is linked to the host element. Or even better, take advantage of the amazing features Polymer gives you for free. Polymer exposes this.$ to polymer-elements, which contains a key for every element in your template that has an ID! No method call needed, just use this.$.myForm.submit(). Here's the final jsbin.
When i click on an <input type=text>, a list of old values appear. If I chose one of them with the mouse, the event "change" from jQuery doesn't trigger.
What event should/could I use to detect this?
You have to use oninput event, using jquery:
$('#myinput').on('input',function(){
//your code here
});
change will only trigger if field loose it's focus (blur event). And the term old values appear is browser feature that remembers form data for fields with same name. You can not trigger change event with that. You need an alternate event like paste , input.
$("#field").on("input DOMAttrModified paste",function(){
});
I'm not sure of event. You can try some though.
On the calling page, I bind my fancyBox using an href, like so:
<a id="myId" href="myContent.cfm">Click me</a>
<script>
$(document).ready(function(){
$('a#myId').fancybox({
// my initialization params
});
});
</script>
In myContent.cfm, a default "filter" is built, which has add and delete buttons. Something like this:
<div id="fd_0" class="eachFilter blank">
<select name="filterBy" class="fl filterBy">
<option selected="selected">-- Add a Filter --</option>
<!--- add more options --->
</select>
<button type="button" class="addFilter default" title="Add a filter to the current filter set.">+</button>
<button type="button" class="deleteThisFilter default" title="Delete this filter from the current filter set.">-</button>
</div>
When the addFilter button is clicked, a new "default" filter is added to the dom after the filter that was clicked, using consecutive ids. Conversely, clicking the deleteFilter button causes that filter to be deleted and all remaining filters to have their ids renumbered; with the exception that there must be one filter remaining. My original code used .live() to attach event handlers to the newly created elements, like so:
$('.addFilter).live('click', function(){
// get number of existing filters
// create new blank filter
// add to the dom after the filter whose button was just clicked
});
$('.deleteThisFilter).live('click', function(){
// if there is more than one existing filter, use .remove() to remove the parent .eachFilter div
// renumber the existing filter ids consecutively
});
After the user has created all the "filters" they need, they may either "apply" them, which closes the fancybox and reloads a grid with the new, filtered parameters, or simply cancel and close the fancybox.
This all works fine the first time, and on reopening the fancybox, the initial blank filter's add button works as expected. However, after adding a second filter, any filter that was added to the dom has multiple event handlers added to the addFilter and deleteFilter buttons. If I added one filter the first time, then return to the fancybox the second time, then add a filter by clicking on the default filter's add button, then click on the newly created filters add button, two more filters are added. If I close, reopen the fancybox a second time, add a filter, and click on that filters add button, three more filters are added.
So here's what I've tried so far:
1) Changing the .live() calls to
$(document).on('click', 'addFilter', function(){ // add my filter code});
2) Putting the code to create the filters into a function, which at the end uses .bind() to add the event handlers to the newly created filters; followed by using
$('.addFilter').unbind('click', fnCreateMyFilter())
on closing the fancybox.
3) Using .live() ONLY on the newly created filter elements, and a regular click handler on the default element
4) Upgrading jQuery to 1.8.3 from our current version
5) Calling .remove() on all elements inside the fancybox .onClosed function (although I was under the impression that closing fancybox does actually remove the elements from the dom).
Any thoughts?
As always, it's the most obvious thing which isn't readily apparent. Moving the .js code out of the popup into its own file fixed the problem, which is something that I had intended to do after getting all the code to work.
I was using a combination of Fancybox2 http://fancyapps.com/fancybox/ and Noty popups http://needim.github.com/noty/ and having a similar problem.
I loaded a product edit form into a fancybox via ajax using class='fancybox.ajax' in the href link.
Everything saved fine when I clicked my save button until I reloaded another (or the same) product in fancybox.
I was using this code to trigger my save buttons:
$(document).on("click",".save_product_button",function(){
... post to ajax file to save info
});
Using that triggered multiple noty popups and saves (once for each time I'd loaded a fancybox since refreshing), because the save button was already loaded in the document model that many times. (I guess??)
But when I changed my on() to the save button's immediate parent, all my problems went away.
$("#productBox").on("click",".save_product_button",function(){
... post to ajax file to save info
});
Everything saved once from then on.
Plus, that should make the code a tad quicker.
Hope this helps someone not waste half a day like I just did.
I am designing a checkbox for a for and I absolutely cannot have the checkbox to toggle when the user clicks on its label, as this label contains a link to open a small infobox where the user gets to know what he or she is accepting by selecting the checkbox.
How can I disable checkbox toggle when clicking on its label?
The code looks simply like this (this element is inside a FormPanel items list:)
{
xtype:'checkbox',
id: 'privacyCheck',
fieldLabel: 'I have read, understood and accepted the privacy policy of ABCDE'
}
Instead of using the boxLabel property or field label on the checkbox, create a separate label object next to the checkbox. This should make it easier to manipulate your handler for the label. Otherwise, you will need to dig through the appropriate DOM element for the boxLabel (not pretty) to get at it.
I know, this topic is rather old, but I found it, searching for a solution to the exact same problem. So I'd like to share.
I needed to modify the browsers behaviour to mimick the behaviour of a legacy site, while making said site "accessible". (The for-attribute of the label tag is needed and a label without a for-attribute can not be used.)
I don't know about ExtJS, but since the legacy site uses jQuery in the frontend, I solved the problem this way:
//[...]
$(document).ready(function () {
$('.donotToogleCheckbox').click(function (event) {
event.preventDefault();
// do other stuff like displaying a dialog or something
})
});
//[...]
<label class='donotToogleCheckbox' for='myCheckbox'>DaLabel</label>
<input id='myCheckbox' name='myCheckbox' type="checkbox">
//[...]
Hi i have a few form fields i want the on click of button a the control to be sent to action 1 but
on click of button 2 it has to be sent to action 2. Currently i am using js to change the form action dynamically on click. but is there any other solution. I cant do the checking after submit in a same method thet have to be two different methods.
The 2 buttons in this case are view(html data needs to be displayed) and download(same data as csv file). I am using cakephp 1.2 but i feel this is more of a generic problem
One form can only have one action. This is a limitation of HTML. To work around it on the client-side, you need Javascript.
It sounds like the better idea would be to give each submit button a distinctive name and value. This will be submitted like other form elements, so you can detect in the Controller which button was clicked. From there it should only be a matter of switching some View logic in the controller between normal output and download.
I found out there are few solutions
Regular JavaScript to change th form action on click of the buttons
AJAX to send the data to two separate actions on click of separate buttons
As suggested by deceze to do the processing on server side(which was not easily possible in my case)
HTML5 has a formaction attribute for this
<form action="/url" id="myForm">
<input type="submit" value="save1" formAction="/url1" />
<input type="submit" value="save2" formAction="/url2" />
</form>
Here is a fallback if you need it.
if (!('formAction' in document.createElement('input'))){
$('form').on('click', 'input[type=submit]', function (e) {
var attr = this.getAttribute('formAction');
if (attr) {
this.action = attr; //Set the form's action to formAction
}
});
}