appending with .each and getting values on next looping jquery

Question

Please refer to the following code:

    var index=0;
    var load=0;
    $("td.load_ads").each(function(){
        var loading=$(this);
        $.post('/self_coded_helpers/jpost_get_ads.php',{index:index,type:'fetch_id'},function(data){
            if($("input.exist").length > 0){
                $("input.exist").each(function(){
                    if($(this).val()==data){
                        load='0';
                    }else{
                        load='1';
                    }
                });
            }else{
                load='1';
            }
            if(load == 1){
                $.post('/self_coded_helpers/jpost_get_ads.php',{index:index,type:'fetch_details',id:data},function(data2){
                    $("div.main_ads_div").append('<input type="hidden" class="exist" name="exist" value="'+data+'">');
                    if(data2!=0){
                        loading.html(load+'--'+data2);
                    }else{
                        loading.html("Place a Free Ad Now!");
                    }
                });
            }else{
                loading.html(load+"--"+data+"Place a Free Ad Now!");
            }
        });
        index=index+1;
    });

What I did was that I appended an input element every time I looped over td.load_ads:

$("div.main_ads_div").append('<input type="hidden" class="exist" name="exist" value="'+data+'">');

Hoping I could get it on my next looping of the same .each.

But var load keep returning 1 as my input.exist length is always false in this particular case.

Is it because the input doesn't get appended that quickly?

HTML Code:

    <table id="main_ads_table" col="7" row="4">
        <tr>
            <td colspan="8"></td>
        </tr>
        <tr>
            <td class="load_img"></td>
            <td class="load_img"></td>
            <td class="load_img"></td>
            <td class="load_img"></td>
            <td class="load_img"></td>
            <td class="load_img"></td>
            <td class="load_img"></td>
            <td class="load_img"></td>
        </tr>
        <tr>
            <td class="load_ads"></td>
            <td class="load_ads"></td>
            <td class="load_ads"></td>
            <td class="load_ads priority"></td>
            <td class="load_ads priority"></td>
            <td class="load_ads"></td>
            <td class="load_ads"></td>
            <td class="load_ads"></td>
        </tr>
        <tr>
            <td class="load_ads"></td>
            <td class="load_ads"></td>
            <td class="load_ads"></td>
            <td class="load_ads priority"></td>
            <td class="load_ads priority"></td>
            <td class="load_ads"></td>
            <td class="load_ads"></td>
            <td class="load_ads"></td>
        </tr>
        <tr>
            <td class="load_ads"></td>
            <td class="load_ads priority"></td>
            <td class="load_ads priority"></td>
            <td colspan="2">
                                            <div id="main">

                                            <?php if ($this->countModules('position-12')): ?>
                                                    <div id="top"><jdoc:include type="modules" name="position-12"   />
                                                    </div>
                                            <?php endif; ?>

                                                    <jdoc:include type="message" />
                                                    <jdoc:include type="component" />

                                            </div><!-- end main -->
            </td>
            <td class="load_ads priority"></td>
            <td class="load_ads priority"></td>
            <td class="load_ads"></td>
        </tr>
        <tr>
            <td class="load_ads"></td>
            <td class="load_ads"></td>
            <td class="load_ads"></td>
            <td class="load_ads priority"></td>
            <td class="load_ads priority"></td>
            <td class="load_ads"></td>
            <td class="load_ads"></td>
            <td class="load_ads"></td>
        </tr>
        <tr>
            <td class="load_ads"></td>
            <td class="load_ads"></td>
            <td class="load_ads"></td>
            <td class="load_ads priority"></td>
            <td class="load_ads priority"></td>
            <td class="load_ads"></td>
            <td class="load_ads"></td>
            <td class="load_ads"></td>
        </tr>
    </table>

.POST script

    $type=$_POST['type'];
    function limit_words($string, $word_limit)
    {
        $words = explode(" ",$string);
        return implode(" ",array_splice($words,0,$word_limit));
    }

    if($type=='fetch_id'){
        $query="SELECT * FROM ads1_adsmanager_ads ORDER BY RAND() LIMIT 1";
        $db->setQuery($query);
        $ad_details=$db->loadRow();

        echo $ad_details[0];
    }elseif($type=='fetch_details'){
        $id=$_POST['id'];
        $query="SELECT * FROM ads1_adsmanager_ads WHERE id=$id";
        $db->setQuery($query);
        $ad_details=$db->loadRow();

        if(!empty($ad_details)){
            echo '<input type="hidden" name="id" value="'.$ad_details[0].'">';
            echo limit_words($ad_details[9],5);
            echo '<br />';
            echo limit_words($ad_details[10],20);
        }else{
            echo '0';
        }

    }

Added my HTML and Post Script. See if it can be of more help.

Answer 1

You're making it very difficult on yourself. You don't need to first collect ID's or to fetch each individual ad using ajax. By just getting everything in 1 post you don't have the problem with duplicates in the first place.

jpost_get_ads.php:

function limit_words($string, $word_limit)
{
    $words = explode(" ",$string);
    return implode(" ",array_splice($words,0,$word_limit));
}

$count = (int)$_POST['count'];
$query="SELECT id, title, description FROM ads1_adsmanager_ads ORDER BY RAND() LIMIT $count";
$db->setQuery($query);
$ad_details = array();

while ($row = $db->loadAssoc()) {
    $key = array_search($ids, $row['id']);
    $row['title'] = limit_words($row['title'],5);
    $row['description'] = limit_words($row['description'],20);

    $ad_details[$key] = $row;
}

header('Content-Type: application/json');
echo json_encode($ad_details);
exit();

The javascript

var count = $("td.load_ads").length;

$.post('/self_coded_helpers/jpost_get_ads.php', { count: count } function(ads){
   $("td.load_ads").each(function(){
      var ad = ads.unshift()
        , content;

      if (ad) {
         content = ad.title + "<br>" + ad.description;
      } else {
         content = "Place a Free Ad Now!";
      }

      $(this).html(content);
    });
});