Question

我为新手问题道歉。我试图在我的rails App上实现Bootstrap Modal功能。具体来说，考虑应用<%=image_tag>，以便当用户点击特定图像时，然后激活模态。我查看了以下SO问题（Twitter Bootstrap Modal Form Submit）＆amp; （Bootstrap open image in modal）但按照说明操作后，我仍然无法做到。我已经提供了下面的所有相关代码，非常感谢你们。

最初（每个项目中的模式中的图像相同 - 第一个）

index.html.erb

<%= image_tag item.avatar.url(:medium), class: "block", id:"open-AddImgDialog",  data: { target: "#myModal", toggle: "modal"} %>
<div class="modal fade" tabindex="-1" id="imagemodal" role="dialog">
   <div class="modal-dialog" role="document" >
     <!-- Modal content-->
<div class="modal-content">
  <div class="modal-header">
  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <%= item.product %>
  </div>
  <br/>
  <h4 class="modal-title">
    <%= item.product %>
  </h4>
  <div class="modal-body">
    <div class="picture">
      <%= image_tag item.avatar.url(:medium) %>
    </div>        
    <br/>
    <br/>
    </div>
     <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
  </div>                
  </div>
</div>

的application.js

$(document).on('click',"#open-AddImgDialog", function() {  
    $('#imagemodal').modal('show');   
});

尝试3（添加Javascript以更改图像以获取当前图像以获取正确的项目＆gt;没有图像出现）

index.html.erb

<%= image_tag item.avatar.url(:medium), class: "open-AddImgDialog", id:"test",  data: { target: "#myModal", toggle: "modal"} %>
<div class="modal fade" tabindex="-1" id="imagemodal" role="dialog">
   <div class="modal-dialog" role="document" >
     <!-- Modal content-->
<div class="modal-content">
  <div class="modal-header">
  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <%= item.product %>
  </div>
  <br/>
  <h4 class="modal-title">
    <%= item.product %>
  </h4>
  <div class="modal-body">
    <div id="picture" style="border: 1px solid black; width: 200px; height: 200px;">

      <canvas id="myCanvas" width="200" height="200"></canvas>

    </div>        
    <br/>
    <br/>
    </div>
     <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
  </div>                
  </div>
</div>

的application.js

$(document).on('click',".open-AddImgDialog", function() {               
    html2canvas($("#picture"), {
        onrendered: function (canvas) {

            //theCanvas = canvas;
            //document.body.appendChild(canvas);
            //Canvas2Image.saveAsPNG(canvas); 

            var c = document.getElementById("myCanvas");
            var ctx = c.getContext("2d");
            var img = document.getElementById("test");

            var x = 0;
            var y = 0;
            var width = 200;
            var height = 200;

            ctx.drawImage(img, x, y, width, height);

        }
    });

});

Answer 1

使用此功能。

date_default_timezone_set("TIMEZONE"); 

//youtube api key
$API_KEY = "YOUR API KEY";

function search($searchTerm,$url){
    $url = $url . urlencode($searchTerm);

    $result = file_get_contents($url);

    if($result !== false){
        return json_decode($result, true);
    }

    return false;
}

function get_user_channel_id($user){
    global $API_KEY;
    $url = 'https://www.googleapis.com/youtube/v3/channels?key=' . $API_KEY . '&part=id&forUsername=';
    return search($user,$url)['items'][0]['id'];
}

function push_data($searchResults){
    global $data;
    foreach($searchResults['items'] as $item){
        $data[] = $item;
    }
    return $data;
}

function get_url_for_utc_period($channelId, $utc){
    //get the API_KEY
    global $API_KEY;
    //youtube specifies the DateTime to be formatted as RFC 3339 formatted date-time value (1970-01-01T00:00:00Z)
    $publishedAfter = date("Y-m-d\TH:i:sP",strval($utc));
    //within a 60 day period
    $publishedBefore_ = $utc + (60 * 60 * 24 * 60);
    $publishedBefore = date("Y-m-d\TH:i:sP",$publishedBefore_);
    //develop the URL with the API_KEY, channelId, and the time period specified by publishedBefore & publishedAfter
    $url = 'https://www.googleapis.com/youtube/v3/search?part=snippet&type=video&key=' . $API_KEY . '&maxResults=50&channelId=' . $channelId . '&publishedAfter=' . urlencode($publishedAfter) . '&publishedBefore=' . urlencode($publishedBefore);

    return array("url"=>$url,"utc"=>$publishedBefore_);
}
//the date that the loop will begin with, have this just before the first videos on the channel.
//this is just an example date
$start_date = "2013-1-1";
$utc = strtotime($start_date);
$username = "CHANNEL USERNAME NOT CHANNEL ID";
//get the channel id for the username
$channelId = get_user_channel_id($username);

while($utc < time()){
    $url_utc = get_url_for_utc_period($channelId, $utc);
    $searchResults = search("", $url_utc['url']);
    $data = push_data($searchResults);
    $utc += 60 * 60 * 24 * 60;
}
print "<pre>";
print_r($data);
print "</pre>";

//check that all of the videos have been accounted for (cross-reference this with what it says on their youtube channel)
print count($data);

Answer 2

不得不雇用一名专业开发人员来弄清楚到底发生了什么。这里有正确的答案和解释原因 - 希望它可以帮助某人陷入类似的束缚。

让这个问题陷入困境的是我们有＆lt;％@ items.each do | item | ％GT;然后是<%= image_tag item.avatar.url(:medium), class: "open-AddImgDialog", id:"test", data: { target: "#myModal", toggle: "modal"} %>，然后是上面列出的模态代码。这导致在激活模态时反复出现相同的图像（第一项图像文章）。在处理@ items.each时，这个问题的解决方案是利用更强大的灵活ID ，当从一个项目帖子移动到另一个项目时，动态更改（因此在模态中，相同的第一张图像不会出现在所有图像上）。

<%= image_tag item.avatar.url(:medium), class: "block", id: "image-#{dom_id(item)}",  data: { target: "#myModal-#{dom_id(item)}", toggle: "modal"} %>


<div class="modal fade" tabindex="-1" id="myModal-<%= dom_id(item) %>" aria-labelledby="myModalLabel" role="dialog">
.....
#Everything else follows normal bootstrap conventions

带有＆lt;％= image_tag＆gt;的Bootstrap模态在Rails中

2 个答案: