Reloading canvas javascript after ajax call

Question

Scenario: Canvas based portfolio items listed with ajax driven pagination.

Problem: After loading the next page of content with ajax, script tags aren't inside the canvas tags.

Tried: Adding script tags before the canvas tags, this isn't loaded either (so definitely a problem loading scripts).

Research: jquery script not working, apparently you can't retrieve scripts because of security.

Possible alternative: Adding the canvas content from outside the canvas tags, but then the difficulty comes in passing the dynamically created portfolio title tags!

Code:

    <ul id="products-list">
        <?php
            $i = 0;
            while($the_list->have_posts()): $the_list->the_post(); //wordpress loops through posts
        ?>

        <li  class="product-item<?php echo $i;?>">
            <script>functionForMakingACanvasOverlayUsingThePostTitle("<?php echo get_the_title() ?>");</script>
            <canvas></canvas>
        </li>

        <?php $i++; ?>  

    <?php endwhile; ?>
    </ul>

6 items are shown per page and the next button uses ajax to call the next 6 items

Suggestions? Thanks.

Why do you put script tags inside canvas tags in the first place? In any case, pretty impossible to say anything without seeing the code. — JJJ, Apr 19 '13 at 06:40
Code added, thanks. Also, is it not correct putting scripts inside canvas tags? I mean w3 has in their tutorials: http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_canvas_tut_text2 — timhc22, Apr 19 '13 at 06:59
[w3schools is not the most reliable source](http://w3fools.com) but in this case if you look at the code on that page carefully you'll see that the script tag is actually outside the canvas tag. — JJJ, Apr 19 '13 at 07:17
So it is, my bad (that is what 4 hours sleep does to you). And how interesting, I never knew that before, talk about misleading! Thanks for sharing — timhc22, Apr 19 '13 at 07:21

score 1 · Answer 1 · answered Apr 19 '13 at 07:01

1

myYou can't add javascript code using AJAX without calling the most hated eval method. And in your case, you don't need to. Your answer is to call external javascript on an object, rather than calling the javascript directly. The code you've given us is very sparse, so my idea below is purely for demonstration purposes - you'll need to translate it for your actual situation:

<canvas><div id="mytitle"></div></canvas>
<script>
    function drawTitleOverlay(title){
        var titleoverlayhtml = buildTitleOverlayHTMLFromTitle(title);
        document.getElementById('mytitle').innerHTML = titleoverlayhtml;
    }

    function nextPage(){
        var data = getAJAXData();
        var title = getTitleFromData(data);
        drawTitleOverlay(title);
    }
</script>

answered Apr 19 '13 at 07:01

Gareth Cornish

4,357
1
19
22

sounds good, the only problem is there will be multiple canvases, so: there will be mytitle1 mytitle2 .. etc, is there a loop which can be put around the document.getElementById that will get mytitle1 mytitle2 for an unknown number of items? – timhc22 Apr 19 '13 at 07:38
There are lots of ways to get a reference to each of the div objects in your canvas, but without seeing your actual code, I can't recommend the best one. However, it seems to me that the AJAX data will include data for each DIV tag, and that data would also include the ID for the tag - so right there you already have the IDs of all the tags. Just loop over those. – Gareth Cornish Apr 19 '13 at 07:54
code added to main question! – timhc22 Apr 19 '13 at 08:58
managed to solve it using: $("ul#products-list li.product-item").each(function() { .... etc and a callback function within the jQuery .load() function. for anyone else's benefit read up on 'bubbling' – timhc22 Apr 19 '13 at 16:56

Reloading canvas javascript after ajax call

1 Answers1