Jquery html not working on dynamically added element

Question

I do this first

var columns = row.getElementsByTagName('td');

columns[2].innerHTML ='<Button class="btn btn-success" style="margin-right:4px;" onclick="savecategory(this.parentNode,this)">Save</Button>

now my function

function savecategory(but,save_button){
$(save_button).html('<span class="spinner-border spinner-border-sm"></span> Save');
$(save_button).attr("disabled",true);
//These two lines do not work

}

The lines inside savecategory does'nt work , but when i console it shows correct button

Edit here is complete function:

function savecategory(but,save_button){
  var row = but.parentNode;
var columns = row.getElementsByTagName('td');
var newmain = $(columns[0]).children('select[name=maincategory]').val();

columns[1].innerHTML = (columns[1].innerHTML).replace(/&nbsp;/g, '');
var newcat = $(columns[1]).text();
var oldmain = columns[0].getAttribute('data-init');
var oldcat = columns[1].getAttribute('data-init');

$(save_button).html('<span class="spinner-border spinner-border-sm"></span> Save');
$(save_button).attr("disabled",true);

var xmlhttp=new XMLHttpRequest();
  xmlhttp.onreadystatechange=function() {
    if (this.readyState==4 && this.status==200) {
    var arr= JSON.parse(this.responseText);
if(arr[0] == 1){
columns[0].innerHTML = newmain;
columns[1].innerHTML = newcat;
columns[1].setAttribute("contenteditable","false");
columns[0].setAttribute('data-init',newmain);
columns[1].getAttribute('data-init',newcat);

columns[2].innerHTML ='<Button class="btn btn-primary" onclick="editcategory(this.parentNode)"><i class="zmdi zmdi-edit zmdi-hc-lg"></i></Button>';


$('select[name ="dishtype"] option[value="'+oldcat+'"]').remove();
$('select[name ="dishtype"]').append('<option value="' + newcat + '">' + newcat + '</option>');
var $alen = $('.scrollmenu').eq(0).children().length;


$('.scrollmenu').eq(0).find('a').each(function(){
  if($(this).attr('data-init').localeCompare(oldcat) == 0){
    $(this).attr('data-init',newcat); 
     $(this).html(newcat);
  }
  });

var area = document.getElementsByClassName(oldcat)[0];
$(area).find("p:first").html(newcat);

$(area).removeClass(oldcat).addClass(newcat);

alert("Category updated");

}
else{
  alert(arr[1]);
}
$(save_button).html('Save');
$(save_button).attr("disabled",false);


    }
else{
$(save_button).html('Save');
$(save_button).attr("disabled",false);
}

  }


  xmlhttp.open("GET","url.php?oldmain="+encodeURIComponent(oldmain)+"&oldcat="+encodeURIComponent(oldcat)+"&newmain="+encodeURIComponent(newmain)+"&newcat="+encodeURIComponent(newcat),true);

  xmlhttp.send();



}

Edit code is written above please check it is written above , i am not able to find error , that is what i am doing , Rest everywhere this type of approach is working , i am not understand it

Who is save_button? Should't be places under quotes like $('save_button') ? — Mara Black
– Mara Black, Commented Apr 14, 2021 at 11:18
@MaraBlack It's the button in the HTML, the value is passed within the arguments of the inline listener. There doesn't seem to be a save_button tag in the markup, hence your suggestion won't work. — Teemu
– Teemu, Commented Apr 14, 2021 at 11:20
I can't reproduce the issue, the code seems to work as it is ..? Notice, that the span element is empty, there's nothing to see in that inline element. — Teemu
– Teemu, Commented Apr 14, 2021 at 11:29

Teemu · Accepted Answer · 2021-04-14 13:04:47Z

After you've edited the question, we can see, that the Save button is restored in the else block in the readystatechange handler when it detects the response wasn't successful. However, readystatechange fires multiple times, and you're overriding the content of the original Save button each time the event fires, and not setting the spinner-span, and setting its disabled attribute to false, until the request actually detects a succesful response.

To fix this, listen load event on the XHR object instead of readystatechange, it fires only once. Check the status of the request, and if not successful (200), the else block will restore the Save button. You don't need to reset the button in the success handler, as the button will be removed from the DOM when you're setting innerHTML of the cell. A shortened code for this:

function savecategory(but, save_button) {
  var row = but.parentNode,
    columns = row.getElementsByTagName('td');
  // Show the loadtime Save button
  $(save_button).html('<span class="spinner-border spinner-border-sm"></span> Save');
  $(save_button).attr("disabled", true);

  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onload = function() {
    if (this.status == 200) {
      columns[2].innerHTML = '<button class="btn btn-primary" onclick="editcategory(this.parentNode)"><i class="zmdi zmdi-edit zmdi-hc-lg"></i></button>';      
    } else {
      // Unsuccessful AJAX call, restore the Save button
      $(save_button).html('Save');
      $(save_button).attr("disabled", false);
    }
  }
  // 
  xmlhttp.open("GET", "...", true);
  xmlhttp.send();
}

}

Sanjeev_gupta2812 · Accepted Answer · 2021-04-14 11:31:22Z

0

If you're creating it in the static HTML then just use .ready(handler) or .on("load", handler).

f you're using jQuery's load() function then there's a callback you can run when the contents been loaded:

$('#element').load('sompage.html', function(){ / callback / });

In the callback function you can write you function to call the funtion.I hope this works for you.Thanks

answered Apr 14, 2021 at 11:31

Sanjeev_gupta2812

2544 silver badges20 bronze badges

1 Comment

aryanknp Over a year ago

what do you mean can you give me sample related to my case

Collectives™ on Stack Overflow

Jquery html not working on dynamically added element

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related