CODEWITHSUNDEEP
javascripthtmljquerytwitter-bootstrapbootstrap-4
aryanknp
aryanknp

Reputation: 1167

Jquery html not working on dynamically added element

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

Upvotes: 0

Views: 96

Answers (2)

Teemu
Teemu

Reputation: 23396

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();
}

}

Upvotes: 1

Sanjeev_gupta2812
Sanjeev_gupta2812

Reputation: 236

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

Upvotes: 0

Related Questions