I am trying to pass event data to a jQuery datepicker event handler, for 'dataID':
input.datepicker({
onClose: function() {
var datePicker = jQuery(this);
customFunction(datePicker, dataID);
}
});
Does anyone know how to do that?
Pass the current object as:-
input.datepicker({
onClose: function(txt, obj) {
var datePicker = obj;
customFunction(datePicker, datagridId);
}
});
onClose method gives two arguments. The text entered and the this instance where the event occurs.
Check the reference here
http://api.jqueryui.com/datepicker/#option-onClose
Related
I couldn't find any solutions for my problem yet. Maybe I used wrong keywords.
I'm trying to update the value of an input field onchange after a .load() action has been performed.
Here is my script:
$(document).on("change",".myInput",function() {
var value = $(this).val();
$('#actionDiv').load("someAction.php?value="+value, function() {
$(this).val('OK');
});
});
So, after someAction.php has been loaded into #actionDiv successfully, I'd like to change the value of that input field, that has been changed.
I have several input fileds, which take this kind of action...
It seems "$(this)" is unknown in the function after load() has been completed.
Can anyone please help?
Thanks
You need to store a reference to the element, or use an arrow method which doesn't change the value of this
$(document).on("change",".myInput",function() {
var that = this;
var value = $(that).val();
$('#actionDiv').load("someAction.php?value="+value, function() {
$(that).val('OK');
});
});
OR
$(document).on("change",".myInput",function(e) {
var value = $(e.target).val();
$('#actionDiv').load("someAction.php?value="+value, function() {
$(e.target).val('OK');
});
});
OR
$(document).on("change",".myInput",function() {
var value = $(this).val();
$('#actionDiv').load("someAction.php?value="+value, () =>{
$(this).val('OK');
});
});
I have a kendo Obervable as follows:
var ViewModel = kendo.observable({
ID: 1,
TITLE: "SomeValue",
});
and then I have bound this as follows:
kendo.bind($(".bind-view"), ViewModel );
Now there is button on the page. When clicked I need to check if there are any changes to this ViewModel.
I have tried
$(".ClearAnalysisInfo").on('click', function (event) {
ViewModel.bind("change", function (e) {
//Some code
});
});
But I'm not able to get this ViewModel property whether it changed or not.
Binding the ObservableObject's change event of inside the button's click handler is too late. You need to do that immediately after the ObservableObject is created.
Inside the change handler, you will receive information about the changed field. Use this information to raise some JavaScript flag or save the details you need, so that you can use them later in the button's click handler.
var viewModelChanged = false;
var ViewModel = kendo.observable({
ID: 1,
TITLE: "SomeValue",
});
ViewModel.bind("change", function (e) {
viewModelChanged = true;
});
$(".ClearAnalysisInfo").on('click', function (event) {
if (viewModelChanged) {
// ...
}
});
I'm having a problem with this code:
$(function () {
$('#city_input').autocomplete({
onSelect: function (suggestion) {
alert(suggestion.data);
window.latlng = suggestion.data;
}
});
$('#fs_input').autocomplete({
params: { "latlng" : window.latlng, "latlng2" : '99.9999,-99.9999' },
onSelect: function (suggestion) {
alert(window.latlng);
}
});
});
This is an autocomplete script. First the user selects a suggestion on #city_input. Doing that, it sets the value for window.latlng.
Then next, the user needs to select a suggestion on #fs_input. The problem I'm having is that, in the "params" property, the "latlng" : window.latlng property is not being set. Just for tests, I also created another property, seen in the code, latlng2 which is working fine. Also, a little below, I'm doing an alert(window.latlng) to check the value and it alerts the expected value.
So the question is, why "latlng" : window.latlng is not being set? Maybe I'm not supposed to pass a variable to an object liberal property?
It is being set. It's simply that it has no value at the point when you're setting it.
The value isn't computed dynamically after #city_input's onSelect callback fires, it's being computed once when the script first loads, long before you ever assign to it.
$('#city_input').autocomplete({
onSelect: function (suggestion) {
alert(suggestion.data);
# you assign here, in a callback that executes some time after the page loads
window.latlng = suggestion.data;
}
});
$('#fs_input').autocomplete({
# however, you *read* the value here, immediately on page load, long before `onSelect` ever runs
# window.latlng is "undefined" at the point `params` is created.
params: { "latlng" : window.latlng, "latlng2" : '99.9999,-99.9999' },
onSelect: function (suggestion) {
alert(window.latlng);
}
});
If you want a value selected in the onSelect callback to be used in the autocomplete for a different element, you need to wait to initialize the autocomplete until after a value is selected and actually available:
$('#city_input').autocomplete({
onSelect: function (suggestion) {
alert(suggestion.data);
window.latlng = suggestion.data;
$('#fs_input').autocomplete({
params: { "latlng" : window.latlng, "latlng2" : '99.9999,-99.9999' },
onSelect: function (suggestion) {
alert(window.latlng);
}
});
}
});
In your code, I'm guessing that the onSelect function doesn't execute until a user has selected an item. However, the 'params' object is created when the autocomplete function is invoked, which is immediate (before a value has been assigned).
You need to initialise autocomplete on #fs_input only when you know the value of window.latlng (i.e. after the user has selected it):
$(function () {
$('#city_input').autocomplete({
onSelect: function (suggestion) {
alert(suggestion.data);
window.latlng = suggestion.data;
$('#fs_input').autocomplete({
params: { "latlng" : window.latlng, "latlng2" : '99.9999,-99.9999' },
onSelect: function (suggestion) {
alert(window.latlng);
}
});
}
});
});
I have an event listener setup using jQuery like this:
$(document).on('my-custom-event', function(e, custom_id) {
console.log('the ID is: ' + custom_id);
});
It is easy to trigger this with jQuery.trigger, like this:
$(document).trigger('my-custom-event', '12345');
But I am trying to figure out how to trigger it with vanilla javascript, and also ensure that custom_id gets passed properly.
For example, this does not work. It triggers the event, but does not pass the custom_id argument:
var e = new CustomEvent('my-custom-event', 'asdf')
document.dispatchEvent(e)
How can I use plain javascript to trigger the event and also pass the custom_id argument?
According to MDN, detail can be used to pass data when initializing the event.
Here is an example:
// add listener
// let's be cool and add it to the document for this example
document.addEventListener('EVENT-NAME', function (e) {
// do something
// use e.detail for the data
});
// create event
var event = new CustomEvent('EVENT-NAME', {
detail: 'legit data'
});
// dispatch event
document.dispatchEvent(event);
I have also created a demo: http://jsfiddle.net/dirtyd77/02p2o7ut/1/
Hopefully this helps and let me know if you have any other questions!
EDIT:
Unfortunately, there is no way (that I know of) to do what you are asking, however, there is a workaround.
jQuery events have a property called originalEvent. You could check to see if that value exists in the event that custom_id does not. Here is how you could do this:
DEMO: http://jsfiddle.net/dirtyd77/02p2o7ut/2/
$(document).on('my-custom-event', function (e, custom_id) {
// if custom_id not defined, will check e.originalEvent.detail
custom_id = custom_id || e.originalEvent.detail;
console.log('the ID is: ' + custom_id);
});
// trigger jQuery event
$(document).trigger('my-custom-event', '12345');
$('#customEvent').click(function () {
// create event
var event = new CustomEvent('my-custom-event', { detail: '12345' });
// dispatch event
document.dispatchEvent(event);
});
I've a function that is triggered from a on click event. It's open up my popup, and im woundering how to send my date to my 'popupbeforeposition'.
module.selectedDay = function($this) {
var date = $this.data('date');
$('#popupWorkSelect').popup('open');
};
$('#popupWorkSelect').on({
popupbeforeposition: function (event) {
//Get date sended to this function?
console.log(event);
},
popupafterclose: function(event) {
}
});
I know that I can work with my 'module.selectedDay' function like this but it's not the way I want to do it.
module.selectedDay = function($this) {
var date = $this.data('date');
$('#popupWorkSelect').find('#myElement').innerHTML = date;
$('#popupWorkSelect').popup('open');
};
When the click happens, store the value in data of the popup.
$popup.data("mydata", date);
in the popupbeforeposition event, take it out from data and use it. (Here the context would be within the popup so data you need would lie in $(this). So the way of access would be this:
$this.data("mydata")
Demo : http://jsfiddle.net/hungerpain/LV9VW/3/
PS assume $popup and $this are the popup elements