locked
How to add button dynamically using jquery RRS feed

  • Question

  • User2072242043 posted

    Hello,
    I want to add a button dynamically and have tried so many ways to do so but still i'm unable to add a button where I want.

    Here is my code structure:

    1: html code

    <form runat="server">
                           <div class="form-group">
                           <label for="ClassRoomNameTextBox">Class room name</label>
                           <asp:TextBox ID="ClassRoomNameTextBox" placeholder="Pease enter class room name" class="form-control" runat="server"></asp:TextBox>
                           </div>
    
                           <div class="form-group">
                           <label for="StudentsLimitTextBox">Students limit</label>
                           <asp:TextBox ID="StudentsLimitTextBox" placeholder="Pease enter students limit" class="form-control" runat="server"></asp:TextBox>
                           </div>
    
    
                           <input type="button" id="btnAddClassRooms" class="btn btn-primary" value="Add  Class" />
    <div class="cancelButton">

    // Here I want to add button dynamically
    <div/>
    </form>

    2: Jquery code

    //Edit row
                $('#mytable').on('click', '#edit', function () {
                    var id = $(this).attr("value");
                    $.ajax({
                        url: 'AddUpdateDeleteClassRooms.asmx/SelectClassRoomsById',
                        data: { roomId: id },
                        method: 'post',
                        dataType: 'xml',
                        success: function (data) {
                            var xmlData = $(data);
                            var toBeUpdatedRooomName = $('#ClassRoomNameTextBox').val(xmlData.find('classRoom').text());
                            $('#StudentsLimitTextBox').val(xmlData.find('classLimit').text());
                            $('#btnAddClassRooms').val("Update Room");
                            $('#cancelButton').appendTo('<input type="button" id="cancelRoomBtn" class="btn btn-danger" value="Cancel" />');
    //it don't work }, error: function (err) { alert(console.log(err.d)); } });

    I have tried all these to add buttons dynamically 

    var cancelButton = $('<input type="button" value="Cancel" />');
        $input.appendTo($("cancelButton"));
    //This also dont work for me

    Please help me

    Friday, December 16, 2016 7:51 AM

Answers

  • User1724605321 posted

    Hi ,

    You have not set id to div :

    <div class="cancelButton">
    
                           // Here I want to add button dynamically
                           <div/>    notice here should be </div>

    You should use Class Selector (“.class”) , so you could modify your code as :

    <div class="cancelButton">
    
                          
     </div>

    JS :

                $('.cancelButton').append('<input type="button" id="cancelRoomBtn" class="btn btn-danger" value="Cancel" />');
    

    Best Regards,

    Nan Yu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, December 16, 2016 8:56 AM

All replies

  • User1724605321 posted

    Hi ,

    You have not set id to div :

    <div class="cancelButton">
    
                           // Here I want to add button dynamically
                           <div/>    notice here should be </div>

    You should use Class Selector (“.class”) , so you could modify your code as :

    <div class="cancelButton">
    
                          
     </div>

    JS :

                $('.cancelButton').append('<input type="button" id="cancelRoomBtn" class="btn btn-danger" value="Cancel" />');
    

    Best Regards,

    Nan Yu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, December 16, 2016 8:56 AM
  • User2072242043 posted

    Thanks Nan Yu.
    It was my mistake.
    I'm done with that but adds on new line as inside the dive which is on new line but I want to show it beside this button

    <input type="button" id="btnAddClassRooms" class="btn btn-primary" value="Add Class" />

    not on new line.
    What should I do now?

    thanks again

    Friday, December 16, 2016 9:19 AM