append images to html page on click on load more button

307
May 13, 2017, at 11:56 PM

Dynamic HTML page with PHP that has 12 images in first load and theres load more button to load another 12 image on click event,

Now the idea of this code to reduce page load time, So every things is going well but i have event onclick for each image loaded in this html page now how i can append new 12 images over the first 12 and so on and keep the event foreach image still running

here's the code i use ,

php to get first 12 images

$results_per_page = 12;
$page = 1;
$start = ($page-1)*12;
$data['styles'] = $this->Discover_model->get_more_styles($start); 

html handling images as

<div class="product-list grid column3-4-wrap" id="interiors_samples" >
                        <?php if($styles):?>
                        <?php foreach ($styles as $style) {?>
                        <div class="img_card col">
                                    <div class="sampleFind">
                                        <img class = "Int_img"  id="<?php echo $style->id?>" src="<?php echo base_url();?>include/int_imgs/ <?php echo $style->img_name;?>" alt="product-image">
                                    </div>
                        </div>
                        <?php }?>
                        <?php endif;?>
                            </div>

jquery function to load more images over firs image

$('#load').click(function(){
var click_time = 0;
                 if(click_time === 0){
                     var page = 2;
                    }
                 click_time++;
                 $.ajax({
                    type:'POST',
                    data:{pagenum:page},
                   url:'<?php  echo base_url(); ?>Process/getInterImgs',
                    success:function(data) {
                        $('#interiors_samples').append(data);
                        page = page + 1;
                         }
                });
        });

And this function get another 12 of images and return result to post call above

public function getInterImgs() {
        $page = $_POST['pagenum'];
        $this->load->model('Discover_model');
        $results_per_page = 12;
        $start = ($page-1)*$results_per_page;
        $data['styles'] = $this->Discover_model->get_more_styles($start);
        $styles = $data['styles'];
        foreach ($styles as $style ){
            $loadimgs = '<div class="img_card col">
                                    <div class="sampleFind">
                                        <img class = "Int_img"  id="'.$style->id.'" src="'.base_url().'include/int_imgs/ '.$style->img_name.'" alt="product-image">
                                    </div>
                        </div>';
        }
        print_r($loadimgs);exit();
        return  $loadimgs;
    }

Now i need to know what is happened after append images to html Dom because the jquery method for each image works fine for first 12 images and doesn't work for loaded image known the id's name is the same with first 12 item

Any help please

Answer 1

Try this :

$(document).on("click", "#load", function () {
    // your code
})
Rent Charter Buses Company
READ ALSO
Sending Input from a Form via Ajax Request

Sending Input from a Form via Ajax Request

After following the example and answers by the following threads

265
Light library to have mobile gestures in cordova app

Light library to have mobile gestures in cordova app

I'm looking for a light and simple js/jquery library to use in my Cordova appI'm currently using toe

257
Jquery remove parent or parents until a specific class name

Jquery remove parent or parents until a specific class name

I am trying to remove the main parent of a element like below, i want to remove the class named "well", but i cannot target it directly because its inside a PHP do while loop, so if i say $('well')

463
jQuery: multiple non-blocking intervals

jQuery: multiple non-blocking intervals

I'm trying to solve the following problem:

533