Check if table tr td is not empty

Question

I want to check if the table tr td still gots the dummy text. If thats true then a message should appear that they have to enter some text there ( by drag and dropping )

Drag and drop is working thats not the problem i just need to check if the td still got the dummy tekst else the cannot proceed to the next step

here is my html table layout :

<table width="900px" style="background-color: #dcdcdc;">
    <tbody class="sortable">
   <tr>
       <td>
           <table width="90%" style="background-color:#85ca00;; margin:0 auto; border: none; border-collapse: collapse; padding: 0; ">
               <tbody>
               <tr >
                   <td align="left" style="padding:10px; " class="dropzone">
                       s                 
                   </td>
                   <td align="right" style="padding:10px;" class="dropzone">
                       <p class="dummyTekst">s</p> 
                   </td>
               </tr>
               </tbody>
           </table>

           <table width="90%" style="background-color:white; margin:0 auto;  background-color:lightgrey;border: none; border-collapse: collapse; padding: 0; ">

                <tr style="background-color:white;">
                   <td width="200px;" style=" vertical-align:top;">
                       <table style=" border: none; border-collapse: collapse;  background-color:lightgrey; margin:10px;" width="100%" align="left" class="dropzone Required ">
                           <tbody  >
                                <th style="background-color:gray">Menu</th>
                                <tr  ><td ><p style="padding:10px;" class="dummyTekst">Drop  content</p></td></tr>
                            </tbody>
                       </table>
                       <table style=" border: none; border-collapse: collapse; background-color:lightgrey;  margin:10px;" width="100%" align="left" class="dropzone Required">
                           <tbody>
                             <th style="background-color:gray">Menu</th>
                             <tr><td ><p style="padding:10px;" class="dummyTekst">Drop  content</p></td></tr>
                           </tbody>
                       </table>
                   </td>
                   <td style="vertical-align:top; margin-top:20px;" >
                       <table style=" border: none;  background-color:lightgrey; border-collapse: collapse; margin:10px;" width="90%" align="right" class="dropzone Required">
                           <tbody>
                             <th style="background-color:gray">Main Content</th>
                             <tr ><td ><p style="padding:10px;" class="dummyTekst">Drop  content</p></td></tr>
                           </tbody>
                       </table>
                   </td>
               </tr>

           </table>
           <table width="90%" style="background-color:#85ca00; margin:0 auto; border: none; border-collapse: collapse; padding: 0;" class="dropzone">
               <tr >
                   <td align="center" style="padding:10px;" ></td>
               </tr>
           </table>
       </td>
   </tr>
    </tbody>
</table>

the p tag is removed if people drop content there if they didn't a message should appear there

I tried this :

function checkTemplate(){
            $jQ('.Required > tbody > tr > td').each(function(index){
            if($jQ(this).children().hasClass('dummyText'));
            console.log('Empty');
             });
           }

Answer 1

As I commented:

dummyTekst != dummyText

You're checking for a class dummyText where you provide dummyTekst as actual classname. Besides that. You don't have to each all the TD's and loop the children. Just check if the class is present. See fiddle: http://jsfiddle.net/z5oyL9cw/

$(document).ready(function(){
    if ($(".dummyTekst").length > 0) {
        alert('We still have dropzones');
    }
});

Answer 2

I would have written it something like this:

function checkTemplate(){
    $jQ('table > tbody > tr > td').each(function(index){
        if($jQ(this).children('p.dummyTekst').length == 0){
            console.log('Empty');
        }
    });
}

Answer 3

Take a look into jQuery's .each(): http://api.jquery.com/each/

It iterates over every instance of... whatever you want to target. So, yours might be:

$( "td" ).each(function() {

From there, I'd have to look at your javascript to know the best way to check to see if the user changed anything. One option is using jQuery's .has to see if the p exists. http://api.jquery.com/has/ Or you can simply check the child element itself. Once you post your JS, I can say with more certainty.

Answer 4

Why don't you just add a CSS class to your cells (ie has-dummy-text) and use it as a flag?

In your example, say for instance:

<table>
<!-- Rest of code ommitted for clarity ... -->
 <tbody>
     <th style="background-color:gray">Menu</th>
     <tr><td class="has-dummy-text"><p style="padding:10px;" class="dummyTekst">Drop  content</p></td></tr>
</tbody>

That way you can manage cell's state by adding or removing the class via jQuery's .addClass() or .removeClass() methods, and then check if cell still has your initial dummy-text state by checking with .hasClass() method. (See jQuery class manipulation methods for more info).

Answer 5

If you want to make sure that your child 'p.dummyTekst' is there and also not empty, you should use the .is() from jquery UI. Just to be sure and avoid flying eggs and stuff :P. Also, to place text in the P, use .append.

$jQ('.required > tbody > tr > td').each(function(index){
    if( $jQ(this).children('p.dummyTekst').is(":empty") ) {
        $jQ(this).children('p.dummyTekst').append("Your text here");
    }
});

Please note that browsers can mess around with this, if you have problems using the .is(":empty") try to use $.trim() from jQuery. If he can't trim ( $.trim() ), the element should be empty.

$jQ('.required > tbody > tr > td').each(function(index){
    if ( !$jQ(this).children('p.dummyTekst').trim() ) {
        $jQ(this).children('p.dummyTekst').append("Your text here");
    }
});

Answer 6

I'd try something on the line of this (I don't know JQuery very well, but I do know some JavaScript, and maybe you can convert it; sorry if it isn't helpful.

function checkTemplate()  {
  var dummy = document.getElementByClassName(dummyTekst);
  if(dummy.innerHTML == "s")  {
  [Your Continue Function]
  }
  else  {
    alert(You must have the dummy text!)
  }
  }