I have 7 data in my database
I try to load my data from table using ajax
and php
.
but after I click the button load more the data is showing but load more
button is gone.
here my index.php code https://github.com/jazuly1/piratefiles/blob/master/index.php
here my ajax code
<script>
$(document).ready(function(){
$(document).on('click','.show_more',function(){
var ID = $(this).attr('id');
$('.show_more').hide();
$('.loding').show();
$.ajax({
type:'POST',
url:'getData.php',
data:'idpost='+ID,
success:function(html){
$('#show_more_main'+ID).remove();
$('.tutorial_list').append(html);
}
});
});
});
</script>
and my getdata.php code https://github.com/jazuly1/piratefiles/blob/master/getdata.php
before I click load more button
after I click load more button. the button is gone.
When "Show More" is clicked, you $('.show_more').hide()
which makes sense. But you never show it again? You also completely remove a similar selection ( $('#show_more_main'+ID).remove()
) but as far as I can tell, that doesn't have any effect.
Change the remove()
to something like:
$('.show_more').show();
$('.loding').hide();
The problem is you have removed the Load more
section with jQuery
and expecting it from the getData
API call. But the getData
API call returns html with <tr>...</tr>
's content and in addition Show more
section, if needed. It is better to either use JSON
response and generate those <tr>...</tr>
's manually in Java Script, or a JSON
response with two sections, may be in below format:
{
'content': '<tr><td>...</td></tr>....<tr><td>...</td></tr>',
'showMore': '<div class="show_more_main" ...</div>'
}
Than from the response (do not forget to use response = $.parseJSON(response)
) read the content
and append as $('.tutorial_list').append(response.content)
for data section and similarly $("table.table").append(response.showMore)
for show more section.
I believe you got the idea, where you are doing wrong.
But if you still want to use your own code instead of JSON
, just use the below trick.
Step 1: In getdata.php
update show more section with below code (Keeping the Show more
section invisible):
<?php endforeach;
if($data > $showLimit){ ?>
<div class="show_more_main" style="visibility:hidden" id="show_more_main<?php echo $tutorial_id; ?>">
<span id="<?php echo $tutorial_id; ?>" class="show_more" title="Load more posts" href="#" style="text-decoration: none;">Show more</span>
<span class="loding" style="display: none;"><span class="loding_txt"><i class="fa fa-spinner fa-pulse fa-3x fa-fw" style="font-size:12px;"></i>Loading....</span></span>
</div>
<?php }
}
}?>
Step 2: Move the hidden section Show more
to the right place using Java Script
in index.php
<script>
$(document).ready(function(){
$(document).on('click','.show_more',function(){
var ID = $(this).attr('id');
$('.show_more').hide();
$('.loding').show();
$.ajax({
type:'POST',
url:'getData.php',
data:'idpost='+ID,
success:function(html){
$('#show_more_main'+ID).remove();
$('.tutorial_list').append(html);
//Move to new right place if show more section exists. You may give data table an id if you want
$(".show_more_main").appendTo("table.table");
$(".show_more_main").show();
}
});
});
});
</script>
I hope this helps you. Feel free to write comment, if any part is not clear to you.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.