All geek questions in one place

JQuery returns true for checking "is: empty" on added html

A user can upload an image on my site, after which jQuery inserts it into the page using append (). After adding, I need to determine if there is something or not, but jQuery "is: empty" check returns true, despite the fact that the content has been added. If I reload the page, checking "is: empty" will return false. It seems that jQuery does not update the DOM when added and then checks for its non-updated model when running "is: empty". Does anyone know if there is a way around this?

EDIT:

Added from comments -

if ($('#issueimage1'+issueid).is(':empty')) { 
    $('#issueimage1'+issueid).append(responseText); 
} 
elseif ($('#issueimage2'+issueid).is(':empty')) {
    $('#issueimage2'+issueid).append(responseText); 
} 
else { 
    $('#issueimage3'+issueid).append(responseText); 
}

The idea is that a user can add up to three images. I have a highlighted item for each image. He sequentially checks each element to see where to insert it. Initially, this works fine (if there are two pictures on the page load, it will be inserted into the third slot). When adding two images without refreshing the page, it fails

+3
source share
2 answers

When you say " is:empty", you mean

$([selector]).is(":empty")

?

This works for me as shown in this working demo.

$(function() {
    $("#empty").click(function() {
      alert($('#myDiv').is(':empty'));
    });

    $("#append").click(function() {
      $('#myDiv').append('<span>Appended!</span>');
    });
});

<!-- not all html shown, for brevity -->

<body>
  <div id="myDiv"></div><br/>
  <button id="empty">Check if div empty</button>
  <button id="append">Append to div</button>
</body>

EDIT:

:empty , , , , , . , , .length <td>, , - -; 0, ( .length .size(), .length, , .length ).

, , <tr>, this

$('td', this).each(function() {
    // this inside the function will reference the <td>
    // get any child elements and check the length
    if ($('*',this).length === 0) {
        // this <td> is empty!
        // break out of the each loop 
        return false;
    }
});

, . /edit URL-, .

jQuery ( , )

$('a.select').click(function(e) {
  e.preventDefault();
  var anchor = $(this);  
  var radio;

  $('input:radio[name="imagePicker"]').each(function() {
    if (this.checked === true) {
      radio = $(this);
      return false;
    }
  });

  if (radio === undefined) {
    $('#comment').text('You must select an image').css('color','red');
  }
  else {
    var checked = false;
    var tds = anchor.closest('tr').children('td');
    tds.each(function(i, val) {
      if ($('*', this).length === 0) {
        radio.next().clone(true).appendTo(this);
        $('#comment').text('Appended to td Image ' + i).css('color','green');
        checked = true;
        return false;
      }
    });    
    if (!checked) {
      $('#comment').text('No empty td in this row').css('color','red');
    }  
  }
});

$('input:radio[name="imagePicker"]').click(function() {
  $('#comment').text('');
});

HTML

  <div>
    <div class="imagePicker">
      <input type="radio" name="imagePicker" />
      <img src="http://www.website-designs.com/images/resources_1/icons/Dead.gif" alt="image" />
    </div>
    <div class="imagePicker" >
      <input type="radio" name="imagePicker" />
      <img src="http://www.website-designs.com/images/resources_1/icons/Dead2.gif" alt="image" />
    </div>
    <div class="imagePicker" >
      <input type="radio" name="imagePicker" />
      <img src="http://www.website-designs.com/images/resources_1/icons/Diablo.gif" alt="image" />
    </div>
    <div class="imagePicker" >
      <input type="radio" name="imagePicker" />
      <img src="http://www.website-designs.com/images/resources_1/icons/Ckicken.gif" alt="image" />
    </div>
  </div>
  <br/><br/>
  <span id="comment"></span>
  <br/>
  <table style="margin:10px;">
  <thead>
    <tr>
      <th></th>
      <th>Image 1</th>
      <th>Image 2</th>
      <th>Image 3</th>        
    </tr>
  </thead>
  <tbody>
    <tr>
    <td><a href="#" class="select">Select</a></td>
      <td></td>
      <td></td>
      <td></td>        
    </tr>
    <tr>
      <td><a href="#" class="select">Select</a></td>
      <td></td>
      <td></td>
      <td></td>        
    </tr>
    <tr>
      <td><a href="#" class="select">Select</a></td>
      <td></td>
      <td></td>
      <td></td>        
    </tr>
  </tbody>
  </table>
+24

FYI, : empty false:

<div id="first"></div>

<div id="second"> </div>

console.log($('#first').is(':empty')); //true
console.log($('#second').is(':empty')); //false
+5

Source: https://habr.com/ru/post/1716850/

More articles:


All Articles