how to get the button's element id when clicked and use it in jquery ui
Question
<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?
3 answers
solution1
1 ACCPTED 2013-10-03 03:01:11
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:
ie 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>
solution2
0 2013-10-03 03:03:57
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");
}
solution3
0 2013-10-03 03:08:41
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);
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.