CODEWITHSUNDEEP
javascriptjqueryloopswhile-loop
realstarspace
realstarspace

Reputation: 11

how to get the button's element id when clicked and use it in jquery ui

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<script>
$(function() {

    $(".dialog").dialog({
    autoOpen: false,
    show: {
        effect: "blind",
        duration: 400
    },
    hide: {
        effect: "blind",
        duration: 400
    }
    });

    $( ".opener" ).on ('click',MyJQFunction);
});
function MyJQFunction() {
    $(".dialog").dialog( "open" );
}
</script>

 <?php

 $x = 0;
 while($x < 5){
 $x = $x+1;

 $did1 = 'dialog'.$x;
 $did2 = 'opener'.$x;
 ?>

 <div class = "dialog" id= <?php echo $did1; ?>  title=<?php echo $did1; ?>>
 <p> <?php echo $did1; ?> </p>
 </div>

 <button class= "opener" > <?php echo $did2; ?> Contact</button>

 <?php
 }//end of while loop
 ?>

I am basically creating a table using the while loop. For each button and <p> I am assigning specific id. Now, I want to grab this id and when the button is clicked, show that specific <p>.

However, when I click one button, all buttons come up at the same time.

How can I fix this issue?

Upvotes: 0

Views: 968

Answers (3)

PSL
PSL

Reputation: 123739

You want to get the dialog that is preceding the button, you can always refer to the button inside its handler with this keyword and then use prev to grab the dialog div. You dont necessarily need the id atleast with the structure you have posted.

Try this way:

function MyJQFunction() {
    $(this).prev(".dialog").dialog( "open" );
    //to get the id of the dialog
     //$(this).prev(".dialog")[0].id;
}

Update

This won't work since jquery dialog gets created prior to the button click and they are placed in the bottom of the body. So change you php code for button generation to:

i.e Attach a data-target attribute to target the dialog with particular id.

<button class= "opener" data-target="#<?php echo $did1; ?>"> <?php echo $did2; ?> Contact</button>

and change your script to:

function MyJQFunction() {
    $($(this).data('target')).dialog( "open" );
}

Full Code:

<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<script>
$(function() {

    $(".dialog").dialog({
    autoOpen: false,
    show: {
        effect: "blind",
        duration: 400
    },
    hide: {
        effect: "blind",
        duration: 400
    }
    });

    $( ".opener" ).on ('click',MyJQFunction);
});
function MyJQFunction() {
    $($(this).data('target')).dialog( "open" );
}
</script>
</head>
<body>
 <?php

 $x = 0;
 while($x < 5){
 $x = $x+1;

 $did1 = 'dialog'.$x;
 $did2 = 'opener'.$x;
 ?>

 <div class = "dialog" id= <?php echo $did1; ?>  title=<?php echo $did1; ?>>
 <p> <?php echo $did1; ?> </p>
 </div>

 <button class= "opener" data-target="#<?php echo $did1; ?>"> <?php echo $did2; ?> Contact</button>

 <?php
 }//end of while loop
 ?>
</body>
</html>

Upvotes: 1

fivenseven
fivenseven

Reputation: 1

To get the ID you can use .attr('id') or .attr('class') if you want to get the class of the object.

Example : 

<button id='12345'>12345</button>


$('button').on('click',function() {
  var id = $(this).attr('id');
  alert(id);
});

Upvotes: 0

iConnor
iConnor

Reputation: 20209

You should use a data attribute like so

<button class= "opener" data-dialog="<?php echo $did2; ?>"><?php echo $did2; ?> Contact</button>

function MyJQFunction() {
    var dialog = $(this).attr('data-dialog');
    $(dialog).dialog("open");
}

Upvotes: 0

Related Questions