How to create a poup div for each item of my list? RRS feed

  • Question

  • User1991482975 posted

    Hi, i have a list of 250 items and could be even more...

    i would love to be able to click on a link on my item and show a popup div containing some information of the item, by passing the ID of the item..

    How to achive this without creating 250 hidden div to show, but only one that is opened by the id of the item chosen?

    Sunday, June 17, 2018 7:29 PM

All replies

  • User1724605321 posted

    Hi grafic.web ,

    I'm not clearly understand your scenario . What is your item . If you want to pass id when link is clicked , you  can use HTML5 data-* attributes and for getting/setting values using jQuery, you can use data method, for example if you have a data attribute called data-special you can get the value of it in this way:

    var value = $("#my_tag").data("special");

    And set/change the value in this way:

    $("#my_tag").data("special", "value");

    Best Regards,

    Nan Yu

    Monday, June 18, 2018 1:36 AM
  • User1991482975 posted

    Hi, in fact for items i meant a list of products...

    i hav a big list of products and once i click on one of them i open a new window with the description of the product...

    but what i wuold love to achive is to be able to click on my product and stay on my page and  having only one hidden DIV wich i can populate with the data of my product and show only if i click in one of the product (i should pass the id of the product i guess)

    How to achive?

    Monday, June 18, 2018 8:11 AM
  • User1724605321 posted

    Hi grafic.web,

    That depends on how you want to list the products . For example , each product is a link , then you could store your product id in link :

    <a data-special="product1">productName1</a>
    <a data-special="product2">productName2</a>

    When click the button , you could get the current product ID of the product :

    <script type='text/javascript'>
        $(function () {
            $('a').click(function () {
                var currentID = $(this).data("special");

    Then you can call server side function to retire the detail product information :



    In success callback of Ajax , you can show the hidden DIV , and append the information to DIV area .

    Best Regards,

    Nan Yu

    Tuesday, June 19, 2018 2:41 AM
  • User1991482975 posted

    Hi, it is something like this that i want..

    so a list of products and inside the link i can write the id of the product and after i need to populate a unic hidden div ans show by opening a partialview with the id pased by the link..

    hos to achive?

    Tuesday, June 19, 2018 7:25 AM
  • User1724605321 posted

    Hi grafic.web ,

    That is quite simple , i have shown you how to set/get the product id you want to show , the rest part is how to load partial view to show product's information using Ajax . Please refer to below code sample :


    As you can see in above code sample , it will render the partial view in A div element.

    Best Regards,

    Nan Yu

    Tuesday, June 19, 2018 7:49 AM