5 Replies - 697 Views - Last Post: 22 October 2014 - 09:41 AM

#1 RutgerK  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 20-October 14

Javascript not appending in ajax loaded div

Posted 20 October 2014 - 08:12 AM

Dear Dreamincode,

I have this ajax/php/javascript 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 into the div 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.

I have found that none of the append functions works at the second time clicking a selecteer button. Can someone tell me why and how to fix this?

Thanks in advance.


Article page:
<?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>


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);
        }
    });
});
<div id="selected_portal"></div>


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>


Is This A Good Question/Topic? 0
  • +

Replies To: Javascript not appending in ajax loaded div

#2 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1994
  • View blog
  • Posts: 6,072
  • Joined: 15-January 14

Re: Javascript not appending in ajax loaded div

Posted 20 October 2014 - 11:21 AM

Are there any error messages in your developer console?
Was This Post Helpful? 0
  • +
  • -

#3 RutgerK  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 20-October 14

Re: Javascript not appending in ajax loaded div

Posted 21 October 2014 - 05:19 AM

Nope, no errors or warnings.
Was This Post Helpful? 0
  • +
  • -

#4 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1994
  • View blog
  • Posts: 6,072
  • Joined: 15-January 14

Re: Javascript not appending in ajax loaded div

Posted 21 October 2014 - 09:59 AM

Are you getting Javascript code back from the ajax request (i.e. Javascript mixed in with the HTML to add to the page), and that's what is not working? If that's the case, adding HTML markup to a page using something like innerHTML does not cause any Javascript code in that markup to be executed.
Was This Post Helpful? 0
  • +
  • -

#5 RutgerK  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 20-October 14

Re: Javascript not appending in ajax loaded div

Posted 22 October 2014 - 06:09 AM

Well, the request is working properly I think. the response is identical to the first time I press selecteer. It's just that the second time the images aren't showing up (they are being created though). Like the appending is not working.
Was This Post Helpful? 0
  • +
  • -

#6 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1994
  • View blog
  • Posts: 6,072
  • Joined: 15-January 14

Re: Javascript not appending in ajax loaded div

Posted 22 October 2014 - 09:41 AM

You'll need to figure out where it's going wrong, maybe you're getting duplicate IDs on the page or something else. Use the console and breakpoints to help you. Open your browser's developer tools and go to the Script tab, and find your Javascript code that you want to debug. You can click on the margin on the left near the line number to set breakpoints on any line. When the code reaches that point it will pause and you can look at things like the values of variables and whatever else you want to look at before telling it to continue with the execution. You can also add console.log statements in your Javascript code to send data to the developer console so that you can see what's going on. Use things like that to check the response that is coming back and use breakpoints to help you step through the code to figure out exactly what is going on in every line so that you can figure out where it's messing up. Just saying that it isn't working isn't enough to suggest a solution, you need to know exactly where and why it is not working.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1