What is the process for dynamically creating a new textbox inside a div when a kendo button is clicked?

I am just starting to explore kendo UI. Within my HTML, I have a div:

<div id="newlabel"></div>

Inside this div, I would like to dynamically add new labels with increasing numbers using the functionality of a kendo UI button.

@(Html.Kendo().Button()
    .Name("button name")
    .HtmlAttributes(new { type = "button",
                          @class = "k-primary", 
                          id = "NewButton",
                          param = "newlabel",
                          style = "height:1.9em;font-size:11px;margin-top:8px;"})
    .Content("NEW BUTTON")
    .Events(ev => ev.Click("Addlabel")))
jqueryhtmlcsskendo-uikendo-asp.net-mvc

Answer №1

To simplify testing, I have created a demo for you to try out:

The setup in this demo is similar to the MVC Wrapper setup.

To implement this in your own project, just include @Data_target="{YourDivIDHere}" in the HTML attributes like this:

.HtmlAttributes(new { type = "button",
                          @class = "k-primary", 
                          @Data_target="MyDivHere", 
                          id = "NewButton",
                          param = "newlabel",
                          style = "height:1.9em;font-size:11px;margin-top:8px;"})

This will add a data-target attribute to the button so that you can target the correct containing div later on. You can also easily change the targeted div at any point.

Next, using the function I've designed called addItems, here's what happens:

function addItems(e)
              {

                var target = $(e.sender.element[0]).data("target");
                $('#' + target).append('<div class="form-group">
                 <label class="col-md-2 form-label">I\'m a label</label>
                 <div class="col-md-10">
                 <input type="textbox" class="form-control" />
                 </div></div>'); 


              }

In simple terms, this function retrieves the data-target attribute from the button and appends a label and textbox to the specified div.

If you have more complex requirements or need further assistance, feel free to reach out.

Note: Consider utilizing a kendo template for easier future edits.

Answer №2

To dynamically insert a label within the div, you can employ jQuery in the following manner:

$("<label id='dynamicLabel'>Example</label>").appendTo("#newElement");

Subsequently, you have the ability to adjust the content of the label using jQuery again, as portrayed below:

$("#dynamicLabel").text(value);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Implementing a restriction clause while executing a load additional data feature

I'm currently working on implementing a basic load more function for my web page. Right now, the page displays 8 results from the database. When the user scrolls, a load more button appears. Clicking this button triggers an ajax request to another PH ...

javascriptphpjqueryajax

Next.JS CSS modules are experiencing issues with functionality

Organizing the CSS structure for a project by creating a module of CSS for each component or page can sometimes present challenges. Take a look at the code snippet below: .navbar { display: flex; justify-content: flex-start; align-items: center; pa ...

cssreactjsnext.jsfrontendcss-modules

Leveraging Bootstrap cards to create clickable links

I am working with a bootstrap card that serves as a link. When I attempt to enclose it with an <a>, the styling of the card gets completely altered. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min ...

cssbootstrap-4

What exactly does Apple consider as a "user action"?

In the midst of my current web project, I am facing a challenge with initiating video playback after a swipe event. Despite utilizing the HTML5 video player and JavaScript to detect swipes, I have encountered difficulties in achieving this functionality. I ...

javascriptioshtmlvideo

Transform the JSON data column into a designated array

Looking to transform my JSON into an array let data = {1:{id: '2014-924', name: 'abc'},2:{id: '2014-925', name: 'xyz'}}; let result = ['2014-924','2014-925'];`output` ...

jqueryarrays

The getImageData function is returning undefined RGB values

I am trying to create a feature where by clicking on an image, I can retrieve the RGB values of that specific pixel. Below is the code snippet I have implemented: <html> <body> <canvas id="kartina" width="500" height="500"></canvas&g ...

javascripthtmlcanvasgetimagedata

Tips for adding symbols to MySQL database

Recently, I tackled a project that involved inserting data into a MySQL database using PHP and jQuery. The setup was smooth until I encountered an issue with inserting symbols like: :) :( :P =D :o ;) :v >:( :/ :'( ^_^ 8) B| <3 3:) O:) -_- o.O ...

phpjquerymysqlajaxdatabase

What is the best method for arranging various items in separate lists using JQuery UI?

Currently, I have a setup with 4 lists. When I drop an item from the lower list into the first list, it creates clones in the two lists below. I am looking for a solution where I can take an element from the top list and it automatically takes its clones ...

jqueryjquery-uijquery-ui-sortable

Selecting radio buttons in IE11 using JQuery

The code snippet below is used for handling form submission: $(".submitButton").click(function(event){ if ($(this).hasClass("disabled")){ event.preventDefault(); return false; } if (!$(this).hasClass("disabled")){ $('.invoice-form&a ...

javascriptjqueryhtmlinternet-explorer-11

`Optimal applications of doctype in relation to user interface design``

There is a wide variety of Web applications available on the internet. Which doctype is best suited for Web UI Developments? Please provide the URL for reference. Thank you ...

htmluser-interface

issue with customized select dropdown within a bootstrap modal window

Exploring how to implement a customized select box with unique CSS and search functionality within a Bootstrap modal. Here is the code snippet for the select element: <link rel="stylesheet" href="chosen.css"> <select data-placeholder="Choose ...

javascripthtmlcss

Can someone guide me on how to organize a div structure into a table format with the help of JQuery

I am new to JQuery and I have created a table using divs instead of the traditional table structure. Each row has the same ids, which I thought would help me sort the table. Here's an example of my code: <div class="column_title">Column 1</ ...

javascriptjquerysortingcss-tables

iOS Devices Experiencing HTTP 500 Error with JS Files and Libraries

I have encountered a puzzling issue with my web application. While it runs smoothly on PC devices without any errors, I am facing HTTP 500 errors when running it on iOS and inspecting it using Safari's Web Inspector. Specifically, I am seeing these er ...

javascriptjqueryiossafarimobile-safari

Ensure that the tables are HTML5 compliant by setting the cellpadding attribute for only specific tables, without

Perhaps I'm being a bit fussy. I'm looking to add cell padding to certain tables but not others, without having to manually edit each individual td element. I prefer to keep it HTML5 compliant, which means avoiding the cellpadding property of the ...

htmlhtml-tablecellpadding

looping through the iteration

Here is a link to my original plunker demonstration: http://plnkr.co/edit/9UBZ9E4uxAo1TXXghm1T?p=preview. In the case of div 4 (ng-if="show==4"), I am looking for a way to hide the particular div when the list is empty. Currently, each div is displayed fo ...

javascripthtmlangularjs

Steps to generate a unique URL for launching a Bootstrap Modal directly

I've encountered a problem where I'm trying to trigger a Modal in window B using a URL when clicking on an image link in window A. The image is nested inside an anchor tag like this: <a href="myserver.mydestinationB.com#myModal><img src= ...

javascriptjqueryhtmlcsstwitter-bootstrap

Converting code from JavaScript to Python with the help of AJAX

I recently came across a discussion on the topic of ajax request to python script, where individuals were attempting to achieve exactly what I am aiming for. However, I found one crucial piece of information missing. $.post('myPythonFile.py',{da ...

javascriptjquerypythonajax

Image proxy for Gmail

My html emails are ready to go, but I've encountered an issue where one of the png images won't display. Oddly enough, when I attempt to access the image through a proxy link, I receive a 404 error even though the image is accessible for public v ...

phphtmlgmailhtml-email

Easily manage and store substantial amounts of data (exceeding 5MB) across various pages during navigation

When navigating through various steps or pages of my website, I am in need of a reliable way to store different information. Currently, I am using sessionStorage as shown in the example below: sessionStorage.setItem("src", "" + $('#newImage').at ...

javascriptphphtmlstoragesession-storage

Selecting Elements with jQuery OR JavaScript

Question: jQuery attribute selector for multiple values I am facing a query regarding jQuery attribute selection. Here is the code snippet I have: $('input:radio[name=foo]').change(function() { blah(); }); $('input:radio[name=bar] ...

javascriptjqueryoperatorscss-selectors