I am creating table rows dynamically using dojo domConstruct. One of the column contains a button for delete function.But i dont know how to connect onclick event for the delete button. Below is my js code for creating the row.
domConstruct.place("<tr class='test'><td>" +
" Account name"+ XXXX+" "+" Account number is is $" + data1 +
"</td><td><input type ='button' onclick='deleteFunction(this);' value='remove' id=" +
buttonId + "/></td></tr>","tradeInValue","");
So now how i connect it to
on(dom.byId("buttonId"),"click",function(){
// my code goes in here
});
I have no clue here. Basically i need to remove the row from a table on click of a button.
I am using dojo in javascript file.
Updated.
o
n(dom.byId("submitButton"), "click", function(evt){
var name=registry.byId("name").get('value');
var detail = registry.byId("manufacturer").get('value');
var id=registry.byId("model").get('value');
var make=registry.byId("shaft").get('value');
var xhrArgs={
url:"./name/getValue",
content:{name:name,detail:detail,id:id,make:make},
handleAs:"json",
load:function(data){
var data1=data/100;
var row=domConstruct.create("tr",null,"tradeInValue");
domConstruct.create("td",{innerHTML:" Name
"+ detail+" "+id+" Value is $"+data1},row);
var actions=domConstruct.create("td",null,row);
var btn=domConstruct.create("input",{
id:idRow,
type:"button",
value:"Remove"
},actions);
btn.addEventListener("click", function(evt) {
console.log("Deleting");
console.log(evt.target.parentNode.parentNode.idRow);
domConstruct.destroy(evt.target.parentNode.parentNode);
});
var test={
"name" : name,
"detail" : detail,
"id" :id,
"tradePrice" :data,
"make":make
};
tradeDetails.clubDetails.push(test);
}
}
var deferred=dojo.xhrPost(xhrArgs);
}
});
The easiest way is to create your DOM nodes individually, for example:
var row = domConstruct.create("tr", null, "myData");
domConstruct.create("td", { innerHTML: person.id }, row);
domConstruct.create("td", { innerHTML: person.name }, row);
var actions = domConstruct.create("td", null, row);
var btn = domConstruct.create("input", {
type: "button",
value: "Remove"
}, actions);
This allows you to easily attach event handlers to btn, while still preserving context and still having access to the data you're working with, for example:
btn.addEventListener("click", function() {
console.log("Deleting", person);
});
To delete the row itself you could use the Event.target property, which gives you access to the button node itself. If you use the Node.parentNode property, you can eventually access the row itself, and then you can remove it using dojo/dom-construct::destroy()
For example:
btn.addEventListener("click", function(evt) {
domConstruct.destroy(evt.target.parentNode.parentNode);
});
A full example can be found on JSFiddle.
Related
I'm trying to use JavaScript to generate JQuery ListView, once I click on the listview item it will show an alert message.
In the demo I found in Stack Overflow it works perfectly.
Once I try to integrate my code with it, it does not work anymore. Is the way I'm generating data-name in my listview is correct?
Sample of my Fiddle: http://jsfiddle.net/TLGY7/416/
$('#mylistview ul').children('li').bind('click', function(e) {
var item = $(this).attr('data-name')
alert('Selected Name=' + item );
});
function view() {
if (db==null) {
alert('Error: Database is null.');
return;
}
$('#listData').empty();
db.executeSql(
'SELECT `id`, `activityname`, `location`, `sdate`, `stime`, `reporter` FROM `record` ORDER BY `id` ASC',
[],
function(resultset) {
var length = resultset.rows.length;
for(var i=0; i<length; i++) {
$('#listData').append('<li class="activitylist" data-name='+resultset.rows.item(i).id+'>'+resultset.rows.item(i).id+'.'+stringconverter(resultset.rows.item(i).activityname)+'</li>');
}
$("#listData").listview( "refresh" );
},
function(error) {
alert('Error: '+error.message);
}
);
}
var linkElement = $('<a href="#pageDetail" class="anchor">').text(resultset.rows.item(i).id + '.' + stringconverter(resultset.rows.item(i).activityname));
var listElement = $('<li class="activitylist">').attr('data-name', resultset.rows.item(i).id)).append(linkElement);
$('#listData').append(listElement)
append method requires JQuery node element, not text
you also can make a $() around your '' statement. the node building itself looks ok for the first view.
If you are adding the listitems dynamically, you should use event delegation to handle the click event:
$('#mylistview ul').on("click", "li", function(){
var item = $(this).data('name')
alert('Selected Name = ' + item );
});
In his way the listitems don't have to exist yet when you setup the click handler.
Updated FIDDLE
I dynamically create a table full of links of 'actors', which allows to pull the actors information into a form to delete or update the row. The delete button only pops up when you select an actor.
I'm able to click a row, pull the information into the forms, and delete it on first try. However when I attempt to add a new 'Actor' and then delete it, or just delete an existing 2nd row, the button 'Delete Actor' doesn't work. It's only after the first successful delete does the button no longer work.
var addActor = function() {
// Creates a table of links for each added actor with an id based from # of actors
$("#actorsTable").append("<tr><td><a href='' onclick='deleteActor(this)' class='update' data-idx='" + actors.length + "'>" + newActor.fName + " " + newActor.lName + "</a></td></tr> ");
$(".update").off("click");
$(".update").on("click", selectActor);
};
var deleteActor = function(e) {
$("#deleteActor").on('click', function(event) {
event.preventDefault();
var row = e.parentNode.parentNode;
row.parentNode.removeChild(row);
clearForm(actorForm);
actorState("new");
});
};
I'm new to jQuery/javascript, and I'm pretty sure its due to the change in DOM, but I just don't know what to change to make it work.
Here is an Example of it in action
Try
var deleteActor = function(e) {
$("#deleteActor").unbind();
$("#deleteActor").on('click', function(event) {
event.preventDefault();
var row = e.parentNode.parentNode;
row.parentNode.removeChild(row);
clearForm(actorForm);
actorState("new");
});
};
Here is the link for unbind.
http://api.jquery.com/unbind/
The problem is because you're adding another click handler (in jQuery) within the click handler function run from the onclick attribute. You should use one method or the other, not both. To solve the problem in the simplest way, just remove the jQuery code from the deleteActor() function:
var deleteActor = function(e) {
var row = e.parentNode.parentNode;
row.parentNode.removeChild(row);
clearForm(actorForm);
actorState("new");
};
when you add html dynamically you need to attach the event to the parent static element like so:
$("#actorsTable").on("click","a.update", function() {
$(this).closest("tr").remove();
});
I create dropdown dynamically.
Their ids are ddl1, ddl2, ddl3 and so on.
$('#ddl1').focus(function() {
var previous = this.value;
}).change(function() {
var index = $(this).find('selected').index();
$('#ddl1').find('option:eq(' + index + ')').hide();
$('#ddl2').find('option:eq(' + index + ')').hide();
});
$('#ddl2').focus(function() {
...
Creation of 7 dropdowns makes me to write 7 change event handlers.
How to implement dynamically create change event?
My dropdown append methods are:
var x=1;
var dropdown=('#ddl1').html();
$('#btnadd').click(function() {
$('#divname').append('<select id="ddl'+x+' > </select> <option>../option>');
x++;
});
Give a common class to every dropdown and refer to that. Also, use .on() (event delegation) to catch dynamic created elements:
$(document).on('change', '.common-class', function() {
//Your function
var currentId = $(this).attr('id');
});
UPDATE
Add the same class every time you append a select element:
//...
$('#divname').append('<select id="ddl'+ x + '" class="common-class"><option>../option></select>');
SELECTED OPTION
In order to get the selected option:
$('#current-id').find('option:selected').index();
Variant without delegated events to reduce resource usage:
var $dds = $('select');
$dds.each(function(index) {
var $this = $(this);
processDdChange($this);
});
function processDdChange($obj) {
$obj.on('change', function(e) {
var $this = $(this);
alert($this.attr('id') + ' | ' + $this.find(':selected').val());
});
}
https://jsfiddle.net/tasmanangel/2p9mbs7h/
I'm running into a bug with my code. I am cloning a div so that the user can add multiple customers.
var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
var newNum = new Number(num + 1); // the numeric ID of the new input field being added
var newElem = $('#divInput' + num).clone().attr('id', 'divInput' + newNum); // create the new element via clone(), and manipulate it's ID using newNum value
// clear input value for cloned items and do not remove text for del button.
newElem.find('input:not(.DeleteBtn),textarea').val('');
//newElem.find('input[type="submit"]
// Replace clone num with incremental num.
newElem.find(':input').each(function () {
$(this).attr('id', $(this).attr('id').replace(/\d+/, newNum));
$(this).attr('name', $(this).attr('name').replace(/\d+/, newNum));
});
// insert the new element after the last "duplicatable" input field
$('#divInput' + num).after(newElem);
I have provided a delete button to delete rows and I am using the class name for the button to execute a function on click .
$(".DeleteBtn").click(function () {
alert(".DeleteBtn Click Function - " + $(this).attr('id'));
var DelBtnNum = $(this).attr('id');
DelBtnNum = DelBtnNum[DelBtnNum.length - 1];
$('#divInput' + DelBtnNum).remove();
});
I am able to delete the first (original) input row, but any additional customer rows are not deleted.
I have a running demo of the code located here: http://jsfiddle.net/crjunk/FB4BZ/2/
Why will the cloned items not fire the .DeleteBtn.click function?
You need to use event delegation for supporting dynamic elements.
Since you have used jQuery 1.6 in the fiddle
$(document).delegate(".DeleteBtn", 'click', function () {
alert(".DeleteBtn Click Function - " + $(this).attr('id'));
var DelBtnNum = $(this).attr('id');
DelBtnNum = DelBtnNum[DelBtnNum.length - 1];
$('#divInput' + DelBtnNum).remove();
});
if jQuery >= 1.7
$(document).on('click', ".DeleteBtn", function () {
alert(".DeleteBtn Click Function - " + $(this).attr('id'));
var DelBtnNum = $(this).attr('id');
DelBtnNum = DelBtnNum[DelBtnNum.length - 1];
$('#divInput' + DelBtnNum).remove();
});
Another option is to clone the element along with the event using clone(true)
Because the default when using clone is to not clone events. Try passing true to clone():
var newElem = $('#divInput' + num).clone(true).attr('id', 'divInput' + newNum); // create the new element via clone(), and manipulate it's ID using newNum value
jsFiddle example
As the .clone() docs state:
.clone( [withDataAndEvents ] ) withDataAndEvents (default: false)
When you bound the click event, only one div existed, so it is the only one that has a click handler. You should change your code to use on instead of click.
$(document).on('click', ".DeleteBtn", function () {
try going on with .on('click',function(e){ ... }); or use live() selector (but i think live goes deprecated...)
so in your case
$(".DeleteBtn").on('click',function () { ..
I have information that comes out of a database and gets put into a list with a checkbox by each element. This is how it is currently done:
function subjects(){
$.ajax({
url: "lib/search/search.subject.php",
async: "false",
success: function(response){
alert(response);
var responseArray = response.split(',');
for(var x=0;x<responseArray.length;x++){
$("#subjects").append("<br />");
$("#subjects").append(responseArray[x]);
$("#subjects").append("<input type='checkbox' />");
}
}
});
}
it works fine, but I need a way to pick up on if a checkbox is clicked, and if it is clicked then display which one was clicked, or if multiple ones are clicked.
I can't seem to find a way to pick up on the checkboxs at all.
the response variable is "math,science,technology,engineering"
Because you are populating the Checkboxes Dynamically you need to Delegate the event
$("#subjects").on("click", "input[type='checkbox']", function() {
if( $(this).is(":checked") ) {
alert('Checkbox checked')
}
});
To better capture the data it is better if you encase the corresponding data into a span , so that it can be easier to search..
$("#subjects").append('<span>'+responseArray[x] + '</span>');
$("#subjects").on("click", "input[type='checkbox']", function() {
var $this = $(this);
if( $this.is(":checked") ) {
var data = $this.prev('span').html();
alert('Current checkbox is : '+ data )
}
});
It would be best to give your dynamically injected checkboxes a class to target them better, but based on your code try:
$("#subjects").on("click", "input", function() {
if( $(this).is(":checked") ) {
// do something
}
});
Since your input elements are added dynamically, you need to use jQuery's .on() function to bind the click event to them. In your case you need to use .on() to bind to an element that exist in the DOM when the script is loaded. In your case, the element with the ID #subjects.
This note from the docs is mainly for machineghost who downvoted my answer for no apparent reason:
Event handlers are bound only to the currently selected elements; they
must exist on the page at the time your code makes the call to .on().
To ensure the elements are present and can be selected, perform event
binding inside a document ready handler for elements that are in the
HTML markup on the page. If new HTML is being injected into the page,
select the elements and attach event handlers after the new HTML is
placed into the page.
$('#subjects input[type=checkbox]').on('click',function(){
alert($(this).prop('checked'));
});
or the change event: in case someone uses a keyboard
$('#subjects input[type=checkbox]').on('change',function(){
alert($(this).prop('checked'));
});
simple fiddle example:http://jsfiddle.net/Dr8k8/
to get the array example use the index of the inputs
alert($(this).prop('checked') +'is'+ $(this).parent().find('input[type=checkbox]').index(this)+ responseArray[$(this).parent().find('input[type=checkbox]').index(this) ]);
simplified example: http://jsfiddle.net/Dr8k8/1/
EDIT: Just for an example, you could put the results in an array of all checked boxes and do somthing with that:
$('#subjects>input[type=checkbox]').on('change', function() {
var checklist = [];
$(this).parent().find('input[type=checkbox]').each(function() {
$(this).css('background-color', "lime");
var myindex = $(this).parent().find('input[type=checkbox]').index(this);
if ($(this).prop('checked') == true) {
checklist[myindex] = responseArray[myindex];
}
});
$('#currentlyChecked').text(checklist);
});
EDIT2:
I thought about this a bit and you can improve it by using .data() and query that or store it based on an event (my button called out by its id of "whatschecked")
var responseArray = ['math', 'science', 'technology', 'engineering'];// just for an example
var myList = '#subjects>input[type=checkbox]';//to reuse
for (var x = 0; x < responseArray.length; x++) {
// here we insert it all so we do not hit the DOM so many times
var iam = "<br />" + responseArray[x] + "<input type='checkbox' />";
$("#subjects").append(iam);
$(myList).last().data('subject', responseArray[x]);// add the data
}
var checklist = [];// holds most recent list set by change event
$(myList).on('change', function() {
checklist = [];
$(myList).each(function() {
var myindex = $(this).parent().find('input[type=checkbox]').index(this);
if ($(this).prop('checked') == true) {
checklist.push($(this).data('subject'));
alert('This one is checked:' + $(this).data('subject'));
}
});
});
// query the list we stored, but could query the checked list data() as well, see the .each() in the event handler for that example
$("#whatschecked").click(function() {
var numberChecked = checklist.length;
var x = 0;
for (x = 0; x < numberChecked; x++) {
alert("Number " + x + " is " + checklist[x] + " of " + numberChecked);
}
});
live example of last one: http://jsfiddle.net/Dr8k8/5/
The general pattern to do something when a checkbox input is clicked is:
$('input[type=checkbox]').click(function() {
// Do something
})
The general pattern to check whether a checkbox input is checked or not is:
var isItChecked = $('input[type=checkbox]').is(':checked');
In your particular case you'd probably want to do something like:
$('#subjects input[type=checkbox]').click(function() {
to limit the checkboxes involved to the ones inside your #subjects element.