I have a drop down in mvc
#Html.DropDownList(
"Name",
new SelectList(Model.Product, "Value", "Text"),
string.Concat("-- ", "Please select the item", " --"),
new { id = "Product", Class = "form-control" }
)
I fill dropdown dynamically. It works fine. Everything works fine. When i change the item i perform action that i want using jquery onchange method and refresh the dropdown. But i want to refresh dropdown when user click on "Please select the item". When i click on please select the onchange method is not called. How i can do this?
$DropDown.on("change", function () {
//Here i perfome action
});
You might want to extract the "onchange" function in order to reuse it. Something like that
var changeCallback = function(e) {
// chage logic
}
$("#dropdownlistname").on("change", changeCallback);
$("#dropdownlistname").on("click", changeCallback);
$(document).ready(function(){
$('#dropdownlistname').change(function(e){
// Your event handler
});
// And now fire change event when the DOM is ready
$('#dropdownlistname').trigger('change');
});
More Information Here
Edit
You should provide a selector to the on function:
$(document).on('change', 'input', function() {
// Does some stuff
});
In that case, it will work as you expected. Here is the Fiddle using on function
user2052156's answer looks good but if you want the 'click' to happen only the first time then you can remove the click handler after the first call:-
$DropDown.on('click change', function(){
//Here i perfome action
$(this).off('click');
});
Fiddle
Related
This fiddle clarifies things And my selectAll method with pure jquery.
self.selectAll = function( data, event){
$(".dataQueryRadioBtn").each(function() {
$( this ).prop('checked', true );
});
}
When you click on one of the radio buttons and then on Click Me a message shows you the number of the clicked radio button. When you do the same now first clicking on Select All it doesn't show every radio button. Only those you clicked yourself. Why is that so?
The problem is that Knockout has no way to know that the checked property of your <input> has been changed because you only registered a click handler for each.
You can solve this easily by triggering the click event:
$(".dataQueryRadioBtn").prop('checked', false).click();
But generally, when you're in the realms of your viewModel (just like in your selectAll method) you shouldn't rely on DOM elements (it's the elements that should rely on your view-model, not the opposite) to fetch data but rather explicitly change the observable value.
And in your case:
function ViewModel () {
var self = this;
// ...
self.allPossibleTags = []
self.selectAll = function(data, event){
self.selectedTags(self.allPossibleTags);
}
}
// upon document.ready
$(document).ready(function() {
var viewModel = new ViewModel();
viewModel.allPossibleTags = $('.dataQueryRadioBtn').get().map(function(elm) { return elm.value });
ko.applyBindings(viewModel);
});
See Fiddle
I have a HTML table created with javascript where i have possibility to add new rows (dynamically added elements). In one of the tds i have an input field that fires a bootstrap modal to open. In the modal I have radiobuttons with options and when OK button is clicked the value from the radiobutton is set in the inputfield. The problem is that the value gets updated on every row, not just the row i clicked.
Since the elements are added dynamically i used
$(document).on('click', 'input', function (e) {
doSomething();
});
Any idea how to solve this problem?
Updated with more code
$(document).on('click', 'input', function (e) {
var inputForm = e.target;
modal.modal({show:true});
modal.find(".btn-success").click(function () {
var choice = $("modal").find('input[type=radio]:checked').val();
if (choice) {
modal.modal('hide');
inputForm.value = choice;
}
});
});
Without any furter information about the code you are running it's hard to help you.
But, you might be able to use the target property of the event (e), to look at what element actually triggered the click, to be able to see which row/textbox to update when the modal is closed.
I am using $(this) to get the current selected(clicked) element of a specific class .For the first time its coming fine i.e i am getting the selected element but as soon as i click on second time it is giving the alert of the old as well as new selection .I am not able to find out what is the issue..
Here is the code..
$('.l-one').click(function () {
var tableName = $(this).text();
//Table Name Lable
$("#lbl").text(tableName);
//Panel
$("#Perticulars").show();
$('.my-new-three').click(function () {
var dishvalue = $(this).text(); //get the value of dish item and display in the table
//console.log(dishvalue);
alert(tableName);
alert(dishvalue);
if (localStorage.getItem(tableName) != null) {
alert("b");
In the alert(tableName); i am getting alert of all the tables selected previously .Please help me to resolve this..
Thanks...
use below code . only click assign events to each time when you click '.l-one'. so if you click '.l-one' 3 time 'click' event assign 3 time to '.my-new-three'.
unbind() function remove event from element and bind() function attach event to element. so here as per your code each time when you click '.l-one' unbind remove click event from '.my-new-three' and bind function again assign click event to '.my-new-three'.
$('.my-new-three').unbind('click').bind('click',function () {});
other way is to use separate click event methods.
$('.l-one').on('click', function () { });
$('.my-new-three').on('click',function () {})
Use separate click handler instead of using click handler insider another one. Consider this code:
$('.l-one').click(function () {
//code
}
$('.my-new-three').on("click",function () {
//code
}
Assuming If .my-new-three exists inside .l-one or .my-new-three creating dynamically then use this:
$('.l-one').on("click",".my-new-three",function () {
//code
}
I want to run a function whenever the search input box is changed in chosen (jquery dropdown plugin).
But unable to find such event neither in their documentation nor on the net. Does anyone have experienced or have idea how to call some code whenever search is done in Chosen?
I tried placing the jquery .on('change' event on the textbox but it didn't work.
I wrote
$(".chosen-search input").on("change", function(e) {
//console.log($(this));
});
I had to "double" wrap the on to get the input event to fire on the Chosen text field search box:
$('#my-chosen-input').on('chosen:showing_dropdown', function() {
$('.chosen-search input').on('input', function() {
// The text has changed, do something...
});
});
$(".chosen-search").change(function(){
console.log("changinn");
});
This should work
Chosen js filters dropdown list onkeyup event. This snippet would work better:
$(document).on('keyup', '.chosen-search input', function() {
console.log('filtered');
})
This is my Fiddle JsFiddle
$(function() {
$('.glyphicon-edit').click(function () {
$(this).parent().find('.form-control').removeAttr("readonly").focus();
});
$('.form-control:focus').blur(function() {
$(this).addAttr("readonly");
});
});
What I am trying to do?
I am trying to create a dynamically editable form.It should have
When someone click on edit icon, the corresponding Input field should get focussed and become editable. (I completed this part).
Next i want is when an element is in focus state and it looses focus then i want to add readonly attribute again to that element. This part in not working. can somebody explain me why. and give a solution for it
EDIT:
In the later part i was trying alert("some msg") to check whether the event is getting fired or not. while posting i just replaced it with addAttr. it was a typo
You could use instead:
--DEMO--
$(function () {
$('.glyphicon-edit').click(function () {
$(this).parent().find('.form-control').prop("readonly", false).focus().one('blur', function () {
$(this).prop('readonly', true);
});
});
});
There is no addAttr() function. The setter for attr looks like this:
$('.form-control').blur(function() {
$(this).attr("readonly", true);
});
Also, the :focus psuedo selector here is redundant, as to fire the blur event the element has to have focus in the first place.