How to hide and display contnet on ajax loaded data?

Question

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.

Do you mean something like a loading gif for user to see? – Felix Fong Oct 02 '16 at 11:16 — Felix Fong, Oct 02 '16 at 11:16

score 1 · Answer 1 · answered Oct 02 '16 at 11:16

1

<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>

answered Oct 02 '16 at 11:16

miniskulljob

28
4

Can you please add your `html`. Besides what @miniskulljob say (which is correct) I don't see any class reference in the `html` code you are posting here. – Franco Oct 02 '16 at 11:23

score 1 · Accepted Answer · edited May 23 '17 at 10:27

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.

First check if the div is visible or not, using jQuery or JavaScript. ( Reference: jQuery event to trigger action when a div is made visible )
If div is visible then change or add class swip-active.
then use SCRIPT 01.
make sure that swip-active class is used only once in one page

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!

That's worked! Thank you Ramesh Pardhi :) But the only problem is I am not able to change the class when div is visible. Can you help me with that? — Rocky Sena, Oct 02 '16 at 14:15

How to hide and display contnet on ajax loaded data?

2 Answers2