Question

A lot of my PHP code creates a dynamic ID selector because I don’t have the ID attr value until I execute the PHP code, so I am finding myself taking a shortcut and putting jquery javascript code as name of the ID being created.

So I want to know if there are other ways of doing it better. My current method works, but I know it’s bad practice.

To illustrate what I am doing:

for ($x=0;$x>=10; $x++){
echo "...
    <script>
    $(function() {
    $( \"#dialog{$x}\" ).dialog({
        autoOpen: false,
        show: \"blind\",
        hide: \"explode\"
    });
    $( \"#opener{$x}\" ).click(function() {
      $( \"#dialog{$x}\" ).dialog( \"open\" );
        return false;
    });
    </script>
    ...";


  echo "<a id=\"opener{$x}\"> View Notes</a>";
  echo "<div id=\"dialog{$x}\">some data also dynamically generated depending on value of $x</div>";
}

Answer 1

You should write your HTML mark-up using classes and data attributes.

For example:

<a href="#" class="opener" data-id="1">View Notes</a>
<div class="notes" data-id="1">My notes here</div>

<a href="#" class="opener" data-id="2">View Notes</a>
<div class="notes" data-id="2">My other notes here</div>

Then write your JavaScript to take an array of options using class selectors.

$('.notes').dialog({
    autoOpen: false,
    show: "blind",
    hide: "explode"
});

$('.opener').click(function(e) {
    $('.notes[dataId==' + $(this).data('id')).dialog('open');
    e.preventDefault();
});