How to attach a blur event for #(Html.Kendo().DatePicker()? - javascript

i have a datepicker and i want to get the value if the user modify the datepicker manually without exit the datepicker.
Thanks

So do you want the value whenever someone changes the value or the value that is posted by the user in the end?
if not you could do something like:
function onDatePickerChange() {
var DateVal = $(".classofdatepicker").val();
}
If you want to post this to the page you should:
function checkMaySend() {
var url = "/MyVeryOwn/UrlIPostTo";
var DateVal = $(".classofdatepicker").val();
var data = { DatePickerValue: DateVal};
}
var jqxhr = $.post(url, data, function () {
//Do something on post here if needed
})

this is my telerik comosant <td>#(Html.Kendo().DatePickerFor(model => model.DateRecherche).Max(DateTime.Today).Events(e => e.Change("LancerRecherche")))</td> if users type date without exiting the composant i want the get the value typed when i submit .

Related

How to add data from localStorage into an input box?

I am trying to pass data from an input field on one page to an input field on a second page.
Using localStorage I am able to get the data and then output it as an alert on the target page.
<script>
function setValue() {
var parseAmount = document.getElementById("amount").value;
localStorage.setItem("amountKey", parseAmount);
}
</script>
However, I need the stored data to populate this input field:
<input type="number" class="" id="demo2" value="3000"/>
My best effort so far is:
<script>
function getValue() {
var parseAmount2 = localStorage.getItem("amountKey");
document.getElementById("demo2").value = parseAmount2;
}
</script>
Any help would be greatly appreciated!
Items from localStorage are defined as strig, your input is defined as number, try parseInt (and do you invoke getValue()?):
function getValue() {
var parseAmount2 = localStorage.getItem("amountKey");
document.getElementById("demo2").value = parseInt(parseAmount2);
}
getValue();
Once the content on the page loads, you can load the value into the page.
/* modern browsers - will execute code once all elements are loaded onto the client */
window.addEventListener('DOMContentLoaded', (event) => {
// content is loaded, load the value from storage
getValue(); // call the function to perform
});
function getValue() {
var parseAmount2 = localStorage.getItem("amountKey");
document.getElementById("demo2").value = parseAmount2;
}
https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event

I get 'Bad assignment' when trying to use $(this) inside function after .load() method

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');
});
});

Why is this jQuery submit event not triggering correctly?

I am trying to create a function that takes a user's input and uses it to search Wikipedia. Then, at least for now, show the first result by appending it to the element call "#list".
I have tested the API, the JSON syntax, the appendTo syntax all independently and confirmed that they are working fine. But the event does not execute.
$('form').submit(function(event)
{
var $input = $(event.target).find('input');
var search = $input.val();
$.getJSON("https://en.wikipedia.org/w/api.php?action=query&format=json&list=search&titles=Main+Page&srsearch="+search+"&srprop=wordcount%7Ctimestamp%7Csnippet%7Ctitlesnippet",
function(data)
{
var item = data.query.pages.search[0].titlesnippet;
var itemDesc = data.query.pages.search[0].snippet;
var html = $('<li>').html(item+"<br/>"+itemDesc);
html.prependTo('#list');
});
});

send value from popup('open') to 'popupbeforeposition'

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

How can I pass args to event handler?

How can I pass args to the event handler function? This runs the function on page load which is not the desired effect. I need this routine validateText to run against several different textbox, dropdown combinations. Can I reuse validateText instead of creating one per text/dropdown combination??
//add blur event handler to the textbox with jQuery when the page is finished loading
$(document).ready(function() {
$("#myTextbox").blur(validateText($("#myTextbox"), $("#Select1")));
})
function validateText(textbox, dropdown) {
var message = $("#message");
var isValid = false;
//get the value the user type in
var textboxValue = $(textbox).val();
//get the options from the lookup
var options = $("option", dropdown);
//loop through the options and compare it to "value"
options.each(function() {
var optValue = $(this).val();
if (optValue === textboxValue) {
isValid = true;
}
});
if (!isValid)
message.text(textboxValue + " is not a valid value from the list.");
else
message.text(textboxValue + " is perfectly valid.");
}
Use binding to pass extra parameters to an event listener:
http://docs.jquery.com/Events/bind
$(document).ready(function() {
$("#myTextbox").bind("blur", [ $("#myTextBox"), $("#Select1")], validateText);
})
Then access the data from event.data:
function validateText(event) {
textBox = event.data[0];
dropdown = event.data[1];
}
The reason it calls at load is because handing over a function name with arguments actively calls it. You can effectively mimic what you're looking for by wrapping the call to validateText in an anonymous function like so.
$(document).ready(function() {
$("#myTextbox").blur(function(){
// Since in your original example you used $("#myTextbox") as an arg, this mimics it
validateText($(this), $("#Select1"));
});
});
The anonymous function, since it's using the 'this' keyword, should scale a little better with your initial selector if you change it from #myTextbox to textarea or whatever. =)

Categories

Resources