Question

<%@val testId:String %>
<%@val platforms:String %>
<body>
<div class = "conatainer">
    <div class="page-header">
        <h1>Preview of litmus test ${testId } <small> Platforms chosen for preview : </small></h1>
    </div>

    <div class ="btn-toolbar bnt-toolbar-lg" id = "buttonsPlace"><br>
    <img id="imagePlaces">
    </div>
</div>
$( document ).ready(function myFunct() {

    var platforms = "${platforms}";
    var platformList = platforms.split(",");
    var btn = new Array(platformList.length);
    var image_id = new Array(platformList.length);
    var img = new Array(platformList.length);

    for(i=0;i<platformList.length;i++)
    {
        image_id[i]=100*i-1 + "";
        console.log(image_id);
        btn[i]=document.createElement("button");
        img[i]=document.createElement("image");
        btn[i].appendChild(document.createTextNode(platformList[i]));
        btn[i].appendChild(img[i]);
        $("#buttons").append(btn[i]);
        btn[i].setAttribute("id",i+"");
        btn[i].setAttribute("class","btn btn-success");
        img[i].setAttribute("src","");
        img[i].setAttribute("id",image_id[i]);
        console.log("button id is: "+i+" and image id is :"+image_id[i]);

        console.log("hiding");
        $("#"+i).hide();
    }
    var testId = "${testId}";
    console.log("hey");
    var is_loaded = false;
    var delay = 1;

    fetchFunct();

    function fetchFunct(){
        console.log("entered function");
        $.ajax
            ({
              type: "GET",
              url: "/content/mosaic/multi/preview/status/"+testId ,
              async: true,
              dataType : "json",
              success : function(response)
              {
                  console.log(response);
                  console.log(response.images);
                  if(response.status === false)
                  {
                      console.log("Processing details");
                       //show still in progress
                      $("#load").show();
                      $("#heading").hide();

                      delay=delay*2;
                      if(delay>60)
                      {delay=1;}
                      setTimeout(fetchFunct,delay*1000);
                  }
                  else
                  {
                      $("#load").hide();

                      $("#heading").show();

                        var responses = new Array(platformList.length);

                        /*for (var m in responses.images){

                        //  var responses[]=responses.images[m];
                          console.log("heyyeyey "+responses[]);

                        }*/
                        for(var m in response.images){
                        i=0;
                      //  console.log(" response image is  : "+response.images[m]);
                        responses[i++]=response.images[m]; }
                      for(i=0;i<platformList.length;i++)
                      {

                          $("#"+i).show();
                          console.log("image id is : "+image_id[i]);
                          console.log(platformList[i]);
                          console.log("Loading :"+i);
                          $("#"+i).click(function(){
                          console.log(this.id);
                          //console.log("the first child is :"+this.children().first().id);
                          //alert("you clicked the "+platformList[this.id]+" button");
                          console.log("The response image you are looking for is "+response.images[platformList[this.id]]);
                          console.log(image_id[this.id]);
                          $("#"+image_id[this.id]).attr("src","http://" + response.images[platformList[this.id]]);
                          })
                       }
                      is_loaded = true;
                  }
              }

            }).fail(function(data) { console.log("FAIL"); }).done(function(data) { console.log("coming out of ajax");});
    }
});

我根据platformList中的输入动态创建按钮，然后单击我希望显示与通过AJAX请求接收的URL对应的图像。但是，虽然我没有收到错误，但图像未显示。按钮正确显示;控制台显示已通过ajax接收到正确的URL但未显示图像。我认为这可能是因为我将img [i]作为btn [i]的孩子附加了一些错误，或者某种方式attr（src，＆＃34;＆＃34;）没有正确地改变源属性。虽然我认为前者更有可能。请帮助：\不知何故，图像没有附加到DOM元素我认为

尽管设置了attr（src，“”）但图像仍未显示

0 个答案: