从列表中传递唯一ID,其中按钮被单击为引导模式

时间:2016-07-05 12:46:08

标签: javascript jquery html twitter-bootstrap

我有这个Feed列表,在列表的末尾我有更新按钮,更改了Feed的状态。

List of Feeds

当我点击“暂停”一个Feed时 - 该Feed的ID不会过去到模态。我总是从列表中获取我选择的任何按钮Feed的最后一个值。

modal feed

如何将特定Feed的ID值传递给模态?

以下是使用javascript调用后端的模态代码。

 <div class="modal fade" id="statusModal" tabindex="-1" role="dialog" aria-labelledby="statusModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
            <h4 class="modal-title" id="statusModalLabel">Please confirm</h4>
        </div>

        <div class="modal-body">
            <form id="change_status" name="change_status" action="#" method="post">
                <input type="hidden" name="mode" value="change_status">
                <input type="hidden" name="cid" value="<? echo $feed['id'] ?>">
                <fieldset>
                <legend></legend>
                <h4>Change the frequence of the feed</h4>
                <br/>
               <label for="content_type"><span class="required">*</span><?php echo __('feeds:checktime') ?></label>
                <select name="cchecktime" class="form-control">
                <?php
                    foreach ($checktimes as $checktime) {
                        echo '<option value="' . $checktime['time'] . '">' . $checktime['title']    . '</option>';
                    }
                ?>
                </select>
            </fieldset>
            </form>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button id="change_feed_status" type="button" class="btn btn-primary">Confirm</button>
        </div>
    </div><!-- /.modal-content -->
 </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<script type="text/javascript">
$("#change_feed_status").on("click", function(){
  var $form = $(this);
  $("#change_feed_status").replaceWith("<em>sending...</em>");
  $.ajax({
    type: $form.attr('method'),
    url: 'media/feeds',
    data: $("#change_status").serialize(),
    success: function(data) 
    {
        if(data == "true") 
        {
            $("#change_status").fadeOut("fast", function()
            {
                $(this).before("<p><strong>Success! Your project have been added</strong></p>");
                setTimeout("$.fancybox.close()", 2000);
                window.location.href=window.location.href;
            });
        }
    }
  });
 });
</script>

以下是列出供稿的代码

  <h2 class="green_title"><?php echo $count; ?> Feeds in the database</h2>
     <table class="table table-striped">
      <thead>
        <th><?php echo __('feeds:title') ?></th>
        <th><?php echo __('feeds:lastchecked') ?></th>
        <th><?php echo __('feeds:lastnoarticles') ?></th>
        <th><?php echo __('feeds:issue') ?></th>
        <th><?php echo __('feeds:checktime') ?></th>
        <th><?php echo __('feeds:active') ?></th>
        <!--<th>Date checked</th>-->
        <th><?php echo __('global:actions') ?></th>
       </thead>
     <tbody>
    <?php foreach ($feeds as $feed) { 
    ?>
    <tr>
      <td><b> <?php echo $feed['title'] ?></b><br>
     <?php echo $feed['feedtype']; ?>
     </td>
     <td> 
     <?php echo gmdate("Y-m-d H:i:s", $feed['lastchecked']); ?>
     </td>
     <td>
        <ul class="list-group">
            <li class="list-group-item">
                <span class="badge"><?php echo $feed['lastnoarticles'] ?></span>New
            </li>
        </ul>
        </td>

        <td> 
            <?php echo $feed['issue']; ?>
        </td>
        <td>
            <?php
            if($feed['checktime'] == 0xFFFFFFFF) {
            ?>
                <span class="label label-info"><?php echo __('feeds:once') ?></span>
             <?php
        } elseif($feed['checktime'] == 0) {
        ?> 
            <span class="label label-info"><?php echo __('feeds:every5minutes') ?></span>
        <?php
        } elseif($feed['checktime'] == 900) {
        ?> 
            <span class="label label-info"><?php echo __('feeds:every15minutes') ?></span>
        <?php
        } elseif($feed['checktime'] == 3600) {
        ?> 
            <span class="label label-info"><?php echo __('feeds:everyhour') ?></span>
        <?php
        } elseif($feed['checktime'] == 86400) {
        ?> 
            <span class="label label-info"><?php echo __('feeds:everyday') ?></span>
        <?php
        } elseif($feed['checktime'] == 604800) {
        ?> 
            <span class="label label-info"><?php echo __('feeds:everyweek') ?></span>
        <?php
        }
        ?> 
    </td>
    <td>
        <?php
        if($feed['checktime'] == 0xFFFFFFFF) {
        ?>
            <span class="label label-danger"><?php echo __('feeds:notactive') ?></span>
         <?php
         } else {
        ?> 
            <span class="label label-success"><?php echo __('feeds:active') ?></span>
         <?php
         }
         ?> 
    </td>

    <td>
    <!-- Split button -->
        <div class="btn-group">
            <button type="button" class="btn btn-info" data-toggle="modal" data-target="#showFeed"  data-id="<? echo $feed['id'] ?>"><?php echo __('feeds:feedshow') ?></button>    

            <button type="button" class="btn btn-success" data-toggle="modal" data-target="#editModal" value="<? echo $feed['id'] ?>"><?php echo __('feeds:feededit') ?></button>

            <?php
            if($feed['checktime'] == '4294967295') {
            ?> 
                <button type="button" class="btn btn-success" data-toggle="modal" data-target="#statusModal" title="<? echo $feed['id'] ?>"><?php echo __('feeds:feedactivate') ?></button>
            <?php
            } else {
            ?> 
                    <button type="button" class="btn btn-warning" data-toggle="modal" data-target="#statusModal" title="<? echo $feed['id'] ?>"><?php echo __('feeds:feedsuspend') ?></button>
            <?php
              }
              ?>
                <button type="button" class="btn btn-primary" data-placement="top" data-toggle="modal" title="Update" data-target="#updateFeed" data-id="<? echo $feed['id'] ?>"><?php echo __('feeds:feedupdate') ?></button>
            </div>
         </td>
     </tr>
    <?php
     }
    ?>  
    </tbody>
    </table>

2 个答案:

答案 0 :(得分:0)

您可以采用以下方法:

<button type="button" class="btn btn-success feed-id" data-id="<? echo $feed['id'] ?>" data-toggle="modal">Feed
</button>

<script>
 $(document).ready(function () {
    $('body').on('click', '.feed-id',function(){
         var pid = $(this).attr('data-id');
    });
});
</script>

现在在模态中创建一个隐藏的输入字段,并将此pid附加到该字段

答案 1 :(得分:0)

感谢您的回复,它帮助我解决了问题。

我设置了这样的按钮

 <button type="button" class="btn btn-warning feed-id" data-toggle="modal" data-target="#statusModal" data-id="<? echo $feed['id'] ?>"><?php echo __('feeds:feedsuspend') ?></button>

在我的模态中,我添加了一个隐藏的输入字段

 <input type="hidden" id="feed_id" name="cid" value="">

在javascript中我做了这个

 $(document).ready(function () {
   $('body').on('click', '.feed-id',function(){
     document.getElementById("feed_id").value = $(this).attr('data-id');
   });

   $("#change_feed_status").on('click', function(){
     var $form = $(this);
     console.log($("#change_status").serialize());

这现在可以按照我的预期进行。