locked
pass data inside Tag as parameter to flyout

    Question

  • Hi all,

    I need help on this thing.

    I create dynamically loaded HTML button element in my page and once button clicked i need to send data inside the button to flyout that I created.

    This is sample button with sample data.I need to send year, description and image source to flyout

    <button class="wideLowtBtnLow">
    <div  class="wideLowItm">
    <p class="lowTextBottom1">
    <span class="Year">2007<br /></span>
    <img class="lowWideImg" src="img/sample.png"/>
    Here the test discription</p>
    </div>
    </button>

    Once i clicked on this button it should display flyout with those details.

    How can i do it.


    Wednesday, July 24, 2013 10:54 AM

Answers

  • Hi,

    You need to first declare an Event Handler to get the click on the button, you can put an ID on the button and register a handler on the "ready" state handler of the Page Control:

    document.querySelector("#Id_of_button").addEventListener("click", function(){
    //handler code
    });

    Then, inside the handler, you can access the children HTML objects and their properties:

    document.querySelector("#Id_of_button").addEventListener("click", function(){
    this.querySelector("div > p > span").innerText //access to the span text
    this.querySelector("div > p > img") //access to the img tag, you can check the src attribute
    this.querySelector("div > p").innerText //access to the description, this one might be tricky since you put the img tag inside the p
    });

    Monday, July 29, 2013 2:25 PM