I'm trying to add an onChange event to the Kendo DatePicker and noticed that there is not an easy way to go about doing this, unfortunately.
I was able to add an override by using jQuery but I can only get this to work if I know the name of the DatePicker. I'm providing an example of this below for reference.
<!-- [ begin ] invoke onChange event -->
<script type="text/javascript">
$(document).ready(function () {
function onChanger() {
alert("Change :: " + kendo.toString(this.value(), 'd')); // show the value
document.forms['submitForm'].submit(); // submit the form
}
$("#datepicker").kendoDatePicker({
change: onChanger
});
});
</script>
<input id="datepicker" name="datepickers" />
<!-- [ end ] invoke onChange event -->
The problem is I'm looping through items which dynamically are building these DatePickers.
So my code looks like this:
#(Html.Kendo().DatePicker()
.Name("AllTeachersObjectives_" + rec.CalendarGroupID)
.Value(rec.AllTeachersObjectives)
.Max(DateTime.Now.AddYears(10))
.Events(e => e.Change("startChange"))
)
How can I dynamically invoke the onChange event from using a name of a DatePicker that is dynamic?
Any help would be greatly appreciated!
TIA
Related
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How to send multiple arguments to jQuery click function?
I want to pass multiple arguments to a Jquery function. Below is the Javascript sample code. I want to convert this javascript function to a jquery function. How can I pass that arguments into a jquery onclick event?
<a onclick="showState('state_name','state_id')">ADD STATE </a>
function showState(state_name,state_id){
openbox_state(state_name,state_id);
}
Perhaps I'd use datasets here:
HTML:
<a data-state_name="state_name" data-state_id="state_id" >ADD STATE</a>
JS:
$(function() {
...
$('a[data-state_id]').click(function() {
var $this = $(this);
showState($this.data('state_name'), $this.data('state_id'));
return false;
});
...
});
You actually don't have to jwrap the clicked object, as you can get the attribute values with either dataset API (if you have the luxury of not supporting IE9-, though) or simple getAttribute method. Yet I found this syntax more clean and readable.
The correct way is:
ADD STATE
<script type="text/javascript">
$(document).ready(function(event) {
event.preventDefault();
$('#myanchor').on('click', function() {
openbox_state( $(this).data('nm') , $(this).data('id'));
});
});
</script>
Your Jquery Code:
<script language="javascript" type="text/javascript">
var state_name=$('#txtName').val();
var state_id=$('#txtid').val();
$(document).ready(function () {
$('a').click(function(){
showState(state_name,state_id);
});
});
function showState(state_name,state_id){
openbox_state(state_name,state_id);
}
</script>
Your HTML:
ADD STATE
<input type="text" id="txtName" value="Tom Cruse" />
<input type="text" id="txtid" value="1" />
this jquery take the values from inputs, by using their id and use them as parameters to call the method.
If what you need is to pass additional data to be used in the event handler, jQuery click event binder supports this already. But in order to use it you have to bind the event handler through code instead of inline binding.
$(function(){
$('#id').click({additional : "data"},function(){ // handler code});
});
Check documentation: http://api.jquery.com/click/
I am trying to display a button using jQuery template. The code is as below:
<script id="EmailContainerTemplate" type="text/html">
<div>${EMailAddress}</div>
</script>
The target div is defined as:
<div id="EmailContainer" class="center-wrapper"> </div>
And the template binding code:
$("#EmailContainer").append($("#EmailContainerTemplate").tmpl(contact));
But it is displaying as hyperlink. Any ideas?
Trigger create event on your new markup
$( ...new markup that contains widgets... ).appendTo( ".ui-page" ).trigger( "create" );
Refer to Enhancing New markup Section
I've got a checkbox that I want hidden on the page. My obvious first attempt was the following:
<input type='checkbox' style='display:none' />
However, I noticed jquery mobile automagically wraps the checkbox in a div that looks like this:
<div class='ui-checkbox'>
<input type='checkbox' style='display:none;' />
</div>
I would assume that there's some kind of data- element that would prevent this additional styling, but haven't found it in the docs or elsewhere. It's easy enough to override the .ui-checkbox in css to hide it as well, but would prefer a more jquery mobile-standard approach. Does such a thing exist?
The attribute that prevents styling is data-role="none"
<input type='checkbox' style='display:none' data-role="none" />
See the Jquery doc: "Preventing auto-initialization of form elements"
For future users.
Just in case you want to disable for every form element or your forms are loading dynamically where you cannot edit markup use this.
$(document).on('pagebeforecreate', function( e ) {
$( "input, textarea, select", e.target ).attr( "data-role", "none" );
});
I have too many places to change inputs and add data-role="none"
The following code works for me:
<script>
$(document).bind('mobileinit',function(){
$.mobile.page.prototype.options.keepNative = "select,input";
});
</script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
I am trying to install the jQuery UI autocomplete on my website. I have it up and working but I want it to automatically submit the search form when someone clicks on an option. The default behavior seems to be that it just fills out the form with the selected item and then the user must click the submit button. I want it to just automatically redirect like Google. I'm running PHP 5.+ and MYSQL 5+ and jquery.1.4.2 and jqueryui.1.8.6.
Here is the javascript:
<script>
$(function() {
$( "#query" ).autocomplete({
source: "/scripts/autocomplete_handler.php",
minLength: 2,
select: function(event, ui) {
$('#query').val(ui.item);
$("#results").text(ui.item); // for testing purposes
$('#search_form').submit();
}
});
});
</script>
Here is the form:
<form name="search_form" id="search_form" action="search.php" method="get">
<input type="text" name="query" id="query" />
<input type="submit" value="Search" />
</form>
<code id="results"></code>
As you can see, I am trying to change the value of the input field "query" using $('#query').val(ui.item). The problem is that when I select an autocomplete option $_GET['query'] becomes [object Object]. i.e. My website searches for the string "[object Object]" instead of the value that I clicked.
At the bottom of the form there is a code tag with id "results". I also can't get this to populate with the text(ui.item). If anyone could help it would be much appreciated, I'm sure I'm not the only one who wants this type of Google like functionality in their autocomplete, but I can't find any examples anywhere.
Try this in your select function:
$('#query').val(ui.item.value);
I am tryng to use this: http://jqueryui.com/demos/dialog/#modal-form
I have:
<script type="text/javascript">
$(document).ready(function() {
$("#dialog").dialog();
$("#dialog").dialog('close');
$('.myPop').click(function() {
$("#dialog").dialog('open');
});
});
Which allows me to pop-up on the click of '.myPop' which is just a temp input button in my list which is working:
<button type="button" class="myPop"></button>
My question is - what is the best way to use this pop-up to go to the Edit method of my controller, populate controls and then be able to save back to the model and refresh the list page?
I want to keep with best practice in ASP.Net MVC please.
Am I beetr maybe using this? http://dev.iceburg.net/jquery/jqModal/
Thanks
There's obviously a bunch of ways to do that, but here's how I would solve it. Perform an ajax call before loading the dialog to populate the dialog's contents, show the dialog, than on save close the dialog and refresh the grid. Those are the basics, there's some helper code below. I find it a good practice to return a json result from the save action to determine if the saved was successful, and if not an error message that indicates why it failed to display to the user.
<div id="dialog" title="Basic dialog">
<!-- loaded from ajax call -->
<form id="exampleForm">
<input blah>
<input type="button" onclick="Save()" />
</form>
</div>
<script>
$(function() {
$('.myPop').click(function() {
$.get("editController/loadContents", function(data){
$("#dialog").html(data);
});
$("#dialog").dialog('open');
});
});
function Save(){
$.post("/editController/Edit", $("#exampleForm").serialize(),
function(data){
$("#dialog").dialog('close');
//update grid with ajax call
});
}
</script>