passing datalist values to bootstrap modal dialog

Question

User1343581070 posted

Hi,

      I have a datalist with an image and other data bound fields. When the user hovers over the image I want to display a bigger image along with the data in a bootstrap modal dialog.

     I know how to create a modal dialog but cant figure out how to pass the values from the datalist to the modal dialog

Pleae help

regards

Sanjish

Answer 1

User475983607 posted

I know how to create a modal dialog but cant figure out how to pass the values from the datalist to the modal dialog

Your question is difficult to answer because we can't see your source code or the HTML markup  

Keep in mind, that a DataList does not exist on the client.  A DataList is a server side control that renders HTML in a particular format.  Once rendered, the DataList is nothing more than HTML in the DOM.

The general approach for manipulating the DOM is to use JQuery selectors to query the DOM and retrieve the items you want.  Once you have a reference to the item then you can move the item or whatever you like.  I believe your question not about server controls, it about manipulating the DOM using client side script.

Answer 2

User1343581070 posted

Hi,

      The HTML for the datalist is

                                    <asp:DataList ID="dlProducts" runat="server" ItemStyle-Width="228px" CellPadding="0" CellSpacing="2" RepeatColumns="5" RepeatDirection="Horizontal" RepeatLayout="Table" GridLines="Both"   BorderColor="Blue" BorderStyle="Solid" BorderWidth="1px"> 
                                       <HeaderStyle BackColor="#333333" Font-Bold="True" Font-Size="Large"  ForeColor="White"  HorizontalAlign="Center"   VerticalAlign="Middle" />
                                           <HeaderTemplate >New Arrivals</HeaderTemplate>
                                              <ItemStyle BackColor="White" ForeColor="Black" BorderColor="Orange" BorderWidth="3px" /> 
                                                 <ItemTemplate  > 

                                                    <div style="border:1px solid #ccc;margin:10px;padding:10px;height:auto;">

                                                         <asp:Label ID="Label4" runat="server" Text='<%# Eval("CategoryName")%>' Font-Bold="True" Font-Size="1.2em" ForeColor="Navy"/><br /> 
                                                         <asp:Label ID="Label5" runat="server" Text='<%# Eval("Description")%>' Font-Italic="true"/><br /> 
                                                         <asp:Label ID="Label6" runat="server" Text='<%# "Price: Rs " + System.Convert.ToString(Eval("Cost_In_Rupees"))%>' Font-Bold="True" Font-Size="1.2em" ForeColor="Navy"/><asp:Image
                                                                                ID="imgStar" runat="server" Visible="false" ImageUrl="~/App_Themes/Monochrome/Images/GreenStar.png" /><br /> 
                                                                                 Stock:&nbsp;
                                                                                 <asp:Label ID="lblAvailableStock" runat="server" Text='<%# Eval("AVAILABLESTOCK")%>'
                                                                                  ToolTip ="Available Stock" ForeColor="Red" Font-Bold="true"></asp:Label>

               
                                                         <asp:Image ID="Image1"  data-toggle="modal" data-target="#myPopUpImageModal" OnMouseOver="ShowPopUpImage(this);" ImageUrl='<%# Eval("IMAGEURL")%>' runat="server"  onmouseout="ShowDefaultImage(this);" Width="100" Height="80" /> 
                                                         <asp:Button ID="btnAddToCart" runat="server" CommandArgument='<%# Eval("ProductID") %>' OnClick="btnAddToCart_Click" Text="Add To Cart" Width="100%" BorderColor="Black"  BorderStyle="Inset" BorderWidth="1px" CausesValidation="false" />
                                                         <asp:HiddenField ID="hfProductID" runat="server" Value='<%# Eval("ProductID") %>' />
                                                         <div id="enlarge_images" style="; z-index:2"></div>
                                                    </div>
                                                 </ItemTemplate> 
                                              <ItemStyle HorizontalAlign="Center" VerticalAlign="Top" /> 
                                    </asp:DataList>

The Javascript is

       function ShowPopUpImage(obj) {

           $('#myPopUpImageModal').modal('show');


       }

and the bootstrap dialog code is

<div class="container">
  <div class="modal fade" id="myPopUpImageModal" role="dialog" >
    <div class="modal-dialog modal-lg">
>
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">My Cart Items</h4>
        </div>
        <div class="modal-body">
         
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

It is inside the modal-body that i want to insert the CategoryName , Description and enlarged image (Image1) from the datalist

Regards

Sanjish

Answer 3

User475983607 posted

You're asking a lot from forum support.  You're essentially providing requirements and asking the community to write the code for you.

You'll need take ownership and teach yourself how to use selectors and your browser's developer tools (F12) to craft the code and troubleshoot where necessary.  Please revisit my previous post and spend the appropriate time to familiarize yourself with these basic concepts.  Keep in mind, there is a learning curve associated with this and you'll need patience and time.  Feel free to post your attempts here and ask for help if needed.  

Answer 4

User61956409 posted

Hi Sanjish,

You could use f12 developer tools to inspect elements and check the datalist html structure, and you could refer to the following sample code to find fields’ value and dynamically generate html and append it to modal body.

<script>
    function ShowPopUpImage(obj) {

        //find fields' value based on current hovered image object
        var CategoryName = $(obj).siblings("[id*=Label4]").text();
        var Description = $(obj).siblings("[id*=Label5]").text();

        //generate html and append to modal body
        var htmlcontent = "<span>" + CategoryName + "," + Description + "</span>";
        $(".modal-body").append(htmlcontent);

        //show modal
        $('#myPopUpImageModal').modal('show');


    }
</script>

Best Regards,

Fei Han