CODEWITHSUNDEEP
javascriptjqueryhtmlajax
Rocky Sena
Rocky Sena

Reputation: 481

How to hide and display contnet on ajax loaded data?

I am trying to display and hide data which is loaded using Ajax.

$.ajax({
    type: "POST",
    url: "/swip.php",
    data: {pid:sldnxtpst,sldnu:sldnu},
    success: function(result) {
       $('.swip').prepend(result);
    }
});

This data is loaded when the user scrolls to bottom.

<div>Loaded data on document ready</div>
<div>Loaded data on ajax </div>
<div>Loaded data on ajax </div>
<div>Loaded data on ajax </div>

Data I want to hide and display on click:

<div class=".comment-box<?php echo $sldnu; ?>"> display / Hide </div>
<div class=".comntbxfrm<?php echo $sldnu; ?>">Content </div>

on click on display/hide div I want to toggle ,comntbxfrm div. It's just not working with this script.

<script>
    $(document).ready(function(){
    var cmnbxnu = <?php echo $sldnu; ?>;
        $('.comment-box'+cmnbxnu).each(function () {
        $(document).on('click','comment-box', function(){
            alert(cmnbxnu);
            $('.comntbxfrm'+cmnbxnu).toggle();
        });
        });
    });
</script>

It's confusing me. What should I do to display and hide div's on Ajax loaded data.

Upvotes: 1

Views: 408

Answers (2)

Ramesh Pardhi
Ramesh Pardhi

Reputation: 407

I think you post this question without rechecking it. Please take a look on your question again. May be you can provide more data on what you have tried.

May be this logic can solve your problem.

Structure of your code need to be like this:

<div class="swip">Loaded data on document ready</div>
<div class="swip">Loaded data on ajax </div>
<div class="swip-active">Loaded data on ajax </div>
<div class="swip">Loaded data on ajax </div>

SCRIPT 01:

     <script>
        $(document).ready(function(){
            $(document).on('click','.swip-active .comment-box', function(){
                $('.swip-active .comntbxfrm').toggle();
            });
        });
    </script>

I think this simple. :) have great coding!

Upvotes: 1

miniskulljob
miniskulljob

Reputation: 28

<div class=".comment-box<?php echo $sldnu; ?>"> display / Hide </div>
<div class=".comntbxfrm<?php echo $sldnu; ?>">Content </div>

You need to remove the dot from the class names in the class attribute, like this:

<div class="comment-box<?php echo $sldnu; ?>"> display / Hide </div>
<div class="comntbxfrm<?php echo $sldnu; ?>">Content </div>

Upvotes: 1

Related Questions