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 have tested many and many solution but any solve my problem.
I have a simple html table. Each row have a edit button.
Jquery is firing many time when I click on the edit button.
Example : I click the first time on a edit button, all work fine. After that, I click on a second edit button and then jquery is firing 2 time, ...
$('.edit').one('click', function(e)
{
e.preventDefault();
e.stopPropagation();
$(this).unbind('click');
var tr = $(this).closest('tr');
var saveUrl = $(this).attr('href');
$('.form-edit').submit(function(e)
{
e.preventDefault();
e.stopPropagation();
console.log($('.form-edit').serialize());
});
});
stopPropagation, return false, unbind, ... change nothing.
What is the problem with my code ?
Simply resolved with this code : unbind then bind
$('.form-edit').unbind('submit').bind('submit', function(event)
{
...
}
I need some help so I hope you could help me. I have a table which rows are added this way after click on a button.
var row = "<tr><td><input class='check_box' type='checkbox'></input>some text<td></tr>";
$('#pl_table').append(row);
I also have jquery function that adds a class to a row when checkbox is selected. So this class has a .css definition for background color.
$('input:checkbox').on('change', function() {
if(this.checked) {
$(this).closest('tr').addClass('selected');
}
else{
$(this).closest('tr').removeClass('selected');
}
}
The problem is on('change') event is not called for rows added. And it is called for rows that already exist when loading the page.
why does this happend? What is wrong on my code? Thank you for your help.
I have faced the same situation and the steps I followed to solve this are given below,
a. Put $('input:checkbox').on('change' inside a method as shown below,
function BindDynamicEvents()
{
$('input:checkbox').off('change').on('change', function() {
if(this.checked) {
$(this).closest('tr').addClass('selected');
}
else{
$(this).closest('tr').removeClass('selected');
}
}
}
b. Call this method after the $('#pl_table').append(row) as shown below,
$('#pl_table').append(row);
BindDynamicEvents();
This will solve the problem.
Note: please include .off('change') as shown in code to avoid the event being fired multiple times.
If you want to keep the current syntax try this:
$('#pl_table').on('change', 'input:checkbox', function () {
if (this.checked) {
$(this).closest('tr').addClass('selected');
}
else {
$(this).closest('tr').removeClass('selected');
};
This way you don't add event on each input, you only add it on the table and fire it when input is changed. I prefer this for dynamical generated elements.
Try this:
var row = "<tr><td><input class='check_box' type='checkbox' onchange="change(this);"></input>some text<td></tr>";
$('#pl_table').append(row);
function change(element)
{
if(element.checked) {
element.closest('tr').addClass('selected');
}
else{
element.closest('tr').removeClass('selected');
}
}
I'ts much better to use:
$(document).on('change','#elemnt',function(){
//do something here
});
So there's no need to call BindDynamicEvents(); every time a new row is added.
As of jQuery 1.4, .after() supports passing a function that returns the elements to insert.
Refer this link.
I have a cgridview on a yii application, and I have selectableRows set to only 1.
I have the following javascript to catch the click event and copy the id of the row into a texfield on the same view file (the id can't be shown on the gridview itself that's why I'm using getSelection).
$('#doctors-grid').on('click', 'table tbody tr', function()
{
var doctorID = $.fn.yiiGridView.getSelection('doctors-grid');
$('#doctorIDTextfield').val(doctorID);
});
The problem is that the id value is never copied into the textfield on the first click but instead you have to click a second time. Not to mention that when I start clicking many different rows the id values get wrong some times.
Can anyone help? Thank you for your time.
Idk why it doesn't work, but you can do it another way:
....
'rowHtmlOptionsExpression'=>'array("data-id"=>$data->id)',
....
in your grid options,then with js:
$('#doctors-grid').on('click', 'table tbody tr', function()
{
var doctorID = $(this).attr("data-id");
$('#doctorIDTextfield').val(doctorID);
});
This will work.
I've seen a couple of questions in regards to bootstrap modals, but none exactly like this, so I'll go ahead.
I have a modal that I call onclick like so...
$(".modal-link").click(function(event){
$("#modal-content").modal('show');
});
This works fine, but when I show the modal I want to focus on the first input element... In may case the first input element has an id of #photo_name.
So I tried
$(".modal-link").click(function(event){
$("#modal-content").modal('show');
$("input#photo_name").focus();
});
But this was to no avail. Lastly, I tried binding to the 'show' event but even so, the input won't focus. Lastly just for testing, as I had a suspiscion this is about the js loading order, I put in a setTimeout just to see if I delay a second, will the focus work, and yes, it works! But this method is obviously crap. Is there some way to have the same effect as below without using a setTimeout?
$("#modal-content").on('show', function(event){
window.setTimeout(function(){
$(event.currentTarget).find('input#photo_name').first().focus()
}, 0500);
});
Try this
Here is the old DEMO:
EDIT:
(Here is a working DEMO with Bootstrap 3 and jQuery 1.8.3)
$(document).ready(function() {
$('#modal-content').modal('show');
$('#modal-content').on('shown', function() {
$("#txtname").focus();
})
});
Starting bootstrap 3 need to use shown.bs.modal event:
$('#modal-content').on('shown.bs.modal', function() {
$("#txtname").focus();
})
Just wanted to say that Bootstrap 3 handles this a bit differently. The event name is "shown.bs.modal".
$('#themodal').on('shown.bs.modal', function () {
$("#txtname").focus();
});
or put the focus on the first visible input like this:
.modal('show').on('shown.bs.modal', function ()
{
$('input:visible:first').focus();
})
http://getbootstrap.com/javascript/#modals
I am using this in my layout to capture all modals and focus on the first input
$('.modal').on('shown', function() {
$(this).find('input').focus();
});
I had the same problem with bootstrap 3, focus when i click the link, but not when trigger the event with javascript.
The solution:
$('#myModal').on('shown.bs.modal', function () {
setTimeout(function(){
$('#inputId').focus();
}, 100);
});
Probably it´s something about the animation!
I had problem to catch "shown.bs.modal" event.. And this is my solution which works perfect..
Instead simple on():
$('#modal').on 'shown.bs.modal', ->
Use on() with delegated element:
$('body').on 'shown.bs.modal', '#modal', ->
Seems it is because modal animation is enabled (fade in class of the dialog), after calling .modal('show'), the dialog is not immediately visible, so it can't get focus at this time.
I can think of two ways to solve this problem:
Remove fade from class, so the dialog is immediately visible after calling .modal('show'). You can see http://codebins.com/bin/4ldqp7x/4 for demo. (Sorry #keyur, I mistakenly edited and saved as new version of your example)
Call focus() in shown event like what #keyur wrote.
I've created a dynamic way to call each event automatically. It perfect to focus a field, because it call the event just once, removing it after use.
function modalEvents() {
var modal = $('#modal');
var events = ['show', 'shown', 'hide', 'hidden'];
$(events).each(function (index, event) {
modal.on(event + '.bs.modal', function (e) {
var callback = modal.data(event + '-callback');
if (typeof callback != 'undefined') {
callback.call();
modal.removeData(event + '-callback');
}
});
});
}
You just need to call modalEvents() on document ready.
Use:
$('#modal').data('show-callback', function() {
$("input#photo_name").focus();
});
So, you can use the same modal to load what you want without worry about remove events every time.
I had the same problem with the bootstrap 3 and solved like this:
$('#myModal').on('shown.bs.modal', function (e) {
$(this).find('input[type=text]:visible:first').focus();
})
$('#myModal').modal('show').trigger('shown');
Bootstrap has added a loaded event.
https://getbootstrap.com/docs/3.3/javascript/#modals
capture the 'loaded.bs.modal' event on the modal
$('#mymodal').on('loaded.bs.modal', function(e) {
// do cool stuff here all day… no need to change bootstrap
})
Bootstrap modal show event
$('#modal-content').on('show.bs.modal', function() {
$("#txtname").focus();
})
A little cleaner and more modular solution might be:
$(document).ready(function(){
$('.modal').success(function() {
$('input:text:visible:first').focus();
});
});
Or using your ID as an example instead:
$(document).ready(function(){
$('#modal-content').modal('show').success(function() {
$('input:text:visible:first').focus();
});
});
Hope that helps..