how to append with dynamic id.
$(table).append(");
please suggest me how to generate different id of text box and on click function on #button(that button is also append {want to create dynamic id of button also } )
here is what require, dynamic id can be generated and can be refer with 'on' event
Here is complete solution
$( document ).ready(function() {
$('#add').off('click').on('click',function() {
var uniqid = Date.now();
$("#form").append("<input class='txtBox' id="+uniqid+" />");
});
$('#form').on('change keyup paste', '.txtBox', function() {
alert($(this).attr('id'));
});
});
Related
I am planning to use Jquery datatable.
I want to select many columns and enable user to select which column to display.
I have found this,
https://datatables.net/examples/api/show_hide.html
But what i want is that toggle line to be a dropdown. How can i do this?
Or is there any other plugin which supports this.???
Take a look at this example here. It's creating the dropdown select element which will toggle the visibility of the column selected.
The code is:
$(document).ready( function () {
var table = $('#example').DataTable();
table.columns().every(function(index, tableCounter, counter) {
$('<option/>').val(counter).text($('#example thead th:eq(' + counter + ')').text()).appendTo('#select');
});
$('#select').on('change', function() {
var visible = table.column($(this).val()).visible();
table.column($(this).val()).visible(!visible);
});
} );
Seems like I cannot catch the click event on dynamically created elements with dojo.
This is how I create the list of links:
for(var i=0; i<items.length; i++){
console.log( items[i].getAttribute("jid") )
dojo.place("<li><a href='#' id='temp'>" + items[i].getAttribute("firstname") + "</a></li>", "log");
}
on( '#temp' ).on( 'click', function( evt ) {
console.log( "click" );
});
Unfortunately the event doesn't get registered.
Here are the docs for dojo/on; you need to pass an element, an event type, and a handler. It looks like you will need dojo/query where you're trying to use on the first time; docs are here.
It looks like you want to set up a click handler for each of your dynamically created elements. So, query for those elements and set up a click handler on each of them.
I changed your id to a class because it's not a good idea to have multiple elements with the same id, but the concept is the same. Instead of your on chain above, something like this would work:
query('.temp').forEach(function(t) {
on(t, 'click', function(evt) {
console.log('click', evt);
});
});
Here's a working fiddle with some dummy items; presumably your items are slightly different.
I have a problem in preserving the values in the textbox after dropdownlist selected index changed in asp.net mvc. Below is the code for initiating the dropdown onchange event.
#Html.DropDownList("BranchId",null,"Select Branch", new { onchange = "location.href='/User/GetRoles?BranchId='+this.options[this.selectedIndex].value" })
Аnd the roles dropdown binded with the values, but what i typed in the textboxes just above the branch dropdown get lost.
Please help me.
Regards,
Azeem
This is because you are changing your URL location by using location.href. What exactly do you want to achieve? If you need to load certain logic, you might as well bind change event to jQuery function that could load data from the server, and then you do something with that data.
$(document).ready(function() {
$("#BranchId").change(function() {
$.getJSON(YourUrlThatReturnsValues, {data: yourparameter}, function() {
// do some processing here.
});
});
});
The other option is to use Ajax Helpers instead of Html Helpers. Instead of Html.DropDownList you would use Ajax.DropDownList.
You may try something like that:
$(function () {
$('#BranchId').change(function () {
var id = $("#BranchId option:selected").val();
var data = {BranchId: id };
$.get("#Url.Action("User", "GetRoles")", data).done(function(d){
$('.somediv').val(d.rolename)
});
});
I've got a nested grid within my grid, and it works perfectly, but the client doesn't like to use the arrow on the left and asked for a button to be added in order to show the child grid.
The example on the Kendo website shows how to automatically open the first row, I just want a way to expand the grid from a custom control in the same way that the left selector does it.
I've got the custom command working, and it executes the sample code, but I just need some help with the javascript required to make it work for the current row.
columns.Command(command =>
{
command.Edit().Text("Edit").UpdateText("Save");
command.Destroy().Text("Del");
command.Custom("Manage Brands").Click("showBrandsForAgency");
And the js with the standard example of opening the first row:
function showBrandsForAgency(e) {
this.expandRow(this.tbody.find("tr.k-master-row").first());
}
Please help by giving me the js required to expand the row clicked and not the first row?
* EDIT *
Modified the solution provided by Atanas Korchev in order to get it to work on only the button and not the whole row.
I'd prefer a solution that uses the function showBrandsForAgency instead of a custom funciton but this does the job:
$(document).ready(function () {
$("#grid").on("click", "a", function (e) {
var grid = $("#grid").data("kendoGrid");
var row = $(this).parent().parent();
if (row.find(".k-icon").hasClass("k-minus")) {
grid.collapseRow(row);
} else {
grid.expandRow(row);
}
});
});
You can try something like this:
$("#grid").on("click", "tr", function(e) {
var grid = $("#grid").data("kendoGrid");
if ($(this).find(".k-icon").hasClass("k-minus")) {
grid.collapseRow(this);
} else {
grid.expandRow(this);
}
});
When using jQuery on the function context (available via the this keyword) is the DOM element which fired the event. In this case this is the clicked table row.
Here is a live demo: http://jsbin.com/emufax/1/edit
Same results just Simpler, faster, and more efficient:
$("#grid").on("click", "tr", function () {
$(this).find("td.k-hierarchy-cell .k-icon").click();
});
Inside a jQuery loop, I'm trying to attach a click event to a dynamically created anchor tag which is contained in an LI element. The LI itself is dynamically created inside a static UL element. For some reason nothing gets fired when the anchor is clicked. Here is a simplified version of the problematic code:
$.each($.MyProject.cities, function (index, city) {
$('<li></li>').html($("<a></a>").attr("href", "javascript:void(0)").click(function (event) {
console.info("Anchor clicked!");
event.preventDefault();
return false;
}).html($("<span></span>").text(city.FullName).attr("class", "autoText"))).appendTo($("#visiblecities"));
});
where visiblecities is the id of the UL element and cities is a collection on which the loop iterates.
Any idea why the click event is not working?
Use event delegation to set up a single event handler that will react to all <a> elements, even if they're added after the code executes:
$('#visibleCities').on('click', 'a', function(event) {
console.info('Anchor clicked!');
event.preventDefault();
return false;
});
Though, as gdoron mentioned in the comments, your <a> elements don't currently have any content so they won't actually be clickable.
use .on.
$('a').on('click',function(){
//code here
});
Try
$('li a').on('click',function()
{
//code here
});
$.each($.MyProject.cities, function (index, city)
{
$('<li></li>').html($("<a></a>").attr("href", "javascript:void(0)")).appendTo($("#visiblecities"));
});
use live method instead of click
$.each($.MyProject.cities, function (index, city) {
$('<li></li>').html($("<a></a>").attr("href", "javascript:void(0)").live("click",function (event) { console.info("Anchor clicked!"); event.preventDefault(); return false; })).appendTo($("#visiblecities"));
});