Display Pop up using nested datalist details

Question

My first 'Datalist1' retrieves some values from database i.e.,

Bus Route ID, Vehicle number, Trip date, Bus source station name, Bus Destination name

Another 'nested Datalist' which is placed inside datalist1 displays Bus icons of stages according to the number of stages between source and destination. I succeeded to retrieving the data correctly and displayed a pop up using the above retrieved details.


  
    
      
        
          
        
        
           
        
      
      
        
          RouteID: 
          

          Vehicle NO: 
          
          TripDate: 
          
          From: 
          
          To: 
          

        
      
      
        
        

          
            
              
                
                  
                    
                      
                        
                        <%--     --%>
                      
                    
                    
                      
                        
                      
                    
                  
                
              
            
          

          
            
              
                
                  
                    
                      
                        
                      
                    
                    
                      
                        
                      
                    
                  
                
              
            
          
        
      
    
  


        

        RouteID:  
        

        TripDate:  
        

        Stage Name: 
        

        Scheduled Arrival: 
       

        Reached On:

Jquery code is:

$(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 " + SName + "",
    buttons: {
        Ok: function () {
            $(this).dialog('close');
        }
    },
    modal: true
  });

  return false;
});

For example let us assume on 12/10/2017, 2 Trips were active with RouteID's 1 & 2, and each Routes has 3 stages.

When the first stage of route 1 is clicked Popup should display:

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

When second icon is clicked Popup should should display

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

Similarly when Stages of Route2 is clicked

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

and when he clicks second stage of Route 2

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

But Popup displays:

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

for all the 3 stages of Route1 and for all the 3 stages of Route2.

How can i resolve this. Where am i doing it wrong?

Display Pop up using nested datalist details

Answers (0)

Related Questions