CODEWITHSUNDEEP
javascriptjqueryhtmlangularjsjson
ahayes
ahayes

Reputation: 11

How do I call data from a div in a different div on click?

I am trying to create an online radio station. As part of the process, I need my player to call track/story data when the play button for a story is clicked on a different part of the page.

I'm using JSON to call the data to the each div. The data I have for stories is as follows: 

<div class="play_button text-hide" 
data-id="{id}" 
data-title="{title}" 
data-storyurl="{fullUrl}" 
data-program="{category}" 
data-programurl="{category.fullUrl}" 
data-type="audio" 
data-src="{soundcloudLink}" 
data-item-type="story" 
data-pub-date="{addedOn}">
</div>

How would I call that data to my player, which is a separate div on click?

In other words, my page will have multiple stories with audio files, and whenever one of them is clicked, I would like the player to display 

<div>
<a href="{fullUrl}">{title}</a>
<a href="{category.fullUrl}">{category}</a>
</div>

For each track/story that is clicked.

WBEZ was used as an example.

Upvotes: 0

Views: 258

Answers (2)

M.M
M.M

Reputation: 2304

If your problem is on getting the data from the div and to the player this should do it:

$(".play_button").click(function(event){//click on the div with the information
    var el = $(this);//the div
    var dataToPass = {//your data in an object
        dataId: el.attr("data-id"), 
        dataTitle: el.attr("data-title"), 
        dataStoryUrl: el.attr("data-storyurl"), 
        dataProgram: el.attr("data-program"), 
        dataProgramUrl: el.attr("data-programurl"), 
        dataType: el.attr("data-type"), 
        dataSrc: el.attr("data-src"), 
        dataItemType: el.attr("data-pub-date")};

    //Send it to your player (not sure what your idea is)

    //You can access it like
    var test = dataToPass.dataId;//same goes for the others
});

Answering your comment:

If you have a class or an id on the target div, say target:

<div id = "target"> <a href="{data-storyurl}">{data-title}</a> <a href="{data-programurl}">{data-program}</a> </div>

,you can do:

    $("#target").html(
'<a href="'+dataToPass.dataStoryUrl+'">"'+dataToPass.dataTitle+'"</a>\
<a href="'+dataToPass.dataProgramUrl+'">"'+dataToPass.dataProgram+'"</a>');

the '\' at the end of line 2 is just for the line break in the string

All together now (I removed the unused variables (attributes) for this part):

$(".play_button").click(function(event){//click on the div with the information
    var el = $(this);//the clicked div
    var dataToPass = {//your data in an object
        dataTitle: el.attr("data-title"), 
        dataStoryUrl: el.attr("data-storyurl"), 
        dataProgram: el.attr("data-program"), 
        dataProgramUrl: el.attr("data-programurl")};

    //Send it to the target div
     $("#target").html(
'<a href="'+dataToPass.dataStoryUrl+'">"'+dataToPass.dataTitle+'"</a>\
<a href="'+dataToPass.dataProgramUrl+'">"'+dataToPass.dataProgram+'"</a>');
});

Upvotes: 0

Suraj
Suraj

Reputation: 3137

You can hide your data by default and onclick you can set it to visible.

Try this,

<html>
<head>
<style>
#panel, .flip {
    font-size: 16px;
    padding: 10px;
    text-align: center;
    background-color: #4CAF50;
    color: white;
    border: solid 1px #a6d8a8;
    margin: auto;
}

#panel {
    display: none;
}
</style>
</head>
<body>

<p class="flip" onclick="myFunction()">Tere Sang yara</p>

<div id="panel">
  <p>Tere Sang yara</p>
  <p>Movie : Rushtam</p>
  <p>Great Movie</p>
  <p>Listening now</p>
</div>

<script>
function myFunction() {
    document.getElementById("panel").style.display = "block";
}
</script>

</body>
</html>

Hope it will help. :)

Upvotes: 1

Related Questions