Question

I am changing my code from fancybox to jquery ui, but i have some errors in this code:

<a class = "perfil_1"><h3>Luciana </h3></a>
<a class = "perfil_2"><h3>John</h3></a>
<a class = "perfil_3"><h3>Pedro </h3></a>

<div id="dialog_1">
<p>Lorem ipsum dolor sit amet</p>
</div>

<div id="dialog_2">
<p>Lorem ipsum dolor sit amet</p>
</div>

<div id="dialog_3">
<p>Lorem ipsum dolor sit amet</p>
</div>


  for (i = 1; i < 4; i++) {
            $('.perfil_'+i).click(function(){
                $('#dialog_'+i).dialog('open');
                return false;
            });
         };

Any help?, thanks.

Answer 1

EDIT NOTE you are missing the .dialog() declaration. Without it you don’t have a dialog created and so it won’t open. Call it as $("dialog_" + i).dialog().dialog("open"); See Js fiddle for an non-styled dialog example.

Instead of looping through each why don’t you add a class to each of the anchors, give it an index attribute use that to loop through:

<H3><a class = "perfil" index=1>Luciana </a></h3>
<H3><a class = "perfil" index=2>John</a></h3>
<H3><a class = "perfil" index=3>Pedro</a></h3>

<div id="dialog_1">
<p>Lorem ipsum dolor sit amet</p>
</div>

<div id="dialog_2">
<p>Lorem ipsum dolor sit amet</p>
</div>

<div id="dialog_3">
<p>Lorem ipsum dolor sit amet</p>
</div>


$('.perfil').live("click", function(){
    var i = this.getAttribute("index");
    $('#dialog_'+i).dialog().dialog('open');
    return false;
});

On a side note, if your version of the code isn’t run inside a $(document).ready(function(){}) block or isn’t at the end of your html there is a chance the click assignment is being made before the element exists and there for isn’t being bound to your current anchors. This is why I tend to go with live or delegate so you are always guaranteed binding.