Ajax call not working second time

Question

I have this ajax/php structure that works perfectly when selecting one image. But, if I click on "selecteer" to perform the same code for the second time, no images are shown. The "ajax" page does load correctly though.

Basically what I have;

Article page: This page shows 10 buttons "Selecteer". Under these 10 buttons you have a div where some images are shown after pressing Selecteer. When clicking on one of those images, the clicked image is selected and will be shown solely. Javascript: This script binds the click events, and performs the ajax loading aswell as the image showing. Images page: this page is loaded by ajax and is shown in a div inside the article page.

EDIT:

I did some testing. The second time the div is loaded with an ajax call (the images page) it does "Create" all the images with the createImage function. Yet I only see the search bar and the "zoek" button. So the real problem is: the images aren't showing the second time!

The code (I left some things out which I think are irrelevant)

article:

<?php for($i = 0; $i < constant("MAX_PICS"); $i++) { ?>
<button <?php echo"id='select_portal$i' class='select_portal_class'";?> type="button">Selecteer</button>
<div <?php echo"id='dialog_form$i'";?> style="display:none; position:absolute; width:auto; height:auto; margin-left: auto; margin-right: auto; z-index:1;"></div>
<div <?php echo"id='selected_image$i'";?> style="display:block;  width:auto; height:auto">
<?php if(isset($_GET['edit_artikel'])) { ?><img src="../images/<?php $beeldbank = Beeldbank::find_by_portal_id($artikel->portal_id); echo $beeldbank[0]->imagelib_id; ?>/<?php echo $artikel->portal_id;?>" id="selid" width="125" /> <?php } else {?>
<img src="../images/icons/no_image_found.png" alt="No image available" <?php echo"id='selid$i'";?> width="125" /> <?php } ?>
<input type="hidden" <?php echo"id='portal_id$i'";?> name="portal_id" value="<?php if(isset($_GET['edit_artikel'])) { echo $artikel->portal_id; } ?>" />
</div>
<div id="selected_portal"></div>

javascript:

$(document).ready(function() {
    (function() {
        var script    = document.createElement('script');
        script.type   = 'text/javascript';
        script.src    = document.location.protocol + '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js';
        var script2   = document.createElement('script');
        script2.type  = 'text/javascript';
        script2.src   = document.location.protocol + '//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js';

        document.getElementsByTagName('head')[0].appendChild(script);
        document.getElementsByTagName('head')[0].appendChild(script2);
    })();   

$( ".select_portal_class" ).each(

    function( intIndex ){
            $(this).bind('click', function() {   
                loadAjaxFrame(intIndex);
            });
    }
    );
});

function loadAjaxFrame(id)
{
    var dialog = $("#dialog_form"+id);
    //alert(dialog.attr('id'));
    dialog.css("display", "block");
    dialog.css("top", "auto");
    dialog.css("left", "auto");
    dialog.css("right", "auto");
    dialog.css("backgroundColor", "white");
    document.getElementById(dialog.attr('id')).style.visibility = 'visible';
    tempDialogID = id;

    if(!ajaxLoad){
        dialog.load("imglib.php");
        ajaxLoad = true;
    }
}

function showImage()
{
    var portal     = $("#portal_id"+tempDialogID);
    var dialog     = $("#dialog_form"+tempDialogID);
    var selid      = $("#selid"+tempDialogID);
    alert(tempDialogID);
    var img        = document.getElementById(selid.attr('id'));
    img.src        = imgname;
    var portal_id  = document.getElementById(portal.attr('id'));
    portal_id.value= imgid;
    document.getElementById(dialog.attr('id')).style.visibility = 'hidden';
    dialog.unload();
    ajaxLoad = false;
}
function create_image(src,alt) {
    var img      = document.createElement("img");
    var objTo    = document.getElementById('imagesDiv');
    img.src      = src;
    img.alt      = alt;
    img.className= "imgid";

    $(img).height(imageHeight);
    $(img).width(imageWidth);
    $(img).bind('click', 'span', function () { imgid = alt; imgname = src; showImage(); });
    objTo.appendChild(img);
}
$('#formpie').on('submit', function(e) {
    e.preventDefault();
    var dialog = $("#dialog_form"+tempDialogID);
    $.ajax({
        type   : 'POST',
        url    : "imglib.php",
        data   : $(this).serializeArray(),
        success: function(data) {
            dialog.html(data);
        }
    });
});

And finally the images page:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="javascripts/SelectImage.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    var photos    = <?php echo json_encode($photoSources); ?>;
    var photoAlts = <?php echo json_encode($photoAlts); ?>;
    var photoTags = <?php echo json_encode($photoTags); ?>;
    var photoCount= <?php echo $total_count; ?>;
    photoCount    = photoCount/10;
    photoCount    = Math.ceil(photoCount);
    function buttonClicked(id){
        var page  = id;
        photoPage = page*10;
        minCount  = photoPage-10;
        maxCount  = photoPage;
        jQuery("#imagesDiv").html("");
        createButtons();
        $( "#imagesDiv" ).append( " <br/>");
        populateDiv();
    }
    function createButtons() {
        var i     = 1;
        var button= "";
        while(i <= photoCount)
        {
            var button    = document.createElement("BUTTON");
            var buttonName= document.createTextNode(i);
            button.appendChild(buttonName);
            button.id     = i;
            jQuery(button).bind('click', { id: i}, function(event) {
                var data  = event.data;
                buttonClicked(data.id);
            });
            var objTo = document.getElementById('imagesDiv');
            objTo.appendChild(button);
            i++;
        }
    }
    $(".moreButton").click(function() {
            maxCount += 10;
            minCount += 10;
            jQuery("#imagesDiv").html("");
            populateDiv();
    });
    function populateDiv() {
        for(var i = minCount;i < maxCount; i++)
        {
            if(i < <?php echo $total_count ?>)
            {
                create_image("../"+photos[i],photoAlts[i]);
                $( "#imagesDiv" ).append( "<p style=\"display:inline; padding-left:10px;\">" + photoTags[i] + "</p><br/>" );
            }
        }
    }
    createButtons()
    $( "#imagesDiv" ).append( " <br/>");
    populateDiv();
});
</script> <?php

if(isset($_POST['submit'])) {
    $artikel->portal_id = $_POST['portal_id'];
}?>

<fieldset>
     Afbeelding zoeken
 <form id="formpie" name="zoek" action="" method="POST">
  <input type="hidden" name="zoek" value="zoek" id="zoek"/>
  <input type="text" name="tags" size="31" id="tags"/>

  <input type="submit" name="zoek" id="search" value="Zoek" />
</form>
    <div id="imagesDiv" style="width:800px; height:780px;">
    <label for="portal_id"></label>
    </div>
</fieldset>
<div id="selected_img_div" style="display:none; width:auto; height:auto;">
    <?php if($selected_image == NULL) { echo "No image selected"; } 
    else { echo '<img src="images/'.$selected_image.' class="selimgid"/>'; } ?>
</div>

Answer 1

If you load content dynamically and you want bind actions to them you shouldn't use the .bind(), .click() and .on([action], function(){}) functions. Because these functions can be only bind into elements which rendered at page loading.

So you should use that function:

$('body').on([action], [selector], function(){});

[action]: what type of binding do you want (ie: click, submit,...) [selector]: select the element what you want to bind (ie: '.moreButton')

For example, instead of that code:

$(".moreButton").click(function() {
    maxCount += 10;
    minCount += 10;
    jQuery("#imagesDiv").html("");
    populateDiv();
});

Use this code:

$('body').on('click' , '.moreButton', function() {
    maxCount += 10;
    minCount += 10;
    jQuery("#imagesDiv").html("");
    populateDiv();
});

Answer 2

$('#formpie').on('submit', function(e) {
    e.preventDefault();
    var dialog = $("#dialog_form"+tempDialogID);
    $.ajax({
        type: 'POST',
        url: "imglib.php",
        data: $(this).serializeArray(),
        success: function(data) {
            dialog.html(data);
            urlRefresh();  
        }
    });
 });

replace your code with it. I think there is a problem on url refresh. so Try it.

Answer 3

Try changing to,

$('body').on('submit','#formpie', function(e) {
  e.preventDefault();
  var dialog = $("#dialog_form"+tempDialogID);
  $.ajax({
    type   : 'POST',
    url    : "imglib.php",
    data   : $(this).serializeArray(),
    success: function(data) {
        dialog.html(data);
    }
  });
});

Answer 4

maybe you are using functions or events with new content?

if you are doing that, maybe you have the same problem like this

https://stackoverflow.com/a/26559809/2043592

Answer 5

I had same problem and it got resolved after adding below code in head tag.

<meta charset="UTF-8">
<meta http-equiv="cache-control"
    content="no-cache, must-revalidate, post-check=0, pre-check=0" />
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 G`enter code here`MT" />
<meta http-equiv="pragma" content="no-cache" />