Why document ready does not work for kendo controls - javascript

Please try the following code for example:
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.1008/js/kendo.all.min.js"></script>
<script type="text/javascript">
function DateOfBirth_Change() {
var input = document.getElementById("DateOfBirth").value;
document.getElementById("spanDateOfBirth").innerHTML = input;
}
$(document).ready(function () {
DateOfBirth_Change();
});
</script>
<input data-val="true" data-val-date="The field Date of Birth: must be a date." data-val-required="*" id="DateOfBirth" name="DateOfBirth" type="date" value="24/10/1984" />
<script>
jQuery(function(){jQuery("#DateOfBirth").kendoDatePicker({"change":DateOfBirth_Change,"format":"dd/MM/yyyy","parseFormats":["dd/MM/yyyy"],"min":new Date(1900,0,1,0,0,0,0),"max":new Date(2099,11,31,0,0,0,0)});});
</script>
<span id="spanDateOfBirth" style="padding-left: 25px;"></span>
It does not work on page load if the document ready function is defined above kendo control...But if it's below, it works fine... Why is this so?

I can see that you have set value of <input type=date.. as "24/10/1984" and which is in wrong format according to HTML5 input date type. Refer - http://www.w3schools.com/html/html5_form_input_types.asp, http://www.w3.org/TR/html5/single-page.html#dates-and-times
When in document.ready, you have invoked document.getElementById("DateOfBirth").value, it gave you blank, as input type="date" has a value in incorrect format and when that typecasted to date it got blank. See the attached example.
Definitely both way ( if you put document.ready first or last )it will work. You need to use following html markup for this.
<input data-val="true" data-val-date="The field Date of Birth: must be a date." data-val-required="*" id="DateOfBirth" name="DateOfBirth" type="date" value="1984-10-24" />
Why it worked when you put document.ready last - because, kendodatepicker made proper initialization and set correct date, and when doc.ready fired , it is able to get value and set.
Note:- document.ready() and (jQuery(){}) are same as document.ready and they execute serially, that is why it worked when you put document.ready at last code block. - jQuery - multiple $(document).ready ...?
To make sure you understand , why it does not work, i am giving following example.
function getincdate() {
alert($("#incorrect_dt").val());
}
function getcdate() {
alert($("#correct_dt").val());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Incorrect date -
<input type="date" id="incorrect_dt" value="24/10/1984" />
<input type="button" value="Get inccorect date" onclick="getincdate()" />
<br />
you can see above, value is not set here, but with .kendodatepicker, it worked, but after you do .kendo...
<br/>
Correct date-
<input type="date" id="correct_dt" value="1984-10-24" />
<input type="button" value="Get correct date" onclick="getcdate()" />

Related

How do I change the value of input elements with a date ? val()/attr()/change() not working

I have a date selection element
#Html.RadioButton("radioTimeFilter", "range", false) Date Range
<span id="dateRangeControls" style="display:none;">
<input id="txtDateOneFilter" type="text" style="width: 70px;" value="test" #*placeholder="Start Date"*# /> to
<input id="txtDateTwoFilter" type="text" style="width: 70px;" value="test" #*placeholder="End Date"*# />
</span>
and on document ready i'm trying to set these values being passed from another page
$(document).ready(function () {
$("#timeFilter").val("#ViewBag.timeFilter").change();
console.log("#ViewBag.dateStart");
console.log("#ViewBag.dateEnd");
// below fails
$("#txtDateOneFilter").attr("value", '#ViewBag.dateStart');
$("#txtDateTwoFilter").attr("value", '#ViewBag.dateEnd');
//
$("#ddlDistrictFilter").val("#ViewBag.districtId").change();
});
i've tried .val() and using .change() and a bunch of other things. Nothing seems to work. How can I change these values after the page loads
Check out this example:
https://stackblitz.com/edit/js-ptckvo
Copy the code and modify the dateOne and dateTwo values with the ViewBag (keep the quote marks inside the val):
$(document).ready(function() {
$("#txtDateOneFilter").val('#ViewBag.dateStart');
$("#txtDateTwoFilter").val('#ViewBag.dateEnd');
});
If it doesn't work, maybe the problem is in the ViewBag values.

Not able to find the value of a textbox from DOM

I have the below input tag for a textbox. The value is getting displayed in
UI but I am not able to retrieve it from DOM. Any suggestions how we can extract the value from the below tag
<input id="f_aDE8F92F6A8E345D19EB6A819D317DFA89AF_3_1"
class="x-form-text x-form-field dct-field x_normalBG x-form-focus"
size="14"
autocomplete="off"
fieldref="ClientConsiderationsAL.LinesOfInsuranceOfTheClientWithABC"
objectref="aDE8F92F6A8E345D19EB6A819D317DFA8" maxlength="14"
name="int_9AF" title="" type="text"/>
If you're using angularjs add ng-model="relevant-name" to the input and in the controller add $scope.relevant-name as a variable to bind to like this: https://www.w3schools.com/angular/angular_model.asp
If it's just javascript then you need to do something like this:
https://plnkr.co/edit/wU13Bnd6j3TRfYcNV9ZG?p=preview
<input id="f_aDE8F92F6A8E345D19EB6A819D317DFA89AF_3_1"
class="x-form-text x-form-field dct-field x_normalBG x-form-focus"
size="14"
autocomplete="off"
fieldref="ClientConsiderationsAL.LinesOfInsuranceOfTheClientWithABC"
objectref="aDE8F92F6A8E345D19EB6A819D317DFA8" maxlength="14"
name="int_9AF" title="" type="text" onkeyup="textChanged()"/>
<script>
function textChanged() {
var input =
document.getElementById('f_aDE8F92F6A8E345D19EB6A819D317DFA89AF_3_1');
console.log(input.value);
}
</script>

AJAX function not being called with button onclick function

I have a simple form with 2 input fields and one button. When the button is clicked, the value of the 2 input fields should be sent to the AJAX function to be handled in a servlet. For some reason, the servlet is not being reached. Can anyone see why? I have an almost identical method working with a different form, and I can't see why this one isn't working.
Here is the HTML form code:
<div id="addCourses" class="hidden" align="center" >
<form id="addCourse" name="addCourse">
<input type="text" id="courseID" name="courseID" value="courseID" size="40" /><br />
<textarea rows="5" cols="33" id="courseDesc" name="courseDesc">Description</textarea><br />
<input type="button" value="Add Course" onclick="addCourse(this.courseID.value, this.courseDesc.value);"/>
</form>
</div>
Here is the Script function:
<script type ="text/javascript">
function addCourse(id, descr)
{
var fluffy;
fluffy=new XMLHttpRequest();
fluffy.onreadystatechange=function()
{
if (fluffy.readyState==4 && fluffy.status==200)
{
//do something here
}
};
fluffy.open("GET","ajaxServlet?courseID="+id+"&courseDescription="+descr,true);
fluffy.send();
}
</script>
Because this is the button and not the form
so
this.courseID.value
this.courseDesc.value
returns an error.
You should use
this.form.courseID.value
this.form.courseDesc.value
Second problem is you have a name clash. The form and function are named addCourse. It will lead to problems. Rename one of them to be different.
Running Example
When you use this, as in onclick="addCourse(this.courseID.value, this.courseDesc.value);", I think that would refer to the input element, and therefore the values aren't being passed correctly.
Bind your event handlers in javascript, where they should be, and you can avoid the issue entirely.
HTML:
<input type="text" id="courseID" name="courseID" value="courseID" size="40" /><br />
<textarea rows="5" cols="33" id="courseDesc" name="courseDesc">Description</textarea><br />
<input type="button" id="addCourse" value="Add Course"/>
JS:
document.getElementById('addCourse').onclick = function () {
var fluffy = new XMLHttpRequest();
var id = document.getElementById('courseID').value;
var descr = document.getElementById('courseDesc').value;
fluffy.onreadystatechange=function() {
if (fluffy.readyState==4 && fluffy.status==200) {
//do something here
}
};
fluffy.open("GET","ajaxServlet?courseID="+id+"&courseDescription="+descr,true);
fluffy.send();
};
As epascarello pointed out, you need to change the ID of your form as having two elements with the same ID is not allowed and will cause unpredictable javascript behavior.
Try a fluffy.close; after the if ready state expression.

How can I set the timePattern in a dijit.form.TimeTextBox to show hours:minutes am|pm

I have this dojo TimeTextBox in the HTML:
<input type="text" id="startTime" value="" dojoType="dijit.form.TimeTextBox"></input>
and this JS code:
dojo.addOnLoad(
function(){
var sartTime = dijit.byId('startTime');
}
)
So how do I format the time to look like HH:mm am|pm
Use the constraints.timePattern attribute:
<input type="text"
id="startTime"
value=""
dojoType="dijit.form.TimeTextBox"
constraints="{timePattern:'h:mm a'}" />
You'll still get a Date object when you ask the TimeTextBox for its value though. To actually get a string on the format HH:mm am|pm| you have to convert it manually afterwards.

place value into input box from query string not working

how can I take the value of a query string and place it into an input box? Currently I have:
<input type="text" name="spouse" id="spouse" value="<script type="text/javascript">
document.write("Name: " + Request.QueryString("spouse"));
</script>"/>
But that only takes the script take and all of its contents and places it into the input box.
I would like to be able to take my query string that is coming from this code:
<tr >
<td><input type="text" name="n1" value="Duck, Donald" /></td>
<td><input type="text" name="n2" value="Daisy" /></td>
<td><input type="button" value="Show" title="Show"
onclick="location.href='example123.html?name=' + escape(this.form.n1.value)+ '&spouse=' + escape(this.form.n2.value);" />
</td>
and have the value for name or spouse appear inside of an input box. What is the proper way to place a value into an input box from a query string?
Request.QueryString is not a native JavaScript function. Use the document.location object and parse out the value you want.
Perhaps use the onload function to perform the action you need. This calls your function once the document has been fully loaded and so you know all tags in the html will exist at this point and be can be referenced properly.
eg.
<html>
<head>
<title>Value Setting</title>
<script type="text/javascript">
window.onload = (function() {
document.getElementById('spouse').value = "one way";
document.forms[0].elements[1].value = "another way";
/* note elements refers to only input children */
});
</script>
</head>
<body>
<form id="myform">
<div>
<input id="first-field" value="first-field" onchange="this.value += ' an example';"/>
</div>
<div>
<p>
<input id="spouse" value="spouse"/>
</p>
</div>
</form>
</body>
</html>
You can't embed elements in attributes as that isn't valid html. Though some attributes can get evaluated as javascript. Namely attributes such as action, onchange, onclick and so on.

Categories