Customizing Text in html based on javascript output

Question

I have a modal dialog box function that is set up with a javascript/jquery script that pops up when a user clicks a button. I pull data from the button to find out which button. But the text that pops up is set up in html with a div that calls the script function.

My question is, how do I customize this text based on the data I pull in the script.

Here is the relevant code below to give you an idea of what I'm trying to do:

The script:

<script>
$(function() {
  $( "#dialog-modal" ).dialog({autoOpen: false, height: 250, width: 400, modal: true});

  $( "#opener" ).click(function() {
                       $( "#dialog-modal" ).dialog( "open" );

                       $.get('/like_artist.php', {artist_id : $(this).data('artist_id')}, function(data) {
                             alert("Data Loaded: " + data.artist_id);
                             }, "json");

        });

  });
</script>

It is called in this div:

<div id="dialog-modal" title="Basic dialog">
<p>You have just liked </p>

<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

The button a user clicks (one of many with different data-artist_id values):

<div class="button_row">
                        <button type="button" id="opener" data-artist_id="1">Play My City</button>
                    </div>

Basically I would like to have the artist_id inform the div to make the text in the dialog box customized for each button.

Thank you very much for your help!

Brad M · Accepted Answer · 2013-02-20 21:03:43Z

1

I assume you are looking for something like this?

$( "#opener" ).click(function(e) {
    var text = '';
    var artistId = $(e.target).data('artist_id');
    switch(artistId) {
        case 1: text = 'text for artist 1'; break;
        case 2: text = 'text for artist 2'; break;
        default: text = 'unknown'; break;
    }
    $('#idOfPTagWhereYouWantText').text(text);

answered Feb 20, 2013 at 21:03

Brad M

7,9101 gold badge25 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1072337 Over a year ago

could you tell me how I would implement this within the code I already have?

Collectives™ on Stack Overflow

Customizing Text in html based on javascript output

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related