Play 2 Framework + Loop for + Dynamic Javascript

Question

In a view of a Play 2.4 application I would like to iterate over some data, and create Javascript code for each iteration. The Javascript generated seems ok, but impossible to trigger the event when I click on the button.

@for(site <- sites) {
        <div class="item">
            <div class="item-site-pres">
                <span class="item-site-title"><a href="@site.url">@site.title</a></span>
            </div>

            <div id="div@site.url" class="item-site-desc">
                <center>
                    Load Site
                    <input type='button' value='+' id='input@site.url' />
                </center>
            </div>
}

Javascript

<script type="text/javascript" charset="utf-8">
    var load@site.url = function() {
        var url = @site.url;
        var website = @site.website;
        jsRoutes.controllers.Application.loadAjax(url,website).ajax({
                            success: function(data) {
                            $("#div@site.url").html(data);
                            },
                            error: function() {
                            alert("Error!")
                            }
                            })
                        };

   $("#input@site.url").click(load@site.url);

</script>

Example of the div generated

<div id="divhttp://www.lequipe.fr/Natation/Actualites/Retour-manque-pour-agnel/491210" class="item-site-desc">
    <center>
    Load Site
    <input id="inputhttp://www.lequipe.fr/Natation/Actualites/Retour-manque-pour-agnel/491210" type="button" value="+">
    </center>
</div>

Example Javascript Generated

<script charset="utf-8" type="text/javascript">
    var loadshttp://www.lequipe.fr/Natation/Actualites/Retour-manque-pour-agnel/491210 = function() {
    var url = http://www.lequipe.fr/Natation/Actualites/Retour-manque-pour-agnel/491210;
    var website = L&#x27;Equipe.fr; 
    jsRoutes.controllers.Application.loadAjax(url,website).ajax({
        success: function(data) {
        $("#divhttp://www.lequipe.fr/Natation/Actualites/Retour-manque-pour-agnel/491210").html(data);
        },
        error: function() {
        alert("Error!")
        }
    })
    };
    $("#inputhttp://www.lequipe.fr/Natation/Actualites/Retour-manque-pour-agnel/491210").click(loadhttp://www.lequipe.fr/Natation/Actualites/Retour-manque-pour-agnel/491210);
</script>

Thank you for your support

Your JS code is not right. The three `var`s are not properly quoted as string values. — cchantep, Aug 18 '14 at 15:58
Thank you @applicius to improve my English and my code. I have improved the quotes, but still have some troubles. **Javascript OK** — Jacques Mivi, Aug 18 '14 at 23:14

score 0 · Answer 1 · answered Aug 18 '14 at 23:19

0

Assuming your JS is as the one is the question you do have to fix the quoting of string values, otherwise it won't work.

var website = L'Equipe.fr will never be a valid JS string without wrapping value in "". Neither syntax of var loadshttp://www.lequipe.fr/Natation/Actualites/Retour-manque-pour-agnel/491210 is ok.

answered Aug 18 '14 at 23:19

cchantep

9,118
3
30
41

However I try to simplify the code to successfully trigger the event It's working until I inject a "dynamic function" (As you can see on the edit of my post). – Jacques Mivi Aug 18 '14 at 23:30
So before to fix the JS valid String, I still stopped to trigger the event. – Jacques Mivi Aug 18 '14 at 23:33
Obviously, unless the JS syntax is ok, you won't get anything working. Basically. – cchantep Aug 18 '14 at 23:38

score 0 · Answer 2 · edited May 23 '17 at 12:29

After several attempts, the solution (Thanks Applicius for your help).

1) Problems on the JS syntax

var website = L&#x27;Equipe.fr

must be changed in

var website = "L\'Equipe.fr";

2) Dynamic Javascript name

In a loop, to creat a new function for each iteration you can follow this kind of solutions : Javascript: Dynamic function names

3) My final solution

// Create just one function with argument before the loop (To avoid generation of many scripts) 
<script type="text/javascript" Content-Type="text/plain" charset="UTF-8">
    var loadSite = function(url) {

        jsRoutes.controllers.Application.loadSiteAjax(url).ajax({
        success: function(data) {
          var theDiv = document.getElementById("result" + url);
          $(theDiv).html(data);
        },
        error: function() {
        alert("Error!")
        }
        })
        };
</script>

// For each button use JQuery onClick to load the function
@for(site <- listeGlobalNewsSection.storiesAjax) {
<div id="result@site.url" >
    <div class="item-site-desc">>
        <center>
            LoadSite
            <input type='button' value='+' id='input@site.url' onClick="loadSite('@site.url')" />
        </center>
    </div>  
</div>                      
}

Play 2 Framework + Loop for + Dynamic Javascript

2 Answers2