堆棧內存溢出
  簡體   English   中英

通過在錨標記中使用 data-id 屬性，使用 jquery 將值傳遞給模態彈出窗口

[英]pass value to modal popup using jquery by using data-id attribute in anchor tag

 原文  2015-12-05 05:15:02  0   1    javascript/ php/ jquery/ html/ modalpopup

問題描述

<div class="login-group">
<div class="form-group">
    <table cellspacing="0" cellpadding="0" border="0" class="container">
        <?php
        $selectquery = "Select * from tblservices where category_id = 1";
        $qry=mysqli_query($con,$selectquery);
        if($qry)
        {
            $rowcount=mysqli_num_rows($qry);
            if($rowcount>0)
            {
                $countI = 1;
                while($obj=mysqli_fetch_array($qry))
                {
                    if($countI==0)
                    {
                        ?>
                        <tr>
                            <td class="bgimg">
                                <a href="#" data-id="<?php echo $obj["service_id"]; ?>" data-toggle="modal" data-target="#myModal" class="modalLink">
                                    <?php echo $obj["service_name"]; ?>
                                </a>
                            </td>
                            <td>
                                <a href="#" data-id="<?php echo $obj["service_id"]; ?>" data-toggle="modal" data-target="#myModal" class="modalLink">
                                    <img src="<?php echo '../assets/img/'.$obj['service_image']; ?>" alt="" >
                                </a>
                            </td>
                        </tr>
                        <?php
                        $countI = $countI + 1;
                    }
                    else if($countI %2 ==0)
                    {
                        ?>
                        <!--<a href="#" data-id="<?php echo $obj["value1"]; ?>" data-toggle="modal" data-target="#myModal" class="modalLink">show value</a>-->
                        <tr>
                            <td>
                                <a href="#" data-id="<?php echo $obj["service_id"]; ?>" data-toggle="modal" data-target="#myModal" class="modalLink">
                                    <img src="<?php echo '../assets/img/'.$obj['service_image']; ?>" alt="" >
                                </a>
                            </td>
                            <td style="font-size:20px; text-align: center;" class="bgimg">
                                <a href="#" data-id="<?php echo $obj["service_id"]; ?>" data-toggle="modal" data-target="#myModal" class="modalLink">
                                    <?php echo $obj["service_name"]; ?>
                                </a>
                            </td>
                        </tr>
                        <?php
                        $countI = $countI + 1;
                    }
                    else
                    {
                        ?>
                        <tr>
                            <td style="font-size:20px; text-align: center;" class="bgimg">
                                <a href="#" data-id="<?php echo $obj["service_id"]; ?>" data-toggle="modal" data-target="#myModal" class="modalLink">
                                    <?php echo $obj["service_name"]; ?>
                                </a>
                            </td>
                            <td>
                                <a href="#" data-id="<?php echo $obj["service_id"]; ?>" data-toggle="modal" data-target="#myModal" class="modalLink">
                                    <img src="<?php echo '../assets/img/'.$obj['service_image']; ?>" alt="" >
                                </a>
                            </td>
                        </tr>
                        <?php
                        $countI = $countI + 1;
                    }
                }
            }
        }
        ?>
    </table>
</div>

上面的代碼顯示了數據庫中的值，在錨標記中使用數據 ID 作為服務 ID

並且此數據 ID 應顯示在模態彈出窗口中，請在下面找到

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="padding-top: 150px;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Choose your slot</h4>
            </div>
            <div class="modal-body">
                <input type="text" name="service_id" class="hiddenid"/>
                <div class="form-group">
                    <table align="center">
                        <tr>
                            <td colspan="2"> <p class="white_text">Preferred slot 1</p></td>
                        </tr>
                        <tr>
                            <td style="padding-right: 10px;"><input type="date" id="theDate" name="slot1_dt" required> </td>
                            <td><input type="time" id="timePicker1" name="slot1_tm" required> </td>
                        </tr>
                        <tr>
                            <td colspan="2" style="padding-top: 15px;"><p class="white_text">Preferred slot 2</p></td>
                        </tr>
                        <tr>
                            <td style="padding-right: 10px;"><input type="date" id="theTomorrow" name="slot2_dt" required> </td>
                            <td><input type="time" id="timePicker2" name="slot2_tm" required> </td>
                        </tr>
                        <tr>
                            <td colspan="2" style="padding-top: 15px;">
                                <center><button type="submit" name="book" class="btn btn-default" value="book" style="font-size: 14px !important;">Book</button>
                                &nbsp;
                                <button type="button" class="btn btn-default" style="font-size: 14px !important;" data-dismiss="modal">Close</button></center>
                            </td>
                        </tr>
                    </table>

                    <?php
                    if(isset($_REQUEST["book"]))
                    {
                        if($_REQUEST["book"])
                        {
                            $service_id=$_REQUEST["service_id"];
                            $customer_id=$_REQUEST["cust_id"];
                            $slot1_dt=$_REQUEST["slot1_dt"];
                            $slot2_dt=$_REQUEST["slot2_dt"];
                            $slot1_tm=$_REQUEST["slot1_tm"];
                            $slot2_tm=$_REQUEST["slot2_tm"];
                            $slot1=$slot1_dt." ".$slot1_tm;
                            $slot1 = date("Y-m-d H:i:s",strtotime($slot1));
                            $slot2=$slot2_dt." ".$slot2_tm;
                            $slot2 = date("Y-m-d H:i:s",strtotime($slot2));
                            $insertqry="INSERT INTO `tblappointments`(`customer_id`, `service_id`, `preferred_slot1_date`, `preferred_slot2_date`)
                            VALUES ('$customer_id','$service_id','$slot1','$slot2')";
                            $res=mysqli_query($con, $insertqry) or die(mysqli_error($con));

                            if($res)
                            {
                                echo("successful.....");
                            }
                        }
                    }
                    ?>
            </div>
        </div>
        <div class="modal-footer"></div>
    </div>
</div>
</div>

用於值傳遞的 jquery 是

<?
$(".modalLink").click(function () {
var passedID = $(this).data('id');
$('#id').val(passedID);

//modifies input in modal
$(".modal-body .hiddenid").val(passedID);});
?>

這些代碼在單個 php 文件下，js 存儲為單獨的文件

並且在輸出上我無法獲得要傳遞的數據 ID 值

文本字段仍然為空。

任何人請幫助我。

1 個解決方案

解決方案1
 1 已采納  2015-12-05 07:12:36

首先，使用href="#myModal".刪除href="#" href="#myModal".

<a href="#" data-id="<?php echo $obj["service_id"]; ?>" data-toggle="modal" data-target="#myModal" class="modalLink">
    <img src="<?php echo '../assets/img/'.$obj['service_image']; ?>" alt="" >
</a>

其次，這不是調用data-id. 刪除var passedID = $(this).data('id'); 使用var dataId=$(this).attr('data-id'); 像下面。

<?
$(".modalLink").click(function () {
var passedID=$(this).attr('data-id');
.
.
?>

如果它有效，那么好。 如果沒有，請按照我的代碼一步一步來，它會起作用。

所以，我建議你只為模態制作一頁（ somepage.php ）。 使用ajax以正確方式傳遞 ' dataId ' 的地方。

1) 如下寫你的<a></a>標簽。 href="#myModal"是強制性的。

<a class="modalLink" href="#myModal" data-toggle="modal" data-id="<?php echo $obj["service_id"]; ?>">
    <?php echo $obj["service_name"]; ?>
</a>

2）在頁腳中，放置此代碼。 （如footer.php ）

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="padding-top: 150px;">
    <div class="modal-dialog">
        <div class="modal-content">

        </div>
    </div>
</div>

3）通過ajax調用你的'somepage.php'（單獨的頁面。存在模態體的地方）。 將此<script></script>放在您的JS文件中。

<script>
$('.modalLink').click(function(){
    var dataId=$(this).attr('data-id');
    $.ajax({url:"somepage.php?dataId="+dataId,cache:false,success:function(result){
        $(".modal-content").html(result);
    }});
});
</script>

4）創建somepage.php （如果你想改變這個頁面名稱。在<script></script>也改變。兩者是相關的。）

某個頁面.php

<?

// Access $dataId like this way and use any where you want in this modal. 

$dataId=$_GET['dataId'];
?>


<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title" id="myModalLabel">Choose your slot</h4>
</div>
<div class="modal-body">
    <input type="text" name="service_id" class="hiddenid" value="<?echo $dataId;?>"/>
    <div class="form-group">
        <table align="center">
            <tr>
                <td colspan="2"> <p class="white_text">Preferred slot 1</p></td>
            </tr>
            <tr>
                <td style="padding-right: 10px;"><input type="date" id="theDate" name="slot1_dt" required> </td>
                <td><input type="time" id="timePicker1" name="slot1_tm" required> </td>
            </tr>
            <tr>
                <td colspan="2" style="padding-top: 15px;"><p class="white_text">Preferred slot 2</p></td>
            </tr>
            <tr>
                <td style="padding-right: 10px;"><input type="date" id="theTomorrow" name="slot2_dt" required> </td>
                <td><input type="time" id="timePicker2" name="slot2_tm" required> </td>
            </tr>
            <tr>
                <td colspan="2" style="padding-top: 15px;">
                    <center><button type="submit" name="book" class="btn btn-default" value="book" style="font-size: 14px !important;">Book</button>
                    &nbsp;
                    <button type="button" class="btn btn-default" style="font-size: 14px !important;" data-dismiss="modal">Close</button></center>
                </td>
            </tr>
        </table>

        <?php
        if(isset($_REQUEST["book"]))
        {
            if($_REQUEST["book"])
            {
                $service_id=$_REQUEST["service_id"];
                $customer_id=$_REQUEST["cust_id"];
                $slot1_dt=$_REQUEST["slot1_dt"];
                $slot2_dt=$_REQUEST["slot2_dt"];
                $slot1_tm=$_REQUEST["slot1_tm"];
                $slot2_tm=$_REQUEST["slot2_tm"];
                $slot1=$slot1_dt." ".$slot1_tm;
                $slot1 = date("Y-m-d H:i:s",strtotime($slot1));
                $slot2=$slot2_dt." ".$slot2_tm;
                $slot2 = date("Y-m-d H:i:s",strtotime($slot2));
                $insertqry="INSERT INTO `tblappointments`(`customer_id`, `service_id`, `preferred_slot1_date`, `preferred_slot2_date`)
                VALUES ('$customer_id','$service_id','$slot1','$slot2')";
                $res=mysqli_query($con, $insertqry) or die(mysqli_error($con));

                if($res)
                {
                    echo("successful.....");
                }
            }
        }
        ?>
    </div>
</div>
<div class="modal-footer">

</div>

享受編碼。

更新代碼（根據@Sridhar 的需求）

1）將href="#"更改為href="#myModal"代碼中出現的任何位置，以便彈出模式。

<td class="bgimg">
  <a href="#myModal" data-id="<?php echo $obj["service_id"]; ?>" data-toggle="modal" data-target="#myModal" class="modalLink">
      <?php echo $obj["service_name"]; ?>
  </a>
</td>

2) 在JS 中使用此代碼。

JS

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$('.modalLink').click(function(){
  var ID=$(this).attr('data-id');
  $.ajax({url:"NewPage.php?ID="+ID,cache:false,success:function(result){
      $(".modal-content").html(result);
  }});
});
</script>

3) 將此代碼放在頁腳中。

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="padding-top: 150px;">
  <div class="modal-dialog">
    <div class="modal-content">

        </div>
    </div>
</div>

4) 創建NewPage.php (如果你想改變這個頁面的頁面名稱。請在Point-2 <script></script>標簽中也改變。兩者是相關的)

新頁面.php

通過_GET訪問ID並使用此ID為所欲為

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title" id="myModalLabel">Choose your slot</h4>
</div>
<div class="modal-body">
  <?php echo $_GET['ID'];?>
</div>
<div class="modal-footer"></div>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 使用jQuery的數據ID屬性？ jQuery獲取錨標簽的數據ID 如何將錨標簽的data-id值傳遞給Code-Igniter控制器功能並以數據模式顯示結果？ 使用帶有數據ID標記的Javascript添加屬性COLSPAN 如何通過錨標記將 id 值傳遞給模式彈出窗口 如何使用 JQuery 正確地動態傳遞數據 ID 在選擇器中使用帶有data-id屬性的變量 訪問單擊的錨標記的數據 ID，並使用 JavaScript 重定向到 href 路徑 在 data-id 中使用逗號觸發模態，在逗號列表中使用具有單個值的錨點 如何使用 jQuery 獲取所有數據 id 輸入 class 值，其中數據 id 與當前關注的字段數據 id 相同？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM