SimpleModal Foreach Loop Dynamic Content

Question

How would you use simplemodal within a foreach loop so that it does not repeat the same information?

Example:

foreach($ret as $v)
{
        <div id='osx-modal'>
        <input type='button' name='osx' value='View' class='osx demo'/>
        </div>

        <div id="osx-modal-content">
            <div class="close"><a href="#" class="simplemodal-close">x</a></div>
                <div id="osx-modal-data">                                                                                               
                    <div id="toon_box">

                        <div id="toon_name">
                            <?php echo $v['toon_name'];?>
                        </div>

            <div id="toon_avatar">
                            <?php echo '<img src="' . $v['avatar'] . '" alt="" />';?>
                        </div>
                    </div>
                </div>
}

The meta data is pulled from users on the website and displays that meta data for each user in separate Modals. For clarification let's say foreach is repeated 10x since here is 10 users in the database. That will create 10 separate buttons for each user, that when you click the modal box pops up with the data inside of it.

The problem is, that when you click each button its the same user in each modal box. How would you set this up so each modal box displays the correct user meta data. I've already checked if persistence is set to false in simplemodal.js and it is.

What do you mean dynamic toon_names ??? have you considered using `MODAL-AJAX INTEGRATION` ??? Explain more on the word dynamic ?? — Baba, Apr 11 '12 at 22:51
updated question. What I meant was different meta data is contained in each modal box rather than the same meta data being repeated in each modal box. — Justin Lucas, Apr 11 '12 at 23:40

Baba · Answer 1 · 2012-04-12T00:12:48.427

The reason you are having the same meta data in the same model box is because this line of code

<input type='button' name='osx' value='View' class='osx demo'/>

using class is very generic so you should be using id instead where each button has its own uniqid

<input type='button' name='osx' value='View' id='os1'/>
<input type='button' name='osx' value='View' id='os2'/>

Now your <div id="osx-modal-content"> would also look like this

<div id="osx-modal-content1">
<div id="osx-modal-content2">

Your javascript would look like this

$("os1").addEvent("click", function(){
  var SM = new SimpleModal();
      SM.show({
        "title":"Title",
        "contents": $("#osx-modal-content1").html()
      });
});


$("os2").addEvent("click", function(){
  var SM = new SimpleModal();
      SM.show({
        "title":"Title",
        "contents": $("#osx-modal-content2").html()
      });
});

Can use see the way everything is mapped ??? this is who you achieve each content in each model

Let me know if you need more information

Edit 1 Example

<?php
$x = 0;
foreach ( $ret as $v ) {
    $x ++;
    $content = "
    <script type=\"text/javascript\">addModal($x)</script>
    <div id='osx-modal'>
        <input type='button' name='osx' value='View' id='osx{$x}'/>
        </div>
        <div id=\"osx-modal-content{$x}\">
            <div class=\"close\"><a href=\"#\" class=\"simplemodal-close\">x</a></div>
                <div id=\"osx-modal-data\">                                                                                               
                    <div id=\"toon_box\">
                        <div id=\"toon_name\">
                        {$v['toon_name']}
                        </div>
            <div id=\"toon_avatar\">
                            <img src=\"{$v['avatar']}\" alt=\"\" />
                        </div>
                    </div>
                </div>";

}

?>

<script type="text/javascript">
function addModal(x)
{

    $("osx" + x).addEvent("click", function(){
          var SM = new SimpleModal();
              SM.show({
                "title":"Title",
                "contents": $("#osx-modal-content" + x).html()
              });
        });

}
</script>

The full script pulls user_meta from the wp_user_database and the script is within a loop. Today there maybe 10 users, tomorrow 20. I'd need a way to automate creating different id names in javascript. — Justin Lucas, Apr 12 '12 at 00:04
Thank you for your help baba unfortunately I could not integrate this with my code, I spent several hours trying to get it to work but failed doing so. You have however given me an idea for a different approach that I tried and I "think" it's close to working but justifies a new question I think... — Justin Lucas, Apr 12 '12 at 15:40

score 0 · Accepted Answer · answered Apr 13 '12 at 16:29

Finally got it to work thanks to standup75!

 jQuery(function ($) {
  var OSX = {
      container: null,
      init: function () {
              $("[name=osx]").click(function (e) {
                e.preventDefault(); 
                $(this).parent().next().modal({
                    overlayId: 'osx-overlay',
                    containerId: 'osx-container',
                    closeHTML: null,
                    minHeight: 80,
                    opacity: 65, 
                    position: ['0',],
                    overlayClose: true,
                    onOpen: OSX.open,
                    onClose: OSX.close
                });
            });
      },

can you explain how you used this to get it working, how did you call this function? — Alpdog14, Aug 20 '12 at 18:46

SimpleModal Foreach Loop Dynamic Content

2 Answers2