How can I add a change event after initialization in a KendoUI autocomplete? I'm building in this way, but I don't know how to do this with the component already built.
<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete({
change: function(e) {
var value = this.value();
}
});
</script>
See this link: http://docs.telerik.com/kendo-ui/api/javascript/ui/autocomplete#events-change
<input id="autocomplete" />
<script>
function autocomplete_change(e) {
var value = this.value();
// Use the value of the widget
}
$("#autocomplete").kendoAutoComplete();
var autocomplete = $("#autocomplete").data("kendoAutoComplete");
autocomplete.bind("change", autocomplete_change);
</script>
Related
Goal: change value of current_category_id on click
Input tag where I want my value changed:
<input type="text" id="current_category_id" class="current_category_id" value="1">
Button, value here changes depending on which row is clicked
<button type="button" value="${cat.category_id}" class="category_sort btn float-left" data-toggle="modal" data-target="#createCategory">${cat.category_name} (${cat.category_id})</button>
This code gives me undefined
$(document).on('click', '.category_sort', function (e) {
e.preventDefault();
var new_category_id_sort = $(this).val();
document.getElementById('current_category_id').value=e.new_category_id_sort;
);
How do I fix my document.getElementById?
Using a querySelector
$(document).on('click', '.category_sort', function (e) {
e.preventDefault();
//change value to sort group
var new_category_id_sort = $(this).val();
var a = document.querySelector('.current_category_id').value;
document.querySelector('.current_category_id').value = new_category_id_sort;
fetchgroup();
});
Here's a simplified example of my knockout model. The problem I'm having is that as soon as the page loads, the quiz is loaded. Why does it get run straight away and how can I stop it so that it only get's run when I want, say, on the click of a button?
Do I even need to use subscribe to do this?
HTML:
<h1>Test</h1>
<button class="btn btn-primary" data-bind="click: quizCount(quizCount() + 1)">
Click Me
</button>
<hr />
<div data-bind="visible: !loaded()">No Quiz</div>
<div data-bind="visible: loaded">Quiz Loaded!</div>
<hr />
<h3>Debug</h3>
<div data-bind="text: ko.toJSON(quizModel)"></div>
Javascript:
<script type="text/javascript">
var quizModel = { };
// DOM ready.
$(function () {
function QuizViewModel() {
var self = this;
self.loaded = ko.observable(false);
self.questions = ko.observable();
self.quizCount = ko.observable();
};
quizModel = new QuizViewModel();
quizModel.quizCount.subscribe(function (newCount) {
$.getJSON('#Url.Action("GetNew", "api/quiz")', function (data) {
quizModel.questions(data.Questions);
}).complete(function () {
quizModel.loaded(true);
});
});
ko.applyBindings(quizModel);
})
</script>
Subscribe is only used for listening to changes in an observable so it will run immediately as soon as the observable gets a value.
You need to add this function to your viewmodel as a method, likely to be called getQuestions:
function QuizViewModel() {
var self = this;
self.loaded = ko.observable(false);
self.questions = ko.observable();
self.quizCount = ko.observable();
self.getQuestions = function(){
$.getJSON('#Url.Action("GetNew", "api/quiz")', function (data) {
self.questions(data.Questions);
}).complete(function () {
self.loaded(true);
});
}
};
then you can easily have a button or something that binds to this method on click:
<button data-bind="click: getQuestions">Get questions</button>
I write a code that submit a form to another page without loading like ajax.I use jquery form plugin.but the problem is it is not working.
here is my code
<div id='preview'></div>
<form action='ajaxcall.php' id='upload_pic' enctype='multipart/form-data' method='post'>
<input type='file' id='pic' name='picture'>
<input type='button' id='sub'>
</form>
<script type="text/javascript" src='jqueryform.js'></script>
<script>
var options=
{
target:'#preview',
url:'ajaxcall.php',
success:function(){
document.getElementById("upload_pic").reset();
}
};
$(document).ready(function(){
$("#sub").click(function(){
$('#preview').html("<img src='images/loader.gif' alt='Loading.....'/>");
$('#upload_pic').ajaxForm(options).submit();
});
});
</script>
I understand that the ajaxForm() function is not working.the jquery file is above the code and working fine.After clicking button page automatically redirected to ajaxcall.php page.please help me finding out the error.Thanks in advance.
In this scenario you need to use ajaxSubmit
$(document).ready(function() {
var options = {
target : '#preview',
url : 'ajaxcall.php',
success : function() {
document.getElementById("upload_pic").reset();
}
};
$("#sub").click(function() {
$('#preview').html("<img src='images/loader.gif' alt='Loading.....'/>");
$('#upload_pic').ajaxSubmit(options);
});
});
Add one more submit function:
$(document).ready(function(){
$('#upload_pic').submit(function(e){ // <---pass event here
e.preventDefault(); //<----------------stop it here
});
$("#sub").click(function(){
$('#preview').html("<img src='images/loader.gif' alt='Loading.....'/>");
$('#upload_pic').ajaxForm(options).submit();
});
});
Try to stop the submit before the click.
Trying to get an event triggered with ajax content whose parent elements were also ajax loaded.
<div id="content"><!-- NOT ajax-loaded -->
<div id="location"> <!-- #location IS ajax-loaded -->
<div id="add_location> <!-- #add_location IS ajax-loaded from a #location event -->
<input type="text" id="add_location_city_example" />
<input type="text" id="add_location_state_example" />
<input type="submit" id="add_location_confirm" />
</div>
</div>
</div>
$(function(){
$('#content').on('click', '#add_location_confirm', function(){
console.log('debug 1');
add_location();
// will not be called
});
$('#location').on('click', '#add_location_confirm', function() {
console.log('debug 2');
// will not be called either
add_location();
});
});
If I have onclick="add_location()" and function add_location() { console.log('debug 3); } in my .js then it will obviously be called BUT I then cannot get $('#add_location_city_example').val() because none of it will be in the dom.
NOTE: using 1.9.1
I've been using this for a while, makes it much easier to handle situations like you are describing + there is only one even assignment for pretty much all clicks on the page, including elements that will appear on the page in the future:
$(document).bind('click', function (e) {
var target = $(e.target);
if (target.is('#content')) {
e.preventDefault();
// do whatever
} else if (target.is('#location')) {
e.preventDefault();
// do whatever else
}
});
or in your case it would probably be more like this:
$(document).bind('click', function (e) {
var target = $(e.target);
if (target.is('#add_location_confirm')) {
e.preventDefault();
if (target.closest('#location').length == 0) { // not yet have location injected via ajax
// do something
} else {
// location has been injected, do something else
}
});
I have developed a MVC3 application in that I want use the Check boxlist in this I have three check boxes. My requirement is when I check the check box it accept only on check box not multiple remaining check box should be unchecked like RadioButton list type.
Please help me... How can I resolve this problem?
Here is my view code
#{
ViewBag.Title = "MenuCategories";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<script type="text/javascript">
$(function () {
enable_cb();
$("#ChbkPickup").click(enable_cb);
});
function enable_cb() {
if (this.checked) {
$("input.ccc").removeAttr("disabled");
} else {
$("input.group1").attr("disabled", true);
}
}
$(function () {
$('.example-container > pre').each(function (i) {
eval($(this).text());
});
});
</script>
#using (Html.BeginForm("OrderCompleted", "Home", FormMethod.Post, new { id = "myForm" }))
{
#Html.ValidationSummary(true)
Delivery:<input type="checkbox" name="Deliver" value="Deliver" id="Chbkdeliver" />
Pickup: <input type="checkbox" name="Deliver" value="Pickup" id="ChbkPickup" class="group1" checked="checked" />
Dine In:<input type="checkbox" name="Deliver" value="Dinein" class="group1" id="ChbkDinein" />
}
replace all your javascript tag with this
<script type="text/javascript">
$(function () {
$("#myform :checkbox").click(function(){
$("#myform input:checked").attr("checked","");
$(this).attr("checked","checked");
});
});
</script>