Question

我的第一个'Datalist1'从数据库中检索一些值，即

巴士路线ID，车号，旅行日期，总线源站名称，巴士目的地名称

放置在datalist1内的另一个'嵌套Datalist'根据源和目标之间的阶段数显示阶段的总线图标。我成功地正确检索了数据并使用上面检索到的详细信息显示了弹出窗口。

<asp:DataList ID="DataList1" runat="server" RepeatColumns="1" CellSpacing="3" RepeatLayout="Table" BackColor="LightGray" OnItemDataBound="DataList1_DataBinding">
  <ItemTemplate>
    <table class="table">
      <tr style="background-color : #b62a26;  font-size:medium ; font-family:Verdana; height:40px ">
        <td style="padding-left:5px">
          <asp:Label ID="lblTrip" runat="server" Text="TripID:" ForeColor="White"></asp:Label>
        </td>
        <td style="width:900px; ">
          <b> <asp:Label ID="lblTripID" runat="server" Text='<%# Eval("TripID") %>' ForeColor="White"></asp:Label></b></td>
        </td>
      </tr>
      <tr style="background-color: white;  font-size:small  ; font-family:Verdana; height:60px;  ">
        <td colspan="2">
          <b>RouteID: </b></b>
          <asp:Label ID="lblRouteID" runat="server" Text='<%# Eval("RouteID") %>'></asp:Label>

          <b>Vehicle NO: </b>
          <asp:Label ID="lblVehicleNo" runat="server" Text='<%# Eval("VehicleNo") %>'></asp:Label>
          <b>TripDate: </b>
          <asp:Label ID="lblTripDate" runat="server" Text='<%# Eval("TripDate") %>'></asp:Label>
          <b>From: </b>
          <asp:Label ID="lblFromStage" runat="server" Text='<%# Eval("FromStage") %>'></asp:Label>
          <b>To: </b>
          <asp:Label ID="lblToStage" runat="server" Text='<%# Eval("ToStage") %>'></asp:Label>

        </td>
      </tr>
      <tr style="background-color: white;  font-size:small ; font-family:Verdana; height:10px ">
        <td style="width:10px"></td>
        <td>

          <div id="activeBus" style="line-height: 0px; float: left; margin: 0px; padding: 0px; display: inline-block; vertical-align: top;">
            <asp:DataList ID="innerDataList1" runat="server" RepeatColumns="10" CellSpacing="3" BackColor="white">
              <ItemTemplate>
                <asp:Panel ID="Panel2" runat="server" HorizontalAlign="center">
                  <table>
                    <tr style=" align-items:center ">
                      <td>
                        <asp:ImageButton ID="imgactiveBtn" runat="server" src="\images\ActiveRed.png" Width="15px" Height="15px" OnClick="imgBtn_Click" ToolTip="Track Details" />
                        <%--    <asp:ImageButton ID="ImageButton1" src="\images\ActiveRed.png" runat="server" Style="cursor: pointer"  Width="15px" Height="15px" OnClientClick="return LoadDiv(this.src);"/> --%>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <b><asp:Label ID="lblStageName" runat="server" Text='<%# Eval("StageName") %>' Font-Size="XX-Small" Font-Names="Verdana" ></asp:Label></b>
                      </td>
                    </tr>
                  </table>
                </asp:Panel>
              </ItemTemplate>
            </asp:DataList>
          </div>

          <div id="inactiveBus" style="line-height: 0px; float: left; margin: 0px; padding: 0px; display: inline-block; vertical-align: top;">
            <asp:DataList ID="innerDataList" runat="server" RepeatColumns="10" CellSpacing="3" BackColor="white" OnItemDataBound="innerDataList_ItemDataBound">
              <ItemTemplate>
                <asp:Panel ID="Panel2" runat="server" HorizontalAlign="center">
                  <table>
                    <tr style=" align-items:center ">
                      <td>
                        <asp:ImageButton ID="imginactiveBtn" runat="server" src="\images\InActive.png" Width="15px" Height="15px" OnClick="imgBtn_Click" ToolTip="Not Reached yet!" />
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <b><asp:Label ID="lblStageName" runat="server" Text='<%# Eval("StageName") %>' Font-Size="XX-Small" ForeColor="#CCCCFF"></asp:Label></b>
                      </td>
                    </tr>
                  </table>
                </asp:Panel>
              </ItemTemplate>
            </asp:DataList>
          </div>
        </td>
      </tr>
    </table>
  </ItemTemplate>
</asp:DataList>
<div id="dialog" style="display: none">
        <br />
        <b>RouteID:</b> <span id="RouteID1"></span> <label id="lblEmpId"></label>
        <br />
        <b>TripDate:</b> <span id="TripDate1"></span> <label id="lblEmpName"></label>
        <br />
        <b>Stage Name:</b> <span id="StageName1"></span><label id="lblEmpLocation"></label>
        <br />
        <b>Scheduled Arrival:</b> <span id="Scheduled_Time1"></span>
       <br />
        <b>Reached On:</b> <span id="Arrival_Time1"></span>
       <br /><br />
    </div>

Jquery代码是：

$(document).on("click", "[id*=imginactiveBtn]", function () {
  $("#RouteID1").html($(".RouteID", $(this).closest("tr")).html());
  $("#TripDate1").html($(".TripDate", $(this).closest("tr")).html());
  $("#StageName1").html($(".StageName", $(this).closest("tr")).html());
  $("#Scheduled_Time1").html($(".Scheduled_Time", $(this).closest("tr")).html());
  $("#Arrival_Time1").html($(".Arrival_Time", $(this).closest("tr")).html());

  // Get the Current Row and its values.
  var currentRow = $(this).parents("tr");
  var RId = currentRow.find("span[id*='lblRouteID']").text();
  var TDate = currentRow.find("span[id*='lblTripDate']").text();
  var SName = currentRow.find("span[id*='lblStageName']").text();
  // Populate labels inside the dailog.
  $("#lblEmpId").text(RId);
  $("#lblEmpName").text(TDate);
  $("#lblEmpLocation").text(SName);

  $("#dialog").dialog({
    title: "Track Vehicle at <em>" + SName + "</em>",
    buttons: {
        Ok: function () {
            $(this).dialog('close');
        }
    },
    modal: true
  });

  return false;
});

例如，让我们假设在12/10/2017，2个旅行活动与RouteID的1＆amp; 2，每个路线有3个阶段。

当点击路线1的第一阶段时，弹出窗口应显示：

Route ID: Route1 
TripDate: 12/10/2017 
Stage Name: Stage1

当点击第二个图标时，Popup应显示

RouteID: Route1
TripDate: 12/10/2017 
Stage: Stage2 and so on...

同样点击Route2的阶段时

Route ID: Route2 
TripDate: 12/10/2017 
Stage Name: Stage1

当他点击路线2的第二阶段时

Route ID: Route2 
TripDate: 12/10/2017 
Stage Name: Stage2 and so on.....

但是Popup显示：

RouteID: Route1Route2 
TripDate: 12/10/201712/10/2017 
StageName: Stage1Stage2Stage3Stage1Stage2Stage3

对于Route1的所有3个阶段以及Route2的所有3个阶段。

我该如何解决这个问题。我在哪里做错了？

显示使用嵌套的数据列表详细信息弹出

0 个答案: